Images

Créations

Sorunome

il y a 3 ans

Ce tutoriel tente d'expliquer comment les Images fonctionnent pour la Gamebuino META

Idée Générale

L'objectif principal des Images est d'avoir une manière générale d'afficher sur l'écran, les lumières, ou d'autres Images.

Une Image peut avoir plusieurs sources différentes (comme un BMP de la carte SD, un tableau dans la flash, ou un tableau dans la RAM). Une Image a aussi deux modes de couleurs: RGB565 ou indexé.

Sur une Image, vous pouvez dessiner des lignes, des formes, du texte, et surtout: d'autres Images! gb.display est lui-même une Image, ce qui veut dire que vous pouvez faire tout ça sur gb.display.

Alors, faisons comme si nous avions déjà une Image...

#include <Gamebuino-Meta.h>

Image myImg; // Supposons que nous avons bien initialisé l'Image (ce qui n'est pas le cas ici)

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

void loop() {
  while(!gb.update());
  gb.display.clear();
  // On peut dessiner l'Image sur l'écran, en position x=10 et y=0
  gb.display.drawImage(10, 0, myImg);
}

Comme vous pouvez le constater, afficher une Image est assez simple.

Sources d'Image

Comme on a dit, les Images peuvent avoir plusieurs sources, ce qui veut dire qu'il y a plusieurs constructeurs pour l'objet Image.

Image dans la RAM

Image( uint16_t largeur , uint16_hauteur [, ColorMode col = (RGB565|Index) ] , [ uint16_t images = 1 [, uint8_t fl = 1 ]])

Une Image dans la RAM est simplement une Image avec une mémoire tampon vide en RAM. Seul deux paramètres sont nécessaires: la largeur et la hauteur. Les deux sont de type uint_16.

Les paramètres optionnels sont expliqués plus loin.

Par exemple, gb.display est une Image dans la RAM, et est initialisée par Image(80, 64) par défaut

Image dans la Flash

Disons que vous voulez enregistrer quelques ressources, comme des sprites, dans votre jeu. Généralement vous ne voulez pas les garder dans la RAM, donc on peut les placer dans la mémoire Flash!

Vous avez pas besoin d'écrire le code de vos Images à la main, utilisez le le convertisseur image-code !

Ce sont soit des tableaux de uint8_t ou des tableaux de uint16_t. On suggère la première option pour les Images indexées, et la seconde option pour les Images RGB565. Pour les Images indexées, chaque octet correspond à deux pixels. Pour les Images RGB565 il faut deux octets pour coder un pixel (donc un pixel par uint16_t).

Chaque type de tableau a son propre format d'entête:

Pour le tableau uint8_t:

<largeur>, <hauteur>,
<image-8-bit-inférieur>, <images-8-bit-supérieur>,
<boucle_image>,
<couleur_transparente>,
<mode_coleur>,

Pour le tableau uint16_t:

<largeur>, <hauteur>,
<images>,
<boucle_image>,
<couleur_transparente>,
<mode_coleur>,

Pour une Image RGB565, le mode couleur est 0, pour une Image indexée, c'est 1.

La couleur transparente est la couleur qui devrait être interprétée comme transparente. En mode RGB565, 0 signifie pas de couleur transparente. En mode indexé, toutes les valeurs au dessus de 0x0F sont interprétées comme pas de transparence. Ce qui signifie que, au lieu de mettre 0xAA en tant que couleur transparente, vous devrez mettre 0x0A, sinon ça ne marchera pas.

images et boucle_image sont expliqués plus loin.

Donc, pour créer un damier, il faut faire:

#include <Gamebuino-Meta.h>

const uint8_t myImgBuf[] = {
  8, 8, // largeur, hauteur
  1, 0, // images
  0, // boucle 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);

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

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

  // afficher l'Image
  gb.display.drawImage(10, 10, myImg);
}

Ou sinon, avec une Image RGB565, il faut faire:

#include <Gamebuino-Meta.h>

const uint16_t myImgBuf[] = {
  2, 2, // largeur, heuteur
  1, // images
  0, // boulce image
  0, // couleur transparente
  0, // mode couleur

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

Image myImg(myImgBuf);

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

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

  // afficher l'Image
  gb.display.drawImage(10, 10, myImg);
}

Image sur la Carte SD

Enfin, vous pouvez charger des ressources directement depuis la carte SD, avec des fichiers BMP! Il faut cependant toujours garder en tête que chaque Image de la carte SD doit avoir une mémoire tampon dans la RAM, donc n'utilisez pas trop d'images d'un coup ou vous allez être à cours d'Images.

Les fichiers supportés sont les Bitmap ayant une profondeur de couleur de 4-bit, 24-bit ou 32-bit.

Les Bitmap avec une profondeur de couleur de 4-bit sont convertis en images indexées, avec la palette Gamebuino. Si une couleur ne correspond pas exactement à une couleur de la palette, la couleur la plus proche sera choisie.

Les Bitmap avec une profondeur de couleur de 24-bit sont convertis en Images RGB565.

Les Bitmap avec une profondeur de couleur de 32-bit sont eux aussi convertis en Images RGB565. Le canal alpha est ignoré en partie: Si la transparence d'un pixel est plus de 50% il sera completement transparent sur l'Image finale. Sinon, il sera opaque.

Vous pouvez créer une Image Bitmap comme ça:

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

La console s'adaptera automatiquement au type de Bitmap que vous lui donnez.

Animations d'Images

Maintenant que nous avons parlé des différentes sources d'Images, on peut parler d'un autre aspect des Images: les animations!

L'idée est d'avoir une pile d'images. Et plus specifiquement, pour les Bitmap, d'avoir une pile verticale d'images.

Comme vu précédemment, vous pouvez déclarer le nombre d'images vous avez de deux manières.

boucle_image est la vitesse d'animation, utilisons 1 pour l'instant.

#include <Gamebuino-Meta.h>

const uint8_t myAnimBuf[] = {
  8, 8, // largeur, hauteur
  0x2A, 0x00, // supposons qu'il y ait 42 images dans notre animation
  1, // boucle_image
  0xFF, // pas de transparence
  1, // Image indexée

  /* Les 42 images de l'animation */
};

Image myAnim(myAnimBuf);

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

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

  // Affichage
  gb.display.drawImage(0, 0, myAnim);
}

Et voila! L'animation passe à l'image suivante automatiquement et quand elle atteint la fin, elle revient au début! C'est aussi simple que ça :D

Mais disons que l'animation est un peu trop rapide pour vous, et que vous voulez seulement que l'animation change d'image une image de jeu sur deux... alors on peut modifier la valeur de boucle_image. Ici, on veut une valeur de 2 pour faire progresser l'animation une image sur 2.

Exemple

Disons que vous avez cette Image (agrandit x4 pour avoir une meilleur visibilité pour le tutoriel):

kitty

Comme vous pouvez le voir, c'est une animation de quatre images. Le rose sera la couleur transparente. Avec cet outil on peut facilement convertir notre image en code (avec "Number of frames" = 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);

Petit détail, au jour d'écriture de ce tutoriel, l'outil ne gère pas les couleurs transparentes. Il faut le mettre à la main: ici, on souhaite avoir 0xf81f en couleur transparente. Il suffit de changer le premier 0 du tableau et c'est fini :)

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);

Et maintenant, on peut simplement afficher l'Image et elle sera animée! Voici le croquis:

#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);
}

Si l'animation est trop rapide, il suffit de modifier boucle_image.

Spritesheet & Tilemapper

On peut aussi utiliser une seule image en tant que Spritesheet, et donc créer un Tilemapper! L'idée est exactement la même qu'avec les animations: en disant que boucle_image vaut 0 l'animation ne progresse pas automatiquement. Donc pour créer un Spritesheet, on ferait quelque chose comme ça:

const uint8_t spritesheetBuf[] = {
  8, 8,
  0x2A, 0x00, // Supposons qu'on ait 42 sprites
  0, // boucle_image, on ne veut pas animer ces images
  0xFF,
  1,

  /* Les 42 images ici */
};

Image spritesheet(spritesheetBuf);

Maintenant, avec setFrame() on peut choisir l'image à afficher, donc si notre Tilemap est dans un tableau appelé tilemap, on peut faire quelque chose comme cela pour tout afficher:

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

Remarque: Même si ceci marche avec les Spritesheet Bitmap, setFrame() est lent avec les images Bitmap. Il est donc conseillé d'utiliser un tableau.

Rogner

Vous pouvez aussi rogner vos Images directement en les affichant. Pour cela, il suffit de passer les x, y, largeur et hauteur de l'Image rognée. Par exemple:

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

Images Indexées

Les couleurs par défaut sont définies dans le tableau suivant:

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

Vous pouvez changer la palette en créant votre propre tableau de type Color[]. Pour y parvenir, utilisez gb.display.setPalette:

// Cette palette est évidement assez lamentable, mais c'est simplement pour illustrer
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,
};

gb.display.setPalette(myPalette);

// Si la palette en en RAM, vous pouvez modifier une des entrées
myPalette[5] = (Color)0xFFFF;

// Afficher des choses

// Revenir à la palette par défaut (optionnel)
gb.display.setPalette(Gamebuino_Meta::defaultColorPalette);

Mais quand est-ce qu'on utilise la palette?? Quand on dessine une Image indexée sur une Image une image RGB565. Par exemple quand on dessine une Image indexée sur l'affichage (on vous rappelle que gb.display est une Image RGB565).

Ce qui veut dire que vous pouvez juste changer de palette entre l'affichage de deux sprites et vous aurez plus de 16 couleurs en indexé.

Ceci veux dire que si gb.display est une Image indexée, alors quand des Images sont affichées, l'index des couleurs est complètement ignoré, les indexes sont simplement associés les uns avec les autres. Vous pouvez quand même changer de palette avant d'afficher. Avec des couleurs cycliques, vous pouvez même obtenir des effets oldschool d'eau.

Des questions?

Laissez un commentaire; aidez nous à améliorer ce tutoriel!

Voir la création

STUDIOCRAFTapps

NEW il y a 3 ans

 --This comment got removed for some reasons--

jicehel

NEW il y a 3 ans

yes another great tutorial  ;)

JulienGio

NEW il y a 3 ans

This is super useful :D

DFX2KX

NEW il y a 3 ans

A bit more complicated then the Classic, but not too bad at all.

Sorunome

il y a 3 ans

Well, if you don't use any of the extra features i'd dare to say it isn't really more complex (except of index vs rgb565, which is a burden of color graphics).

Sorunome

NEW il y a 3 ans

DFX2KX DFX2KX

Well, if you don't use any of the extra features i'd dare to say it isn't really more complex (except of index vs rgb565, which is a burden of color graphics).

ddrmax

NEW il y a 3 ans

Hello, since I have my gamebuino, I am working in a little test program (like testing all the general features) as a first gamebuino app before attempting to port Tuxemon (or at least creating a Pokemon like game reusing their sprites), as for now, all seems to work well but loading images on using the image to code converter doesn't work the colors doesn't match.

the image is a simple png image and i have tested with it's 16 color bmp counterpart and some of the gray appears reddish. (now it works, I have to force-load the game by quitting before or it doesn't load from the SD card but from the internal memory)

Do we have to load bmp files in a certain way or it is just that mspaint is a piece of crap for doing simple color images for the Gamebuino?

and for the SD card image loading app, is the loading done with absolute path convention?

if my game is in the testgame directory (Sd rootdirectory/testgame) and my file is screen.bmp, to load the image to write "screen.bmp" or "testgame/screen.bmp"

I have checked the example and at lest Displaystatic is broken, it uses an older version of your framework (where you indicate color mode and number of frames) here is the quickfix for this example, replace similar lines by these:

replace const uint16_t imageTab[] = {80, 64, 0x72c7,
by const uint16_t imageTab[] = {80, 64,1,0,0xFF,0, 0x72c7,
replace Image myImage = Image(imageTab, ColorMode::rgb565);
by Image myImage = Image(imageTab);
replace const uint16_t imageTabIndex[] = {80,64,0x7777,
by const uint16_t imageTabIndex[] = {80,64,1,0,0xFF,1,0x7777,
replace Image myImageIndex = Image(imageTabIndex, ColorMode::index);
by Image myImageIndex = Image(imageTabIndexColorMode::index);
replace const uint16_t animationTab[] = {16,16,0x00,0xdddd,
by const uint16_t animationTab[] = {16,16,0x28,1,0,1,0xdddd,
replace Image animation = Image(animationTab, ColorMode::index,40 );
by Image animation = Image(animationTab );

Sorunome

il y a 3 ans

 the image is a simple png image and i have tested with it's 16 color bmp counterpart and some of the gray appears reddish.

This may be due to the BMP being RGB888 (24-bit color depth) but the gamebuino converts to RGB565 (16-bit color depth). It might also be just because of how the screen works, I am not entirely sure what you mean. Do you load the BMP directly or do you use the online conversion tool? I assumed now that you used RGB565 mode rather than indexed mode.

Do we have to load bmp files in a certain way or it is just that mspaint is a piece of crap for doing simple color images for the Gamebuino?

You should be able to just create BMPs in paint or whatever program you want to

and for the SD card image loading app, is the loading done with absolute path convention?

Every SD paths are relative to the sketch folder, so you would just load "screen.bmp" while it actually lies in "/testgame/screen.bmp". This is to prevent files of different games from colliding with each other.


EDIT: Also, please use a code block for code. That paragraph symbol in the editor bar, and then there is a button to make a code block

Aurélien Rodot

il y a 3 ans

@Ddrmax You might be interested in our test program then, I just open-sourced it ;)


Sorunome

NEW il y a 3 ans

ddrmax ddrmax

 the image is a simple png image and i have tested with it's 16 color bmp counterpart and some of the gray appears reddish.

This may be due to the BMP being RGB888 (24-bit color depth) but the gamebuino converts to RGB565 (16-bit color depth). It might also be just because of how the screen works, I am not entirely sure what you mean. Do you load the BMP directly or do you use the online conversion tool? I assumed now that you used RGB565 mode rather than indexed mode.

Do we have to load bmp files in a certain way or it is just that mspaint is a piece of crap for doing simple color images for the Gamebuino?

You should be able to just create BMPs in paint or whatever program you want to

and for the SD card image loading app, is the loading done with absolute path convention?

Every SD paths are relative to the sketch folder, so you would just load "screen.bmp" while it actually lies in "/testgame/screen.bmp". This is to prevent files of different games from colliding with each other.


EDIT: Also, please use a code block for code. That paragraph symbol in the editor bar, and then there is a button to make a code block

ddrmax

il y a 3 ans

corrected my post

The problem with loading was because of my first atempt with indexed and because when you reboot the gameduino (without quiting the game) it loads the game from memory other than loading it from the SDcard

tested the loading from  SDCard but i think i will go by using only image to code converted images, the ram usage changes significantly SD: 7603 Free ->same image via image to code 16473 Free

ddrmax

NEW il y a 3 ans

Sorunome Sorunome

corrected my post

The problem with loading was because of my first atempt with indexed and because when you reboot the gameduino (without quiting the game) it loads the game from memory other than loading it from the SDcard

tested the loading from  SDCard but i think i will go by using only image to code converted images, the ram usage changes significantly SD: 7603 Free ->same image via image to code 16473 Free

Sorunome

il y a 3 ans

Glad you figured it out!

tested the loading from  SDCard but i think i will go by using only image to code converted images, the ram usage changes significantly

That is because when loading from SD it needs to buffer the image in RAM, while, if it is in flash, well, it is already in addressable space

Sorunome

NEW il y a 3 ans

ddrmax ddrmax

Glad you figured it out!

tested the loading from  SDCard but i think i will go by using only image to code converted images, the ram usage changes significantly

That is because when loading from SD it needs to buffer the image in RAM, while, if it is in flash, well, it is already in addressable space

ddrmax

il y a 3 ans

since i' hadn't really codded for the arduino zero and TFT, is it possible to gain more space by addressing sprites and images by using PROGMEM? 

I have done a simple test by adding progmem and it seems to work but i don't know if using it could deteriorate more the flash than only loading the code of the game 

ddrmax

NEW il y a 3 ans

Sorunome Sorunome

since i' hadn't really codded for the arduino zero and TFT, is it possible to gain more space by addressing sprites and images by using PROGMEM? 

I have done a simple test by adding progmem and it seems to work but i don't know if using it could deteriorate more the flash than only loading the code of the game 

Sorunome

il y a 3 ans

since i' hadn't really codded for the arduino zero and TFT, is it possible to gain more space by addressing sprites and images by using PROGMEM?

the META uses a SAMD MCU, which uses an ARM processor, instead of an AVR one, which most of the other arduinos use.

What does this mean for you? PROGMEM is obsolete, the keyword does nothing. By defining something as const it will land already in flash and you can just access it normally, no need to pgm_read_byte or thelike.

EDIT: that question would have probably been better for a separate topic, since it has nothing to do with images, just so you know for the future ;)

Sorunome

NEW il y a 3 ans

ddrmax ddrmax

since i' hadn't really codded for the arduino zero and TFT, is it possible to gain more space by addressing sprites and images by using PROGMEM?

the META uses a SAMD MCU, which uses an ARM processor, instead of an AVR one, which most of the other arduinos use.

What does this mean for you? PROGMEM is obsolete, the keyword does nothing. By defining something as const it will land already in flash and you can just access it normally, no need to pgm_read_byte or thelike.

EDIT: that question would have probably been better for a separate topic, since it has nothing to do with images, just so you know for the future ;)

Juice_Lizard

il y a 2 ans

What does this mean for you? PROGMEM is obsolete, the keyword does nothing. By defining something as const it will land already in flash and you can just access it normally, no need to pgm_read_byte or thelike.

Is this why there is only one memory percentage showed when we compile a Gamebuino Meta game, instead of two different percentages in Arduboy? When I made an ebook on Arduboy, I had to use F() to memorise my text with enough space. So, are PROGMEM and F() useless with the Meta?

Aurélien Rodot

NEW il y a 3 ans

ddrmax ddrmax

@Ddrmax You might be interested in our test program then, I just open-sourced it ;)


Davros

NEW il y a 3 ans

I was trying to use a tilesheet but there doesn't actually seem to be a matching function prototype for specifying the part of the image to draw like it shows in the tutorial above:

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


Or another thing that would be nice is to be able to specify the WxH of the tiles in an image header instead of just the number of tiles that way multi-row images will work.

Sorunome

il y a 3 ans

I was trying to use a tilesheet but there doesn't actually seem to be a matching function prototype for specifying the part of the image

The version you DL via the arduino board manager probably doesn't have that yet, it is in the git repo, though

Or another thing that would be nice is to be able to specify the WxH of the tiles in an image header instead of just the number of tiles that way multi-row images will work.

The advantage of having a large, stacked, image is that, for each frame, you can just propagate the buffer by increasing without jumping more to render the entire frame. If you have multiple rows, you'd lose that advantage. You are free to use intermediate tools that then convert your spritesheets or thelike to such a stacked image.

Sorunome

NEW il y a 3 ans

Davros Davros

I was trying to use a tilesheet but there doesn't actually seem to be a matching function prototype for specifying the part of the image

The version you DL via the arduino board manager probably doesn't have that yet, it is in the git repo, though

Or another thing that would be nice is to be able to specify the WxH of the tiles in an image header instead of just the number of tiles that way multi-row images will work.

The advantage of having a large, stacked, image is that, for each frame, you can just propagate the buffer by increasing without jumping more to render the entire frame. If you have multiple rows, you'd lose that advantage. You are free to use intermediate tools that then convert your spritesheets or thelike to such a stacked image.

Davros

il y a 3 ans

What is the release schedule like? Just got my tracking # yesterday so I'll be ready for it soon :)

Davros

NEW il y a 3 ans

Sorunome Sorunome

What is the release schedule like? Just got my tracking # yesterday so I'll be ready for it soon :)

Aurélien Rodot

il y a 3 ans

It's out now ;)