Sprite encoding/decoding for compact graphics data

[komame]

Hi,

I present you the final version of 4-bit encryption / 15 color images.

The source code for the encoding and decoding functions is here:

Code:

// 15-color sprite encoding/decoding
// by Piotr Kowalewski - August 2015

DS15(a,p) //decode 15-color sprite
BEGIN
local b,c=#0:64,d={},e,z;
FOR b FROM 1 TO SIZE(a) DO
R→B(a(b))▶z;
FOR e FROM 0 TO 3 DO
BITSL(c,(e>0)*16)+p(BITAND(z,15))▶c;
BITSR(z,4)▶z;
END;
CONCAT(d,c)▶d;
#0:64▶c
END;
RETURN d;
END;

EXPORT ES15(d) //encode 15-color sprite
BEGIN
local a="",b,c,e=0;
FOR b FROM 1 TO SIZE(d) DO
EXPR("#"+CHAR(d(b)))▶c;
BITSL(e,4)+c▶e;
IF b MOD 4=0 THEN
a+CHAR(e)▶a;
0▶e;
END;
END;
IF SIZE(a)<(SIZE(d)/4) THEN
a+CHAR(e)▶a;
END;
RETURN a;
END;

Now I'll show how to do the sprite encoding.

1. First, you need to have / create the image that you want to encode.
The image can have up to 15 colors including transparency color.

I drew a small tank 16x12 pixels of 6 colors that will be used in this example (PNG file in the attachment).

2. Then transcribe the color palette to a list of integers.
16-bit color is encoded as follows: ARRRRRGGGGGBBBBB (standard for the DIMGROB_P).
A - alpha (transparency bit) - if set, the next bits (RGB) are not important.
R - red 5-bits
G - green 5-bits
B - blue 5-bits

There are 6 colors in my picture:
- 1. black (0 00000 00000 00000 = #0)
- 2. dark gray (0 00101 00101 00101 = #14A5)
- 3. middle gray (0 01010 01010 01010 = #294A)
- 4. light gray (0 01110 01110 01110 = #39CE)
- 5. red (0 11111 00000 00000 = #7C00)
- 6. transparent (1 11111 11111 11111 = #FFFF).

Now we create a list of these colors:
{#0, #14A5, #294A, #39CE, #7C00, #FFFF};

3. Then, each pixel of your image you writes using numbers that correspond to the colors on your list of colors.

In my case, it must look like this:

6663434343434342
6664333333333332
6662232323232322
6666663344444336
6666633433333135
3333333433333135
1111111433333135
6666661433333135
6666663311111336
6663434343434342
6664333333333332
6662232323232322

Now you combine these lines in one long row and a string is an input parameter to the encoding function:
"66634343434343426664333333333332666223232323232266666633444443366666633433333135​33333334333331351111111433333135666666143333313566666633111113366663434343434342​66643333333333326662232323232322"

4. So, let's do the encoding!

Code:

ES15("66634343434343426664333333333332666223232323232266666633444443366666633433333135​33333334333331351111111433333135666666143333313566666633111113366663434343434342​66643333333333326662232323232322");

..and this is the result (much shorter string):
"晣䍃䍃䍂晤㌳㌳㌲晢⌣⌣⌢晦昳䑄䌶晦挴㌳ㄵ㌳㌴㌳ㄵᄑᄔ㌳ㄵ晦昔㌳ㄵ晦昳ᄑጶ晣䍃䍃䍂晤㌳㌳㌲晢⌣⌣⌢"

5. Now we should copy the function of decoding DS15 into our program and as its parameter specify the encoded string and color palette, which had previously been written.

Code:

DS15("晣䍃䍃䍂晤㌳㌳㌲晢⌣⌣⌢晦昳䑄䌶晦挴㌳ㄵ㌳㌴㌳ㄵᄑᄔ㌳ㄵ晦昔㌳ㄵ晦昳ᄑጶ晣䍃䍃䍂晤㌳㌳㌲晢⌣⌣⌢",p);

Our encoded string can be decoded to a variable or directly to DIMGROB_P, for example:

Code:

DIMGROB_P(G1,16,12,DS15("晣䍃䍃䍂晤㌳㌳㌲晢⌣⌣⌢晦昳䑄䌶晦挴㌳ㄵ㌳㌴㌳ㄵᄑᄔ㌳ㄵ晦昔㌳ㄵ晦昳ᄑጶ晣䍃䍃䍂晤㌳㌳㌲晢⌣⌣⌢",p));

6. That's all. Now you can use BLIT_P to display the decoded image.

Code:

BLIT_P(G0,32,32,G1);

You can use several color palettes and decode the same images with different brightness (for example).

I did have a small comparison as between ICON, a list of integers and my encoding method.
Now, the image of the tank size is 50 characters plus size of color palette, which can be only one to multiple images.
If we use the command ICON the same image will take 387 characters.
If we use a list of integers this image will take 1090 characters.

So if you have several or even dozens of sprits in yours program the aggregated differences could be very significant.


In the attachment is placed a finished solution for those who do not want to prescribe