Hello, I am playing around with wasm-4 and want to use aseprite to draw the sprites.
It’s a fantasy webassembly console that supports 1 and 2 bit per pixel images. However I can only select 8bit indexed in aseprite when creating a file. Is there a builtin or api solution to this?
If not what is the suggested way to use aseprite and convert to 2bpp or 1 afterwards? I would rather use aseprite instead of hopping between editors just for indexed files.
Doc step on wasm-4 image drawing:
hi, SurfCat!
i’m not familiar with wasm-4, however for 2bpp images there’s an answer in the doc you linked:
For example, if we have this 4-color image of a bunny:
…
Note that the RGB color of this sprite doesn’t matter, w4 png2src only cares about a pixel’s palette index.
w4 png2src --assemblyscript bunny.png
so, all you have to do is select indexed image mode, load whatever 4 colour palette you want, draw your sprite and then export it as indexed png and you should be fine.
for the 1bpp format, i’m not sure if you can just use 2 colour indexed png in the same way. it seems like you can because CLI | WASM-4 says “Max 4 colors”.
im pretty sure 1 bit, 2 bit only means the amout of colors that can be indexed, 2 and 4 respectively.
I used the png2src conversion before posting but some colours were not rendering. This and searching the web made me believe there might be a difference in file format (headers etc). But I just found out my understanding of setting up the palette in code was wrong. It seems I can use any indexed image as long as it does not use more than 4 colours in the image itself.
The explanation is a bit more programming focused, I will highlight some facts that might seem obvious if you already know a bit of programming.
The colours set in code seemed off by one, for example if I had the colours [c1,c2,c3,c4].
Whenever I set c2 to the image palette index 1 it would render c1. This was caused by me misunderstanding colour config.
In code you set 4 colours, this is not the colours in your image. These are used to set indexes later.
// Codes from aseprite palette:
w4.PALETTE.* = .{
0x344731,
0x6772a9,
0x3a3277,
0x9b1b95,
};
Now I can assign each index of a image to one of these.
This is done here from right to left.
// Set index image palette to chosen color earlier:
w4.DRAW_COLORS.* = 0x4320;
This was the cause of my issue. The colours I set in code earlier are also 4,
but I treated it as an array. Meaning for c1 I would have to set 0 in the above code.
But notice there is also a 4, this would be c5?
My mistake is the colour palette in the first code block is a struct not an array, and each field is labeled
from 1 and up so not 0 indexed. Setting 0 in the last code block means use the ‘transparent’ colour not
use the colour at index 0. There are no 0 indexes, for the first colour I would have to specify 1.
This might be more program related than pixelart but thanks for the help. Still unsure if there exists file formats for 1 - 2 bpp but for my purposes this works as intended. Below working result(limited to 1 upload so kinda cramped).
Running example:
I used 0 for the bomb highlight index here should be 1 but not an issue in example
