This tutorial will attempt to explain how Images are working for the Gamebuino META.

General Idea

The general Idea of images is to have one standard way of drawing graphics onto the screen, on the lights, or on other images.

An image can have multiple different resources (such as, SD card BMP file, flash array, or ram array). An Image can also have either the color mode RGB565 or be indexed.

On an Image itself you can draw lines, shape, text, and more importantly: other images! The gb.display itself is an image, meaning you can do all those actions with gb.display

Now, let's just pretend we'd already have an image...

#include <Gamebuino-Meta.h>

Image myImg; // let's just pretend this was a correctly initialized image (which it is not)

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

void loop() {
  while(!gb.update());
  gb.display.clear();
  // now we can draw the image to the display, at x=10 and y=0
  gb.display.drawImage(10, 0, myImg);
}

As you can see, drawing an image is pretty straight-forward.

Image Sources

As already mentioned, there are different kind of image sources, which result in different constructors for the Image object.

RAM Image

Image( uint16_t width , uint16_t height [, ColorMode col = (RGB565|Index) ] , [ uint16_t frames = 1 [, uint8_t fl = 1 ]])

A RAM image is simply an image with a blank buffer in RAM. They are only two parameters needed to initialize it: the width and the height. Both are of type uint16_t.

The optional other parameters are explained below.

For example, gb.display is such a RAM image, and is, by default, initialized with Image(80, 64)

Flash Image

Now, if you want to save some assets, like sprites, in your game, you typically don't want to have them in RAM, so, you can save Images in Flash, too!

You don't have to code the images yourself, use the Image to code converter !

They are either a uint8_t array, or a uint16_t array. The first one is recommended to use for an indexed image, the second one for an rgb565 image. In the indexed case there is two pixels per byte. In the rgb565 case one pixel per two bytes, so one pixel per array entry.

Both have a header, which are slightly different:

For uint8_t data

<width>, <height>,
<frames-lower-8-bit>, <frames-upper-8-bit>,
<frame_loop>,
<transparent_color>,
<color_mode>,

For uint16_t data:

<width>, <height>,
<frames>,
<frame_loop>,
<transparent_color>,
<color_mode>,

For an rgb565 image the color mode is 0, for an indexed image it is 1.

The transparent color is which color should be interpreted as transparent. In rgb565 mode 0 is interpreted as no transparency, in indexed mode anything greater than 0x0F is interpreted as no transparency. This means that, instead of like 0xAA as transparent color you should just use 0x0A, else it won't work.

Frames and Frame Loop are explained below.

So, for an indexed checkered-board you'd do

#include <Gamebuino-Meta.h>

const uint8_t myImgBuf[] = {
  8, 8, // width, heigth
  1, 0, // frames
  0, // frame loop
  0xFF, // transparent color
  1, // color mode

  0x07, 0x07, 0x07, 0x07,
  0x70, 0x70, 0x70, 0x70,
  0x07, 0x07, 0x07, 0x07,
  0x70, 0x70, 0x70, 0x70,
  0x07, 0x07, 0x07, 0x07,
  0x70, 0x70, 0x70, 0x70,
  0x07, 0x07, 0x07, 0x07,
  0x70, 0x70, 0x70, 0x70,
};

Image myImg(myImgBuf);

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

void loop() {
  while(!gb.update());
  gb.display.clear(RED);
  
  // draw the image
  gb.display.drawImage(10, 10, myImg);
}

Or for a small RGB565 image you'd do

#include <Gamebuino-Meta.h>

const uint16_t myImgBuf[] = {
  2, 2, // width, height
  1, // frames
  0, // frame loop
  0, // transparent color
  0, // color mode

  0x1234, 0x2345,
  0x3456, 0x4567,
};

Image myImg(myImgBuf);

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

void loop() {
  while(!gb.update());
  gb.display.clear();
  
  // draw the image
  gb.display.drawImage(10, 10, myImg);
}

SD Card Image

Lastly, you can also load assets right from the SD card, from BMP files! Please keep in mind that every SD-card image has to keep track of an internal RAM buffer, and thus your RAM can fill up quickly if using too many at once.

Supported are BMP files with 4-bit, 24-bit and 32-bit bitdepth.

4-bit-depth BMPs are converted to indexed images, according how the current palette of the gamebuino meta is. If exact matches aren't present, closest matches are being used.

24-bit-depth BMPs are converted to rgb565 images.

32-bit-depth BMPs are also converted to rgb565 images. The alpha channel is partly ignored: If a pixel is more than 50% transparent it will appear as a transparent pixel in the final image, else as a solid pixel.

You can create a BMP image like this:

Image myImg("PATH/TO/IMAGE.BMP");

It will automatically detect what kind of BMP is present and adapt accordingly

Image Animations

Now that we discussed different image sources, let's talk about some other features these images have: Animations!

The idea is basically that you have, in your flash/RAM buffer, just multiple frames stacked. Or, with BMP image, have frames stacked vertically.

As explained above, you have different ways to specify the number of frames you have.

Frame Loop hereby is the animation speed, we'll just use 1 for now.

#include <Gamebuino-Meta.h>

const uint8_t myAnimBuf[] = {
  8, 8, // width, height
  0x2A, 0x00, // let's just say the animation has 42 frames
  1, // frame loop
  0xFF, // no transparency
  1, // indexed image

  /* all the frames go here */
};

Image myAnim(myAnimBuf);

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

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

  // let's just draw the image
  gb.display.drawImage(0, 0, myAnim);
}

Aaaaand, there you go, it automatically progresses to the next frame and loops the animation! As simple as that!

Now, let's say the animation is a tad to fast to you, and you only want to progress one animation frame every two gamebuino frames...that is what the fl (Frame Loop) parameter is there for! In the buffer you just set a different Frame Loop parameter, e.g. a value of 2 would only progress the animation every two frames.

Example

Let's say you have this image (scaled up x4 for this tutorial for easier visibility):

kitty

As you can see, that will be a four-frame animation, we will be picking that pink background as transparent background. Using this tool we can convert our image to code (setting Number of frames to 4):

const uint16_t PlayerIdlingData[] = {16,16,4, 1, 0, 0, 0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0xd229,0xdeab,0xd229,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f};
Image PlayerIdling(PlayerIdlingData);

Now, at the point of writing this tutorial, that tool doesn't support a transparent color yet. The background color is 0xf81f so, we need to change the first 0 in there so that it becomes

const uint16_t PlayerIdlingData[] = {16,16,4, 1, 0xf81f, 0, 0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0xd229,0xdeab,0xd229,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f};
Image PlayerIdling(PlayerIdlingData);

And now we can just draw the image and it'll be animated! Here is the full example sketch:

#include <Gamebuino-Meta.h>

const uint16_t PlayerIdlingData[] = {16,16,4, 1, 0xf81f, 0, 0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0xd229,0xdeab,0xd229,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x6d45,0x1063,0x1063,0x6d45,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xd229,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xd229,0xd229,0xdeab,0xd229,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0x1063,0x1063,0x1063,0x1063,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0x1063,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x4a49,0x4a49,0x1063,0x1063,0x1063,0x4a49,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0x1063,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f,0xf81f};
Image PlayerIdling(PlayerIdlingData);

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

void loop() {
  while(!gb.update());
  gb.display.clear(LIGHTBLUE);
  gb.display.drawImage(5, 5, PlayerIdling);
}

If that animation is too fast you can simply change the frame loop in the converter to something greater than 1, or manually adjust the fourth parameter in the header of the image data.

Spritesheet & Tilemapper

Now, we can also use one image as an entire spritesheet, and thus make a tilemapper! The idea exactly the same as with animations: when setting fl (Frame Loop) parameter to zero the animation doesn't automatically progress anymore. So, creating a spritesheet would look like this:

const uint8_t spritesheetBuf[] = {
  8, 8,
  0x2A, 0x00, // if we have 42 sprites
  0, // no frame looping
  0xFF,
  1,
  
  /* all the sprites */
};

Image spritesheet(spritesheetBuf);

And, with setFrame() we can set the current frame, so if we have our tilemap in an array called tilemap we could do something like this to render it all:

for (uint8_t y = 0; y < height; y++) {
  for (uint8_t x = 0; x < width; x++) {
    spritesheet.setFrame(tilemap[y*width + x]);
    gb.display.drawImage(x*8, y*8, spritesheet);
  }
}

Please note, while that does work with BMP spritesheets, that setFrame is slow with BMP images, and thus it is recommended to use a flash array.

Image Cropping

You can also directly crop an image while drawing it, for that you just need to specify the x, y, width and height of the cropped image. Example, assuming that myImage is an image:

gb.display.drawImage(0, 0, myImage, 4, 4, 8, 8);

Indexed Images

The default color Index is defined by the following table:

IndexHexname
00x00black
10x01dark blue
20x02purple
30x03green
40x04brown
50x05dark gray
60x06gray
70x07white
80x08red
90x09orange
100x0Ayellow
110x0Blight green
120x0Clight blue
130x0Dblue
140x0Epink
150x0Ebeige

You can change the palette by making your own array of the Color[] type. To do that, you use gb.display.setPalette:

// this is obviously a pretty trashy palette, but enough to show how things are working
Color myPalette[16] = {
  (Color)0x0000,
  (Color)0x0001,
  (Color)0x0002,
  (Color)0x0003,
  (Color)0x0004,
  (Color)0x0005,
  (Color)0x0006,
  (Color)0x0007,
  (Color)0x0008,
  (Color)0x0009,
  (Color)0x000A,
  (Color)0x000B,
  (Color)0x000C,
  (Color)0x000D,
  (Color)0x000E,
  (Color)0x000F,
};

// set the palette
gb.display.setPalette(myPalette);

// if the palette is in RAM you can, after setting, just modify one of the entries
myPalette[5] = (Color)0xFFFF;

// draw stuff

// reset back to default palette (only if you want to)
gb.display.setPalette(Gamebuino_Meta::defaultColorPalette);

Now, the question is, when is the color palette been used? The answer is: when drawing an indexed image to an rgb565 image, or when sending an indexed image to the screen.

This means, if your gb.display buffer is rgb565 (which is default), you could just switch the palette between drawing sprites and you will have a more-than-16-color image to draw on the screen.

This does, however, mean that if gb.display is an indexed image, while drawing sprites the color index is completely ignored, the indexes are just directly mapped onto each other. You can still swap the palette before sending to the screen, though. With cycling colors you can achieve some old-school tricks like the flowing water effects.

Questions? Unclarity?

Leave a comment below and help improve this tutorial!

Last comments

deeph

NEW 2 months ago

It's even easier with the Meta, take a look at this : https://github.com/deeph-z80/META-Picomon/blob/master/sources/picomon/strings.h

All you have to do is call gb.display.print(); most of the time.

And you can even easily make a typing routine like this : https://github.com/deeph-z80/META-Picomon/blob/master/sources/picomon/picomon.ino#L445 ☺

Juice_Lizard

NEW 2 months ago

Sorunome Sorunome

Ok, but if I want to display a lot of text, I used F() on Arduboy with a print function. How can I do with the Meta? My text is not in a variable.

Sorunome

NEW 2 months ago

Is this why there is only one memory percentage showed when we compile a Gamebuino Meta game, instead of two different percentages in Arduboy?

I'm not sure, as the META still has both flash and ram. They are just in the same addressable space.

So, are PROGMEM and F() useless with the Meta?

Yeah. If a variable is in global namespace you just define it as const and if it is in local namespace (e.g. inside functions) as static const and then it'll land in flash

Juice_Lizard

2 months ago

Ok, but if I want to display a lot of text, I used F() on Arduboy with a print function. How can I do with the Meta? My text is not in a variable.