New creation : Handling images on the Gamebuino META - by 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

8 Likes

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.

1 Like

Merci beaucoup pour ton retour @Juice_Lizard :slightly_smiling_face:

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 :wink:

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.

1 Like

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 :wink:

@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 :

palette-1x3@32x

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.

1 Like

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


1 Like

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 !

On attendra, ça vaut le coup.

Je viens de faire un test au sujet de ces fameux bugs d’affichage de sprites Ă  largeurs impairs (en mode couleurs indexĂ©es).
sprites largeur impair
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 :sweat_smile:).

LOOOOOOL :rofl:

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 :joy:

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!).

3 Likes

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. :joy: 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! :slightly_smiling_face:

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

1 Like

@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 :wink:

Keep up the good work!

3 Likes

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 :slightly_smiling_face:

Et
 oui, j’ai prĂ©vu de donner une suite Ă  tout ça :wink:

2 Likes

Ç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.

2 Likes

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


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. :sweat_smile:

1 Like

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

Nope! It was pretty good :slightly_smiling_face:.

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

3 Likes