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

Adamko

NEW 1 month ago

clement clement

ca fonctionne super bien. merci. je suis allé jeter un coup d'oueil a save the princess

clement

NEW 2 months ago

Adamko Adamko

C est parcequ il manque un ; juste avant Image ;)  

const uint8_t myImgBuf [] = { 
   8, 8, // largeur, hauteur 
  1, 0, // frames 
  0, // boucle d'image 
  0xFF, // couleur transparente 
  1, // Mode couleur 

  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, 
} ; //<<<<<<<<<<<<<<<<<<<<<--------------- celui la de point virgule 


Il faut bien lire les messages d erreurs souvent ils aident bien :)

++

Adamko

1 month ago

ca fonctionne super bien. merci. je suis allé jeter un coup d'oueil a save the princess

Adamko

NEW 2 months ago

Sorunome Sorunome

c moi dit:

# include <Gamebuino-Meta.h> 

const uint8_t myImgBuf [] = { 
   8, 8, // largeur, hauteur 
  1, 0, // frames 
  0, // boucle d'image 
  0xFF, // couleur transparente 
  1, // Mode couleur 

  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); sur cette ligne ca me dit "expected ',' or ';' before 'Image'"

void setup () { 
  gb.begin (); 


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



clement

2 months ago

C est parcequ il manque un ; juste avant Image ;)  

const uint8_t myImgBuf [] = { 
   8, 8, // largeur, hauteur 
  1, 0, // frames 
  0, // boucle d'image 
  0xFF, // couleur transparente 
  1, // Mode couleur 

  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, 
} ; //<<<<<<<<<<<<<<<<<<<<<--------------- celui la de point virgule 


Il faut bien lire les messages d erreurs souvent ils aident bien :)

++

You must be logged in in order to post a message on the forum

Log in

Quality seal