Log In  

Cart #importpng-9 | 2024-04-06 | Embed ▽ | License: CC4-BY-NC-SA
18

Guide

Currently (in Picotron 0.1.0e) it's hard to use a PNG image as a sprite. You can fetch("myimage.png"), but the result isn't in the right image format. So, here's a small tool to convert PNG files into picotron sprites.

Drag any .png or .qoi image into the tool to convert it into a sprite pod on your clipboard. You can paste this into the graphics editor, or into code.

Drag in a .hex file (e.g. from lospec.com) or a .pal file (e.g. from OkPal) before importing your png to change the import palette.

Details

Import speed

This tool prioritizes import speed. Images with only a few unique colors (e.g. an image already in the picotron palette) will import much faster than images with many colors.

Color quantization

You can use any colors, and the tool will try it's best to fit them to the palette. It isn't very smart about converting colors (it uses nearest euclidean distance in RGB space, and doesn't do any dithering). If you want better color conversion, use some external tool and make sure the PNG is in the correct palette before converting it with this tool.

See also PNG Frame, in "Related tools" below.

Wallpapers

If you're making a desktop wallpaper, I think you should stick to the default palette. If you use a custom palette, then your colors will change whenever you focus some window besides the desktop, I'm pretty sure.

To make a wallpaper:

  • make sure your wallpaper folder exists (mkdir /appdata/system/wallpapers)
  • save a new cart into that folder with this code:
    function _draw()
        spr(1)
        _draw = function() end
    end
  • convert your image using this tool, and copy it into your clipboard
  • paste your image into sprite 1 of the default sprite file

Library usage

This code is organized to make it easy to use as a library in your code. The library is self-contained in lib/importpng.lua, and you interact with it by calling myjob = job_importpng(myimg). The returned "job" is essentially a coroutine, but one that will let you limit its processing time. Call myjob:work(limit) during _update() until the job is done, or call myjob:join() a single time to finish it all at once (likely lagging the game). See the code for more details.

License: CC4-BY-NC-SA

Related tools

  • Cutievirus' PNG Frame -- a similar tool with much better color conversion. If your png is already in the right palette, importpng is faster than PNG Frame. But if you want better color quantization, use PNG Frame.
  • My Aseprite PICO-8/Picotron export extension lets you export Picotron pods directly to your clipboard from Aseprite.
  • My sprite importer lets you import PICO-8 spritesheets into Picotron.
  • My photo carousel uses this importer to show your custom PNGs as an animated wallpaper.
  • drakmaniso's OkPal palette editor.

changelog

v0.4 (#importpng-9)

  • add QOI image support - thanks to vebrun for prompting me to add it!

v0.3 (#importpng-7)

  • support for custom palettes
  • make it easy to use importpng as a library

v0.2 (#importpng-6)

  • show image as it imports
  • draw black in preview (not transparent anymore)
  • export to compressed pod format

v0.1 (#importpng-4)

  • initial release
P#144661 2024-03-27 11:24 ( Edited 2024-04-09 01:04)

Thanks!!!!
I was waiting for someone to do it!

P#144673 2024-03-27 12:23

Thank you so much :D
I was dragging PNGs into pico-8 and then copying into Picotron which unnecessarily rounded colors to the smaller pico-8 color palette, and then I had to manually go through all of them and add the missing colors back pixel by pixel...

P#144674 2024-03-27 12:27

very nice! recomanded to rename the original .png pict with no spaces, or it get an error.

P#144682 2024-03-27 13:05
1

Oh boy do I feel silly now, as BGelais already mentioned it is quite important the file ends with .png as a file extension. abc.p8.png does not work, because the detected extension is .p8.png. And here I thought it wasn't implemented in fetch yet because it didn't work as documented…

@pancelor are you interested in adding p8.png cart support to p8x8?
I was planning on creating a PR for it, and have (now redundantly) already written most of the PNG decoder implementation.
I'd be happy to contribute support for it once I've implemented the cart decoding.

P#144685 2024-03-27 13:29
1
1

Sweet! It actually does a pretty good job of converting the colors ...

Nice work!

P#144760 2024-03-27 23:26

Is dragging a file into picotron also a thing on MacOS? It isn't working for me. (Is it only a thing within pico's Files app?)

P#144792 2024-03-28 06:13

@SyrupThinker ohhh that's unfortunate... fetch is usually convenient, but maybe a bit too magic sometimes. some sort of fetch_raw/io.open to get a file's bytes might be nice? maybe. I suppose you could mkdir("/ram/temp") cp("game.p8.png","/ram/temp/game.png") fetch("/ram/temp/game.png") to read it anyway

But anyway, I'm unsure whether I'd want to support .p8.pngs -- let's discuss it on this github issue I just created, if that works for you?

@misuba correct -- you'll need to put the files into picotron before you can drag them onto running picotron programs. The folder command in the picotron terminal will helpfully open your current folder in the MacOS file explorer

P#144798 2024-03-28 07:14

I tried importing a 16bit pixel art .png file but it messes up all the colors! Am I missing something? How do you guys import images? Do you manually change the palette to the picotron one?

P#145135 2024-03-30 16:24

Thank you for the script, is there some native way to do the oposite, like export the png to edit in Aseprite?

P#145190 2024-03-31 00:22
1

@369369369 its hard to know without seeing an example! it normally "just works", although the color conversion is pretty basic. look at the source image FabricioKarim77 posted -- the converted result looks pretty different, although I've seen some results that look even more different from their source. (Also, I assume you're using the default picotron palette? using an edited palette is not supported (yet?))

@marioolofo not that I know of; personally I take a screenshot (with ctrl-6, or using the screenshot tool in my OS) and then resize it in Aseprite (it's a bit cumbersome)

P#145191 2024-03-31 00:30 ( Edited 2024-03-31 00:33)

@pancelor thanks, another question about the importer from Aseprite, if I have a 128x128px image, when I paste in Picotron, only the selected gfx sprite is replaced for this big image, there's some way to make it fill the 8x8 grid?

P#145192 2024-03-31 00:36
1

@marioolofo yes! see https://www.lexaloffle.com/bbs/?tid=140800 or p8x8 (linked on that page)

P#145204 2024-03-31 02:33

[Please log in to post a comment]