importpng

by pancelor

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

24

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

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

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...

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

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.

It is all I needed tu make my wallpaper.

original image
https://www.reddit.com/r/Hololive/comments/ia940a/hoshimachi_suisei_minimalvector_wallpaper/?rdt=62121

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

Nice work!

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?)

@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

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?

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

@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?

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