Bonjour à tous.
Aujourd’hui nous allons voir en quelques minutes comment afficher une image statique sur notre Gamebuino Meta.
Ce tutoriel est réalisé avec l’IDE Arduino. Si ce n’est pas déjà fait veuillez vous référer au guide d’installation pour l’installer pour votre machine.
Etape 1 : Obtenir une image utilisable
Avant d’afficher quelque chose sur la console il faut déjà avoir une image adaptée. Pour cela vous pouvez créer votre propre image avec toute une gamme de logiciels tels que Paint.net, Photoshop, Illustrator, Gimp, etc.
Vous pouvez également trouver des images sur internet, personnellement j’utilise beaucoup la section Game assets de Itch.io qui regorge de créations originales dont une grande partie sont utilisables gratuitement sous licence créative ouverte.
Gardez à l’esprit que l’écran en mode standard peut afficher une image de 80x64 pixels, aussi il est préférable de se limiter à ces dimensions sans quoi l’image dépassera forcément des bords de l’écran.
Pour ce tuto je vais reprendre l’image du Gamebuinoël. L’image est tirée du pack Pixel holiday tree créé par VladPenn.
Le pack consiste en une image :
A l’aide de paint.net (ou autre logiciel de votre choix) vous pouvez créer le sapin de vos rêves en utilisant l’arbre de gauche et les éléments centraux. L’arbre de droite sert d’exemple.
Après un petit moment j’ai obtenu l’image suivante que j’ai enrégistrée en PNG :
Cette image fait 32x46 pixels elle est donc tout à fait adaptée à notre écran.
Etape 2 : Afficher l’image sur la console
Ici nous allons commencer par utiliser le fantastique convertisseur d’images créé par Steph.
Glissez simplement votre image dans le cadre en haut à gauche, vérifiez que les cadres “height” et “width” contiennent bien les mêmes valeurs puis cliquez sur le bouton “transcode”. Vous devriez obtenir ceci :
A présent ouvrez votre IDE Arduino configuré pour la Gamebuino Meta et créez un nouveau fichier que vous enregistrez sous le nom de votre choix, moi j’ai nommé le mien “Sapinbuino”.
Ensuite, cliquez sur la flèche en haut à droite de la fenêtre et choisissez l’option “nouvel onglet” dans le menu déroulant qui s’affiche. Nommez le fichier ainsi créé “Sapin.h”.
Dans ce nouveau fichier on va coller l’intégralité du code généré par le convertisseur d’image de Steph.
Cela crée un tableau nommé IMAGE_DATA qui contient votre image sous forme de valeurs hexadécimales indiquant chacune la couleur d’un pixel.
Je vous conseille très fortement de renommer ce tableau en remplaçant “IMAGE_DATA” par un nom de votre choix, moi j’ai choisi de le renommer “SAPIN_DATA”.
Ici ce n’est pas obligatoire car nous travaillons avec une seule image, mais dans le cas où nous voudrions en utiliser plusieurs cela poserait rapidement problème car tous les tableaux auraient le même nom et le programme ne pourrait pas les différencier, donc on les renomme pour que ce soit plus simple.
Ensuite il suffit d’une petite ligne à rajouter en bas de notre fichier :
Image Sapinbuino(SAPIN_DATA);
Cela nous permet de déclarer une variable de type Image nommée “Sapinbuino” à partir du tableau “SAPIN_DATA”.
Passons maintenant à l’affichage sur l’écran.
Pour cela il nous suffit de revenir sur notre onglet principal et de taper le code suivant :
#include <Gamebuino-Meta.h>
#include "Sapin.h"
void setup() {
// put your setup code here, to run once:
gb.begin();
}
void loop() {
// put your main code here, to run repeatedly:
while (!gb.update());
gb.display.clear();
}
On a ainsi une base de programme Gamebuino des plus classiques prête à faire tout ce qu’on lui demandera.
Le plus important ici est la petite ligne en plus au tout début : #include “Sapin.h”.
Elle permet de dire à notre programme d’importer le fichier Sapin.h que nous venons de créer, celui qui contient les données de notre image ainsi que la variable Image correspondante.
A partir de là tout se joue grâce à une seule ligne supplémentaire. On appelle simplement la fonction “drawImage” dans notre boucle principale comme ceci :
void loop() {
// put your main code here, to run repeatedly:
while (!gb.update());
gb.display.clear();
gb.display.drawImage(24, 17, Sapinbuino, 32, 46);
}
Petite explication rapide :
- Les deux première valeurs servent à décaler notre image de 24 pixels horizontalement et de 17 pixels verticalement.
- Sapinbuino est le nom de la variable Image à afficher
- 32 et 46 sont les dimensions de notre image en commençant par la valeur horizontale (32) suivie de la valeur verticale (46)
Une fois le programme compilé et envoyé vers la console on obtient le résultat suivant :
A vous de jouer maintenant, entrainez vous avec quelques images créées par vos soins ou trouvées sur le net. Essayez par exemple d’afficher deux images différentes en même temps.
A très bientôt pour de nouvelles aventure sur Gamebuino.