Images

So, I solved my problem by doing this :

Set 0 for the speed :
const uint16_t marche_avantData[] = {10,14,2,0,0xfc3b,0,

AND set at least 2 for the repeat action (0 or 1 do not work) :
if (gb.buttons.repeat(BUTTON_RIGHT,2)) {

How do we manage collision with vertical sprite sheet ?
Because if I display independently several sprites for the animation, I can set collision status for each different sprite, but how to do with a sprite sheet ?

Later for collision perhaps :)
For the movement, I'd like to set for example 7 frames for the first image of my animation and 3 frames for the second one.
How can I do this ?

You don't test collision with each sprite separatly. You test collision with the rectangle of where your animation is positionned. (X,Y, X+width, Y+Height) and the object you want.
You can't make the animation wanted auto. If you want do that, you'll have to manage your anim manually. Else, you can do it auto with some adaptation you put 2 times the first image and one time the second and you set speed to 3 and you will have first picture 6 frames and second during 3 frames.

OK, I'll check for collision, so it's actually setting hitbox.
I thought about that for animation pace but I was wondering if there was another method because it means that I have to use more memore to duplicate same image. So if I understand, instead of having my 2 images animation for the walk, I set let says 3 times the same first image then 1 time the last image (full image will be then made of 4 images instead of 2).
Thank you.

If you set speed to 3, you have to set the first picture 2 times in your picture and 1 time the second. So your picture will be

Picture 1

------------

Picture 1

-------------

Picture 2

And you will see picture 1 for 6 cycles and picture 2 for 3 cycles of the loop

Else you can just load the pictures in memory and manage the animation by yourself with a counter for example

In the setup you set anim to 0

in loop you test if sprite is walking then if it the case make

       anim++

       if anim < 7 then show picture 1

                 else if anim < 10 then show picture 2

test if sprite was walking and if he stopped then

      if it's case set anim to 0 and show picture of man standing

It's just the idea of how you can manually manage the pictures, i let you try to do your program but if you encouter some difficulties, post your code part and i'll write it for you.

Thx :)

Hi, 

I'm trying to use images with indexed colors but I'm having trouble to render something that match with the actual colors I chose on my image. I tried to display my index image with the default Gamebuino_META palette and with a my own custom palette, in all cases I get something very far away from the expected result so I think I don't understand how it works.

Here is the little piece of code I made for my tries : 

#include <Gamebuino-Meta.h>

const uint8_t indexColorlabData[] = 
{
  16, 16,
  1, 0, 
  1, 
  0xFF, 
  1, //indexed color mode
  0x22, 0x22,0xcc, 0xcc,0xee, 0xee,0xdd, 0xdd,
  0x22, 0x22,0xcc, 0xcc,0xee, 0xee,0xdd, 0xdd,
  0x22, 0x22,0xcc, 0xcc,0xee, 0xee,0xdd, 0xdd,
  0x22, 0x22,0xcc, 0xcc,0xee, 0xee,0xdd, 0xdd,
  0x33, 0x33,0x33, 0x33,0xcc, 0xcc,0xdd, 0xdd,
  0x33, 0x33,0x33, 0x33,0xcc, 0xcc,0xdd, 0xdd,
  0x33, 0x33,0x33, 0x33,0xcc, 0xcc,0xdd, 0xdd,
  0x33, 0x33,0x33, 0x33,0xcc, 0xcc,0xdd, 0xdd,
  0xcc, 0xcc,0x55, 0x55,0xbb, 0xbb,0x55, 0x55,
  0xcc, 0xcc,0x55, 0x55,0xbb, 0xbb,0x55, 0x55,
  0xcc, 0xcc,0x55, 0x55,0xbb, 0xbb,0x55, 0x55,
  0xcc, 0xcc,0x55, 0x55,0xbb, 0xbb,0x55, 0x55,
  0xaa, 0xaa,0xee, 0xee,0x99, 0x99,0x66, 0x66,
  0xaa, 0xaa,0xee, 0xee,0x99, 0x99,0x66, 0x66,
  0xaa, 0xaa,0xee, 0xee,0x99, 0x99,0x66, 0x66,
  0xaa, 0xaa,0xee, 0xee,0x99, 0x99,0x66, 0x66
};

Image indexColorlab = Image(indexColorlabData);

Color my8_tPalette[16] = {
  (Color)0x22,
  (Color)0xcc,
  (Color)0xee,
  (Color)0xdd,
  (Color)0x33,
  (Color)0x33,
  (Color)0xcc,
  (Color)0xdd,
  (Color)0x55,
  (Color)0xbb,
  (Color)0xaa,
  (Color)0x99,
  (Color)0x66,
  (Color)0xdd,
  (Color)0xcc,
  (Color)0xee
};

const uint16_t RGBcolorlabData[] = 
{
  16,16,
  1,0,
  1,
  0, 
  0, //RGB565 color mode
  0x94b2,0x94b2,0x94b2,0x94b2,0x738e,0x738e,0x738e,0x738e,0xc638,0xc638,0xc638,0xc638,0x4a69,0x4a69,0x4a69,0x4a69,
  0x94b2,0x94b2,0x94b2,0x94b2,0x738e,0x738e,0x738e,0x738e,0xc638,0xc638,0xc638,0xc638,0x4a69,0x4a69,0x4a69,0x4a69,
  0x94b2,0x94b2,0x94b2,0x94b2,0x738e,0x738e,0x738e,0x738e,0xc638,0xc638,0xc638,0xc638,0x4a69,0x4a69,0x4a69,0x4a69,
  0x94b2,0x94b2,0x94b2,0x94b2,0x738e,0x738e,0x738e,0x738e,0xc638,0xc638,0xc638,0xc638,0x4a69,0x4a69,0x4a69,0x4a69,
  0x243b,0x243b,0x243b,0x243b,0x1b14,0x1b14,0x1b14,0x1b14,0x6dbf,0x6dbf,0x6dbf,0x6dbf,0x3b11,0x3b11,0x3b11,0x3b11,
  0x243b,0x243b,0x243b,0x243b,0x1b14,0x1b14,0x1b14,0x1b14,0x6dbf,0x6dbf,0x6dbf,0x6dbf,0x3b11,0x3b11,0x3b11,0x3b11,
  0x243b,0x243b,0x243b,0x243b,0x1b14,0x1b14,0x1b14,0x1b14,0x6dbf,0x6dbf,0x6dbf,0x6dbf,0x3b11,0x3b11,0x3b11,0x3b11,
  0x243b,0x243b,0x243b,0x243b,0x1b14,0x1b14,0x1b14,0x1b14,0x6dbf,0x6dbf,0x6dbf,0x6dbf,0x3b11,0x3b11,0x3b11,0x3b11,
  0x6f08,0x6f08,0x6f08,0x6f08,0x4de4,0x4de4,0x4de4,0x4de4,0x87eb,0x87eb,0x87eb,0x87eb,0x4c47,0x4c47,0x4c47,0x4c47,
  0x6f08,0x6f08,0x6f08,0x6f08,0x4de4,0x4de4,0x4de4,0x4de4,0x87eb,0x87eb,0x87eb,0x87eb,0x4c47,0x4c47,0x4c47,0x4c47,
  0x6f08,0x6f08,0x6f08,0x6f08,0x4de4,0x4de4,0x4de4,0x4de4,0x87eb,0x87eb,0x87eb,0x87eb,0x4c47,0x4c47,0x4c47,0x4c47,
  0x6f08,0x6f08,0x6f08,0x6f08,0x4de4,0x4de4,0x4de4,0x4de4,0x87eb,0x87eb,0x87eb,0x87eb,0x4c47,0x4c47,0x4c47,0x4c47,
  0xf96b,0xf96b,0xf96b,0xf96b,0xc98a,0xc98a,0xc98a,0xc98a,0xfd57,0xfd57,0xfd57,0xfd57,0xb866,0xb866,0xb866,0xb866,
  0xf96b,0xf96b,0xf96b,0xf96b,0xc98a,0xc98a,0xc98a,0xc98a,0xfd57,0xfd57,0xfd57,0xfd57,0xb866,0xb866,0xb866,0xb866,
  0xf96b,0xf96b,0xf96b,0xf96b,0xc98a,0xc98a,0xc98a,0xc98a,0xfd57,0xfd57,0xfd57,0xfd57,0xb866,0xb866,0xb866,0xb866,
  0xf96b,0xf96b,0xf96b,0xf96b,0xc98a,0xc98a,0xc98a,0xc98a,0xfd57,0xfd57,0xfd57,0xfd57,0xb866,0xb866,0xb866,0xb866
};

Image RGBcolorlab = Image(RGBcolorlabData);

Color my16_tPalette[16] = {
  (Color)0x94b2,
  (Color)0x738e,
  (Color)0xc638,
  (Color)0x4a69,
  (Color)0x243b,
  (Color)0x1b14,
  (Color)0x6dbf,
  (Color)0x3b11,
  (Color)0x6f08,
  (Color)0x4de4,
  (Color)0x87eb,
  (Color)0x4c47,
  (Color)0xf96b,
  (Color)0xc98a,
  (Color)0xfd57,
  (Color)0xb866
};

void setup() {
  gb.begin();
  //gb.display.setPalette(my16_tPalette);

}

void loop() {
  while(!gb.update());

  gb.display.drawImage(20,20,indexColorlab);
}

So there is several things I don't understand in there : 

My image is a 16x16 pixels square, containing 16 4x4 squares of different colors and I transcoded it in two versions with this tool : https://gamebuino.com/fr/creations/png-to-code , one in RGB565 mode and one in index mode. 

- The first thing I don't understand is that the indexed mode version doesn't contain 16 different colors but only 10... Buy yhe way it doesn't event contain 16x16 pixel, only 8x16..... why ??

- When I try to display my indexed image without setting any custom palette I understand that gb.display picks the nearest color in the default pallette but it's very far  from the original image and I don't know how do I have to do to be more accurate.

- So I tried with my own custom palette but I think I didn't understand how to create it : I tried to reference the 16 colors I got in the RGB transcoded version hoping they would match with the colors in the indexed version, but... not at all, doesn't match anything. 

- So I tried to set a custom palette but with the 10 8_bits-encoded colors I found in the indexed encoded image, but again, even worse, I get no color at all (just something like different levels of blue...).

Anyway, now I'm facing that conclusion : I just don't get a damned thing about how the indexed images works... I read the present documentation several times with all the possible attention and I didn't find the information I need. So here I am...

Thank you if anyone can help me understand :) !

You need to work with .bmp with the online converter, I noticed you can get wrong results with .png for example.

I made a python tool for indexed image with a custom palette, you just need to provide the palette as a 16*1 px image : https://github.com/deeph-z80/slimes/blob/master/sources/slimes/sprites/img_converter.py

You need to work with .bmp with the online converter, I noticed you can get wrong results with .png for example.

Indeed the numbers seems quite differents.. I'm going to try again with that array and I wil update my post.

UPDATE : the display of my image encoded with the same tool from a bmp file (extracted from GIMP with a rgb565 encoding config) is actually a lot worse : 

- in rgb565 encoding the simple display of my image in normal mode on the gamebuino doesn't work, the colors seems right but the image is entirely distorted.

- same for the indexed version, the image is distorted, I didn't tried with a custom palette. And I still get an array of pixels of 16x8 instead of 16x16...

I really don't get how this is supposed to work. And when I look into some source codes from other games everybody seems to take some aternative and complicated ways to achieve the trick.. 

So what is it to know  that I don't know ? Thank you for your help.

I made a python tool for indexed image with a custom palette, you just need to provide the palette as a 16*1 px image : https://github.com/deeph-z80/slimes/blob/master/sources/slimes/sprites/img_converter.py

Looks really great, but how  does it work ?

/*  GIMP header image file format (INDEXED): /home/pierre/Images/Glitch_META_img/colorlab.h  */

static unsigned int width = 16;
static unsigned int height = 16;

/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */

#define HEADER_PIXEL(data,pixel) {\
pixel[0] = header_data_cmap[(unsigned char)data[0]][0]; \
pixel[1] = header_data_cmap[(unsigned char)data[0]][1]; \
pixel[2] = header_data_cmap[(unsigned char)data[0]][2]; \
data ++; }

static char header_data_cmap[16][3] = {
    {188, 12, 49},
    { 78, 78, 78},
    {207, 50, 83},
    { 30, 99,162},
    { 60, 99,136},
    {255, 47, 91},
    {114,114,114},
    { 37,132,220},
    { 79,138, 58},
    {150,150,150},
    { 74,188, 35},
    {105,183,255},
    {255,169,187},
    {111,224, 71},
    {196,196,196},
    {134,255, 92},
    //{255,255,255}...
    };
static char header_data[] = {
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0
    };

/* GIMP RGB C-Source image dump (colorlab.c) */

static const struct {
  unsigned int      width;
  unsigned int      height;
  unsigned int      bytes_per_pixel; /* 2:RGB16, 3:RGB, 4:RGBA */ 
  unsigned char     pixel_data[16 * 16 * 3 + 1];
} gimp_image = {
  16, 16, 3,
  "\226\226\226\226\226\226\226\226\226\226\226\226rrrrrrrrrrrr\304\304\304"
  "\304\304\304\304\304\304\304\304\304NNNNNNNNNNNN\226\226\226\226\226\226"
  "\226\226\226\226\226\226rrrrrrrrrrrr\304\304\304\304\304\304\304\304\304"
  "\304\304\304NNNNNNNNNNNN\226\226\226\226\226\226\226\226\226\226\226\226"
  "rrrrrrrrrrrr\304\304\304\304\304\304\304\304\304\304\304\304NNNNNNNNNNNN"
  "\226\226\226\226\226\226\226\226\226\226\226\226rrrrrrrrrrrr\304\304\304"
  "\304\304\304\304\304\304\304\304\304NNNNNNNNNNNN%\204\334%\204\334%\204\334"
  "%\204\334\036c\242\036c\242\036c\242\036c\242i\267\377i\267\377i\267\377i\267"
  "\377<c\210<c\210<c\210<c\210%\204\334%\204\334%\204\334%\204\334\036c\242"
  "\036c\242\036c\242\036c\242i\267\377i\267\377i\267\377i\267\377<c\210<c\210"
  "<c\210<c\210%\204\334%\204\334%\204\334%\204\334\036c\242\036c\242\036c\242"
  "\036c\242i\267\377i\267\377i\267\377i\267\377<c\210<c\210<c\210<c\210%\204"
  "\334%\204\334%\204\334%\204\334\036c\242\036c\242\036c\242\036c\242i\267\377"
  "i\267\377i\267\377i\267\377<c\210<c\210<c\210<c\210o\340Go\340Go\340Go\340"
  "GJ\274#J\274#J\274#J\274#\206\377\\\206\377\\\206\377\\\206\377\\O\212:O"
  "\212:O\212:O\212:o\340Go\340Go\340Go\340GJ\274#J\274#J\274#J\274#\206\377"
  "\\\206\377\\\206\377\\\206\377\\O\212:O\212:O\212:O\212:o\340Go\340Go\340"
  "Go\340GJ\274#J\274#J\274#J\274#\206\377\\\206\377\\\206\377\\\206\377\\O"
  "\212:O\212:O\212:O\212:o\340Go\340Go\340Go\340GJ\274#J\274#J\274#J\274#\206"
  "\377\\\206\377\\\206\377\\\206\377\\O\212:O\212:O\212:O\212:\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061",
};

Gimp also provides a export directly to ".h", I get something like that for my test image, indexed on a 16 colors palette : 

/*  GIMP header image file format (INDEXED): /home/pierre/Images/Glitch_META_img/colorlab.h  */

static unsigned int width = 16;
static unsigned int height = 16;

/*  Call this macro repeatedly.  After each use, the pixel data can be extracted  */

#define HEADER_PIXEL(data,pixel) {\
pixel[0] = header_data_cmap[(unsigned char)data[0]][0]; \
pixel[1] = header_data_cmap[(unsigned char)data[0]][1]; \
pixel[2] = header_data_cmap[(unsigned char)data[0]][2]; \
data ++; }

static char header_data_cmap[16][3] = {
    {188, 12, 49},
    { 78, 78, 78},
    {207, 50, 83},
    { 30, 99,162},
    { 60, 99,136},
    {255, 47, 91},
    {114,114,114},
    { 37,132,220},
    { 79,138, 58},
    {150,150,150},
    { 74,188, 35},
    {105,183,255},
    {255,169,187},
    {111,224, 71},
    {196,196,196},
    {134,255, 92},
    //{255,255,255}...
    };
static char header_data[] = {
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    9,9,9,9,6,6,6,6,14,14,14,14,1,1,1,1,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    7,7,7,7,3,3,3,3,11,11,11,11,4,4,4,4,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    13,13,13,13,10,10,10,10,15,15,15,15,8,8,8,8,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0,
    5,5,5,5,2,2,2,2,12,12,12,12,0,0,0,0
    };

Is this could be usable ? If it does, how ? I don't have a clue how to use that data.

Gimp also provides a ".c" export but it's even more obscure for me... :

/* GIMP RGB C-Source image dump (colorlab.c) */

static const struct {
  unsigned int      width;
  unsigned int      height;
  unsigned int      bytes_per_pixel; /* 2:RGB16, 3:RGB, 4:RGBA */ 
  unsigned char     pixel_data[16 * 16 * 3 + 1];
} gimp_image = {
  16, 16, 3,
  "\226\226\226\226\226\226\226\226\226\226\226\226rrrrrrrrrrrr\304\304\304"
  "\304\304\304\304\304\304\304\304\304NNNNNNNNNNNN\226\226\226\226\226\226"
  "\226\226\226\226\226\226rrrrrrrrrrrr\304\304\304\304\304\304\304\304\304"
  "\304\304\304NNNNNNNNNNNN\226\226\226\226\226\226\226\226\226\226\226\226"
  "rrrrrrrrrrrr\304\304\304\304\304\304\304\304\304\304\304\304NNNNNNNNNNNN"
  "\226\226\226\226\226\226\226\226\226\226\226\226rrrrrrrrrrrr\304\304\304"
  "\304\304\304\304\304\304\304\304\304NNNNNNNNNNNN%\204\334%\204\334%\204\334"
  "%\204\334\036c\242\036c\242\036c\242\036c\242i\267\377i\267\377i\267\377i\267"
  "\377<c\210<c\210<c\210<c\210%\204\334%\204\334%\204\334%\204\334\036c\242"
  "\036c\242\036c\242\036c\242i\267\377i\267\377i\267\377i\267\377<c\210<c\210"
  "<c\210<c\210%\204\334%\204\334%\204\334%\204\334\036c\242\036c\242\036c\242"
  "\036c\242i\267\377i\267\377i\267\377i\267\377<c\210<c\210<c\210<c\210%\204"
  "\334%\204\334%\204\334%\204\334\036c\242\036c\242\036c\242\036c\242i\267\377"
  "i\267\377i\267\377i\267\377<c\210<c\210<c\210<c\210o\340Go\340Go\340Go\340"
  "GJ\274#J\274#J\274#J\274#\206\377\\\206\377\\\206\377\\\206\377\\O\212:O"
  "\212:O\212:O\212:o\340Go\340Go\340Go\340GJ\274#J\274#J\274#J\274#\206\377"
  "\\\206\377\\\206\377\\\206\377\\O\212:O\212:O\212:O\212:o\340Go\340Go\340"
  "Go\340GJ\274#J\274#J\274#J\274#\206\377\\\206\377\\\206\377\\\206\377\\O"
  "\212:O\212:O\212:O\212:o\340Go\340Go\340Go\340GJ\274#J\274#J\274#J\274#\206"
  "\377\\\206\377\\\206\377\\\206\377\\O\212:O\212:O\212:O\212:\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061\377/[\377/["
  "\377/[\377/[\317\062S\317\062S\317\062S\317\062S\377\251\273\377\251\273\377"
  "\251\273\377\251\273\274\014\061\274\014\061\274\014\061\274\014\061",
};

#include <Gamebuino-Meta.h>

const uint8_t GRADIENT[] = {
    16,   // frame width
    2,    // frame height
    1,    // number of frames
    0,    // ?... don't understand this value
    0,    // animation speed (0 means no animation)
    0x10, // transparent color (any value greater than 0xf is transparent)
    1,    // indexed color mode
          // colormap (2 pixels per byte)
    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
    0xfe, 0xdc, 0xba, 0x98, 0x76, 0x54, 0x32, 0x10
};

// must have 16 colors
const Color REFERENCE_PALETTE[] = {
    (Color)0x47e9, (Color)0x37e6, (Color)0x1fe4, (Color)0x0fe1,
    (Color)0x07a0, (Color)0x0700, (Color)0x0661, (Color)0x05c1,
    (Color)0x0501, (Color)0x0461, (Color)0x03c1, (Color)0x0320,
    (Color)0x0280, (Color)0x01e0, (Color)0x0140, (Color)0x00a0
};

const Image IMAGE(GRADIENT);

Color palette[16];

void setup() {
    gb.begin();
}

void loop() {
    while (!gb.update());

    // rotating palette
    for (uint8_t i=0; i<16; i++) {
        palette[i] = REFERENCE_PALETTE[(gb.frameCount+i)%16];
    }

    // draw image with new palette
    gb.display.setPalette(palette);
    gb.display.drawImage(32, 32, IMAGE);
}

Hi Codnpix,

This should allow you to understand how to encode your indexed images.

With indexed images, you can also redefine your palette at any time. This allows you to make nice effects like this one (by simply shifting the palette) ;-)

#include <Gamebuino-Meta.h>

const uint8_t GRADIENT[] = {
    16,   // frame width
    2,    // frame height
    1,    // number of frames
    0,    // ?... don't understand this value
    0,    // animation speed (0 means no animation)
    0x10, // transparent color (any value greater than 0xf is transparent)
    1,    // indexed color mode
          // colormap (2 pixels per byte)
    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
    0xfe, 0xdc, 0xba, 0x98, 0x76, 0x54, 0x32, 0x10
};

// must have 16 colors
const Color REFERENCE_PALETTE[] = {
    (Color)0x47e9, (Color)0x37e6, (Color)0x1fe4, (Color)0x0fe1,
    (Color)0x07a0, (Color)0x0700, (Color)0x0661, (Color)0x05c1,
    (Color)0x0501, (Color)0x0461, (Color)0x03c1, (Color)0x0320,
    (Color)0x0280, (Color)0x01e0, (Color)0x0140, (Color)0x00a0
};

const Image IMAGE(GRADIENT);

Color palette[16];

void setup() {
    gb.begin();
}

void loop() {
    while (!gb.update());

    // rotating palette
    for (uint8_t i=0; i<16; i++) {
        palette[i] = REFERENCE_PALETTE[(gb.frameCount+i)%16];
    }

    // draw image with new palette
    gb.display.setPalette(palette);
    gb.display.drawImage(32, 32, IMAGE);
}

Unfortunately, the png-to-code converter is buggy... you have to rewrite a new one...

const uint8_t GRADIENT[] = {
16,   // frame width
2,    // frame height
1,    // number of frames
0,    // ?... don't understand this value
0,    // animation speed (0 means no animation)
0x10, // transparent color (any value greater than 0xf is transparent)
1,    // indexed color mode
          // colormap (2 pixels per byte)
    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
    0xfe, 0xdc, 0xba, 0x98, 0x76, 0x54, 0x32, 0x10
};

Hello Steph, thank you ! But  actually no I still don't understand ... :( ... (I'm starting to think I have a louder problem..., why the hell am I not getting this ..)

 // colormap (2 pixels per byte)
    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
    0xfe, 0xdc, 0xba, 0x98, 0x76, 0x54, 0x32, 0x10

How do I generate these values ? I mean how do I generate them knowing they will corresponding to something accurate ? How do I have to create my image in the first time so ?

2 pixels per byte means that I can't have a different color for each pixel ?? This is why I have only half the size of the original array ?

And I still don't understand how do I make a link between the int16_t color values of my custom palette... 

const Color REFERENCE_PALETTE[] = {
    (Color)0x47e9, (Color)0x37e6, (Color)0x1fe4, (Color)0x0fe1, (Color)0x07a0, (Color)0x0700, (Color)0x0661, (Color)0x05c1, (Color)0x0501, (Color)0x0461, (Color)0x03c1, (Color)0x0320, (Color)0x0280, (Color)0x01e0, (Color)0x0140, (Color)0x00a0
};

... and the map of the image I want to display : 

const uint8_t GRADIENT[] = {
16,   // frame width
2,    // frame height
1,    // number of frames
0,    // ?... don't understand this value
0,    // animation speed (0 means no animation)
0x10, // transparent color (any value greater than 0xf is transparent)
1,    // indexed color mode
          // colormap (2 pixels per byte)
    0x01, 0x23, 0x45, 0x67, 0x89, 0xab, 0xcd, 0xef,
    0xfe, 0xdc, 0xba, 0x98, 0x76, 0x54, 0x32, 0x10
};

For now I'm not even trying to do anything sofisticated like moving color effects, I just want to be able to display my images as indexed images to save flash memory, and if possible with my own set of color....

It's actually very simple... I looked for a moment before I understood... the doc is unintelligible on this particular subject...

When you create your image with a graphics tool (like Piskel for example), you will define your palette with colors in RGB888.
The first thing you will have to do is to convert these colors to RGB565, to get uint16_t color codes.
Each color is arranged according to an index in your palette (from 0x0 to 0xf since you have only 16 colors).

So to build your colormap, you will have to use the color indexes in the palette (not the actual uint16_t color codes!)
And since each index is coded on 4 bits (0x0 to 0xf), then you can group 2 pixels on a single byte.

For example, if you have 2 consecutive pixels that are coded respectively with the 0xa and 0x7 indexes, you will code this couple of pixels by 0xa7.

The 0xa index refers to the 11th color of your palette (coded on a uint16_t).
And the 0x7 index refers to the 8th color of your palette (coded on a uint16_t).

Do you understand the connection that now associates them?

Oookay, yes it's clearer now !

But on a practical point of view it still a little blur.. So it means that in the case of an indexed image, I can't use the array of values generated from the png-to-code image transcoder ?

If I understand well the process I have to follow I have to :

- create my Image with an image editor (in my case I like Gimp) in a traditionnal RGB888 mode using the 16 colors I want for that image

- export my image to a png or bmp format, , still on a RGB888 mode

- transcode that image into a RGB565 color int16_t array

- reference the 16bits hex codes for the 16 colors of the image into an array like Color myPalette[16] = {(color)x012345, //...}

- and then I have to replace each couple of pixel values on my image pixel-map by a single hex value concatening the 2 corresponding indexes on the palette array ?? This is the actual way to achieve that ? That seems to be a pretty heavy job to do on a large image like a background or anything like that ! Is there a way to automate that more efficiently ?