New creation : Handling images on the Gamebuino META - by Steph

[Steph]

Handling images on the gamebuino meta

If you have already attended the first Academy workshops to get started with your Gamebuino META, you should already be able to program simple games like Pong, Tap-Tap or Egg-Catcher. Congratulations, this is an important first step for the future.

Do you want to learn how to program games that are more graphically polished? Do you want to discover how to animate sprites on screen and make them evolve in a real video game setting? This tutorial is for you!

In order to be able to display the graphic elements that you have carefully drawn with a sprite editor, you must first understand the basics of how to display and animate images on the META.

The purpose of this tutorial is to help you better understand how to integrate images into your games, and bring them to life through programming. I won’t talk about the artistic aspect, or even how to use the graphics tools to create the images, but rather about the technical constraints that you will have to deal with in order to display them on your Gamebuino screen.

By the end of this tutorial you should be able to control an animated sprite to move it around a game scene that is built entirely from a set of unit graphics blocks called a tileset. You will also know how to stream images from the micro SD card to animate splash screens or transition sequences between two levels in your games.

The tutorial is available in English and French. English is not my natural language, so I apologize in advance for any awkward wording I may have left out during the writing process. I have tried my best to keep the text from being too painful to read. I hope not to lose too many people on the way… And I’d like to take this opportunity to thank Tom for taking the time to proofread this version and for pointing out a few heavy wordings.

To view the tutorial, please click on the following link:

Handling images on the Gamebuino META

Have fun!

See more

[Juice_Lizard]

Super tuto très complet sur l’affichage des images. On voudrait presque le même sur le son… haha! On voit comment changer la taille des sprites et leur orientation grâce à des paramètre un peu cachés de la fonction drawImage(). Donc on économise de la mémoire en supprimant pas mal de sprites inutiles. On comprend pourquoi il y a des bugs d’affichage quand on veut afficher un sprite avec un nombre de pixels impair en largeur. Et on comprend en détails les secrets de l’écran et du code. Je conseille vraiment aux nouveaux codeurs de suivre ce tutoriel avant de créer leur prochain jeu. Ça les aidera à tirer le maximum de la Meta.

[Steph]

Merci beaucoup pour ton retour @Juice_Lizard

Je suis content de savoir que le tutoriel t’a plu, et que tu as pu en tirer profit en approfondissant certaines notions. Je suis de ton avis… en toute modestie… je crois sincèrement que de nombreux concepts fondamentaux sont abordés en profondeur et qu’ils ne doivent pas échapper aux débutants s’ils veulent pouvoir s’attaquer à des projets un peu plus ambitieux qu’un simple Pong.

Pour ce qui est du son, je n’ai pas encore creusé cet aspect. Mais qui sait ? Je prendrai peut-être le temps de le faire un jour…

À ce propos, je tiens à rappeler et souligner l’excellent travail d’@eriban sur le sujet. Je suis sûr qu’il saura vous inspirer pour creuser la question

[Tombuino]

Pour avoir eu le privilège de relire ce tuto avant sa publication je peux dire sans me tromper que c’est une perle comme on en voit peu. C’est extrêmement complet et très bien expliqué. Et le nouvel outil de conversion de sprite programmé par Steph rend la chose encore plus agréable. A tel point qu’on peut déjà s’amuser avant même d’avoir programmé un jeu rien qu’en faisant faire plein de bêtises à nos sprites.

[Steph]

Merci pour cet éloge @Tombuino !
Et merci d’avoir eu la patience de relire l’intégralité de la version anglophone !

Je suis content d’être arrivé au bout de ce travail. La rédaction et les illustrations ont nécessité pas mal d’heures de boulot, sans parler de la réécriture en anglais… double peine !

Mais je découvre avec plaisir, au fil de vos retours, que ce travail a été utile et qu’il apportera pas mal de réponses à ceux qui prendront la peine de le lire.

Il est important pour moi de recueillir vos impressions. C’est le carburant de ma motivation pour continuer d’écrire d’autres tutoriels. Les lecteurs ne s’en rendent pas forcément compte… mais, c’est un peu comme un accouchement, et on a besoin de constater qu’on n’a pas fait tout ça pour rien !

Donc un grand merci à tous ceux qui prendront le temps de me laisser leur avis

[Steph]

@Juice_Lizard Tu fais bien de faire remarquer un point précis pour lequel il peut y avoir une petite interrogation concernant les images à couleurs indexées.

En effet, avec les modes d’affichage à couleurs indexées, les pixels sont regroupés par paires de 4 bits pour former un octet. Ceci dans la mesure où seuls 4 bits suffisent pour coder l’index de la couleur de chaque pixel, qui prend ses valeurs dans l’intervalle [0x0, 0xf] (i.e. [0, 15]).

Autrement dit, on peut se poser la question de ce qu’il advient pour des images dont la largeur en pixels est impaire…

Prenons par exemple l’image suivante, de dimensions 1x3, et composée de pixels dont les couleurs sont définies dans la palette de couleurs officielle Gamebuino :

Le transcodeur fournit le code suivant pour cette image (faire défiler le code pour le voir au complet) :

const Color PALETTE[] = {

    (Color) 0x0000, // 0x0
    (Color) 0x0210, // 0x1
    (Color) 0x9008, // 0x2
    (Color) 0x044a, // 0x3
    (Color) 0xcc68, // 0x4
    (Color) 0x5268, // 0x5
    (Color) 0xacd0, // 0x6
    (Color) 0xffff, // 0x7
    (Color) 0xd8e4, // 0x8
    (Color) 0xfd42, // 0x9
    (Color) 0xf720, // 0xa
    (Color) 0x8668, // 0xb
    (Color) 0x7ddf, // 0xc
    (Color) 0x4439, // 0xd
    (Color) 0xca30, // 0xe
    (Color) 0xfeb2  // 0xf

};

const uint8_t IMAGE_DATA[] = {

    // metadata

    1,    // frame width
    3,    // frame height
    0x01, // frames (lower byte)
    0x00, // frames (upper byte)
    0,    // frame loop
    0xff, // transparent color
    1,    // indexed color mode

    // colormap

    0x90,
    0xa0,
    0xb0

};

La taille effective de l’image (1x3) est donc bien prise en compte, mais vous pouvez remarquer que l’unique pixel de chaque ligne est automatiquement associé à un pixel “virtuel” de couleur d’indice 0x0 pour compléter l’octet nécessaire à la représentation de la colormap par des uint8_t.

0x90,
0xa0,
0xb0

Ce pixel virtuel est là uniquement pour les besoins de l’encodage. Mais il n’apparaîtra jamais à l’affichage !

Par conséquent, pour des images à largeur impaire, le dernier octet de chaque ligne se terminera toujours par ‘0’.

Avec ça en tête, vous ne devriez pas rencontrer de bugs à l’affichage !

J’espère que c’est assez clair.

[Jicehel]

Wouah, super boulot. J’ai pris un peu de temps pour le lire car il y a beaucoup de contenu mais j’aurais gagné beaucoup de temps avec ce tuto pour commencer à programmer sur la META.
C’est vraiment très clair, après je connais un peu alors peut être que des difficultés m’ont échappées alors on attend le retour des nouveaux utilisateurs mais en suivant bien tout ce qui est dit, ça me parait clair et ça permet vraiment d’afficher une image, de l’animer et ça met les base d’un plateformer avec le contrôle du déplacement du joueur. Le tuto a déjà plein de choses dedans, mais j’imagine que l’un des prochains abordera le sujet de la caméra et des éléments du niveau pour compléter le tilemapping.
Franchement, pour commencer, faites les tutos du pong etc pour avoir les bases car ce tuto les explique mais il vient après pour compléter et expliquer comment utiliser les images et vous pouvez même l’appliquer directement après le pong pour utiliser un sprite pour la raquette et la balle, mettre un fond etc…

[Steph]

Merci beaucoup @Jicehel pour ton retour !

Un exercice simple à réaliser pour mettre en pratique ce tuto peut effectivement consister à refaire un Pong qui déchire graphiquement !!!

J’ai bien dans l’idée de poursuivre ma lancée avec le Platformer pour aborder pleins d’autres notions fondamentales en m’appuyant sur ce type de jeu, très complet, qui nécessite de nombreux savoirs.

Le suivi caméra est un aspect, en effet, mais il y’en a plein d’autres… notamment la gestion des collisions qui peut s’avérer coton dans certains cas de figures.

Concevoir et réaliser ces supports d’apprentissage est un gros travail de longue haleine. Et, comme toi, je ne suis qu’un simple hobbyiste… même si tout ça me passionne et accapare tout mon temps libre… Mais pour reprendre l’expression d’un ancien que tu reconnaîtras sûrement… “Ça ne paye même pas les pâtes”…

Donc… disons que “Tout vient à point à qui sait attendre…”.

Encore merci pour ton retour !

[Jicehel]

On attendra, ça vaut le coup.

[Juice_Lizard]

Je viens de faire un test au sujet de ces fameux bugs d’affichage de sprites à largeurs impairs (en mode couleurs indexées).

Sur cette capture d’écran de ma Gamebuino Meta, on voit le même sprite d’oiseau fait sur Piskel, en 11x8 pixels, traduit en code par l’outil de conversion de https://dev.gougouzian.fr/gamebuino/ à gauche, et traduit en code par Image Transcoder v2.0 à droite.
On voit bien que ça bugue à gauche (même si le résultat est très artistique ).

[Steph]

LOOOOOOL

J’avais pas du tout compris le sens de ta phrase initiale :

“On comprend pourquoi il y a des bugs d’affichage quand on veut afficher un sprite avec un nombre de pixels impair en largeur.”

Je n’avais pas compris que tu faisais allusion à un autre outil…

Donc, effectivement… pour que tout soit d’équerre, le codage du dernier octet est important !.. Sinon ça décale tout vers la gauche et on voit apparaître des pixels bizarres à la fin

[tarcisiotm]

Hi, @Steph. Merci beaucoup for putting this together! It really helped me understand the concepts, the technical aspects, a bit of how projects can be organized, etc.

I have just started developing for the Gamebuino Meta (mine hasn’t even arrived yet), so I really appreciate your effort. This alone saved me some good hours figuring things out by myself. I also want to thank you for providing an English version along with it (@Tombuino thanks for reviewing it!).

[Steph]

Hi @tarcisiotm,

Thanks a lot for your feedback. I’m really glad that I could help you to better understand these notions, which are fundamental to start developing cool games on the META. When you start coding with the Gamebuino, the amount of new concepts you have to learn can be scary, especially when you have no experience with C or C++. And it must be admitted that the official documentation is not always very clear, nor very illustrative…

I hope that reading the English text was not too painful for you… I spent a lot of time on it. In any case, with your feedback and that of the other readers who were kind enough to give me their impressions, I am pleased to see that all this work was not for nothing, and that is my reward!

I hope we’ll have the pleasure to see and test your creations soon.
Thanks again to you!

[Cric]

@Steph ,
Je viens de survoler rapidement ton tutorial et je me joints au concert de louage car ça a du te demander un boulot de dingue !
Hâte d’être en vacances pour prendre le temps de le lire dans le détail et faire mon premier jeu de plate-forme.

Je serai bien sûr très intéressé par la suite (Platformer), je pense ne pas être le seul

Keep up the good work!

[Steph]

Merci @Cric pour ton enthousiasme !

Hâte que tu puisses te plonger à fond dans le tutoriel et que tu reviennes ensuite me donner ton avis. J’espère que le tuto sera à la hauteur de tes espérances

Et… oui, j’ai prévu de donner une suite à tout ça

[Juice_Lizard]

Ça y est, j’ai fini de lire le tuto en entier. C’est très bien fait, et dépasse le cadre de l’affichage d’une image. Je n’ai pas tout retenu d’un coup, parce que c’est dense et nécessiterait de s’entrainer et de relire les parties du tuto sur un temps plus long. Il y a des astuces qui améliorent la manière de coder. J’essayerai d’en appliquer quelque unes pour mes prochains programmes. J’ai vu comment optimiser mes codes. J’ai découvert aussi comment contrôler finement l’animation d’un sprite en choisissant la bonne frame dans une grande image composée et grâce à certains arguments de la fonction drawImage(). Le code de mon “Square Nose Color” aurait été assez différent si j’avais appliqué tout ce qu’il y a dans ce tuto. J’espère que ça m’aidera à améliorer mon jeu actuel (“Demon Girls”) et que ça me donnera des idées pour mes futurs projets.

[Steph]

Merci pour ce retour complémentaire @Juice_Lizard.

Effectivement, y’a matière à s’occuper avec ce tuto. Et tu n’es pas forcé de tout retenir du premier coup. Le tuto est disponible en ligne, et tu peux t’y reporter à tout moment pour revoir un concept qui t’aurait échappé lors d’une première lecture, ou relire un bout de code pour ré-examiner telle ou telle astuce de programmation.

Je suis bien content que tu aies pu y découvrir des choses qui t’inspireront pour tes nouvelles créations. J’encourage vraiment tous les post-débutants à s’immerger dans le tuto. Comme tu l’as toi-même souligné, bien des choses auraient été plus simples et plus efficaces pour toi si t’avais pu disposer d’un tuto similaire dès le départ. Mais je crois que tu n’es pas le seul…

[marionpapillon]

Ton travail a l’air vraiment formidable ! Cela dit, n’ayant toujours pas terminé le premier tuto Python, je pense qu’il est un peu prématuré pour moi de m’aventurer sur ton tuto.

[JMP]

transport sometimes takes a long time, especially at this time when plane flights are rare.

[tarcisiotm]

@Steph

I hope that reading the English text was not too painful for you…

Nope! It was pretty good .

@JMP

transport sometimes takes a long time, especially at this time when plane flights are rare.

Indeed! It already made it to my country, though, so hopefully soon . In the meantime, I have been working on something for it using the emulator.