hello, world

Créations

Aurélien Rodot

il y a 4 ans

Aujourd'hui, on va regarder comment ce programme fonctionne et le personnaliser !

#include <Gamebuino-Meta.h>

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

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

  // C'est ici que le plus gros du programme se déroule
  gb.display.print("hello, world");
}

Comme vous avez pu vous en rendre compte, ce programme permet simplement d'afficher le texte  hello, world sur votre Gamebuino (cf. image ci-dessous). Si tout s'est bien passé à lors de l'installation, vous obtenez quelque chose comme ceci :


Eh oui ! Afficher du texte sur l'écran est la première étape vers votre tout premier jeu ! ;)


Passons aux choses sérieuses! On va décortiquer ça pour comprendre ce qui se passe.

La structure d'un jeu

Voici le squelette d'un programme pour la Gamebuino:

#include <Gamebuino-Meta.h>

void setup() {

}

void loop() {

}   

La structure générale du jeu est composée en 3 parties.

Sur la première ligne, on y trouve #include <Gamebuino-Meta.h>. Cette ligne nous permet d'inclure la bibliothèque de Gamebuino (l'affichage, les boutons, etc.). Sans elle, le jeu ne pourra pas être exécuté.

La commande #include permet de réutiliser le code d'autres programmes externes, et on la trouve au début des programmes. Ici, seulement la bibliothèque Gamebuino va nous être nécessaire par la suite.

Les deux autres éléments essentiels à un jeu Gamebuino sont les 2 fonctions setup et loop. Toutes les instructions situées entre les accolades { } seront exécutées quand la fonction est appelée. La fonction setup se situe donc entre les lignes 3 et 5.

setup est appelée automatiquement une fois au démarrage du jeu, puis loop s'exécute en boucle, indéfiniment... d'où le nom ;)

L'affichage

setup()

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

Vous voyez que notre fonction setup ne contient qu'une instruction, gb.begin(). Elle sert à initialiser la Gamebuino, c'est pour ça qu'il est nécessaire de l'exécuter une fois et une seule, au démarrage. Vous remarquerez que chaque instruction du programme est suivie d'un point-virgule ; sans quoi vous aurez une erreur en essayant de lancer le programme.

loop()

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





// C'est ici que le plus gros du programme se déroule gb.display.print("hello, world"); }




Les instructions situées dans loop sont exécutées en boucle.

while(!gb.update());

Cette instruction est également nécessaire dans tout programme Gamebuino. Elle va s'occuper de tout ce qui se passe en arrière-plan comme mettre à jour l'écran, regarder si les boutons ont été appuyés ou encore jouer les sons. De plus, elle s'occupe de limiter la vitesse à laquelle loop va s'exécuter, afin d'avoir une vitesse de jeu constante. Par défaut, les jeux tournent à 25 images par seconde, ce qui signifie que la fonction loop est exécutée toutes les 0,04 seconde. C'est rapide, et c'est un bon compromis pour avoir des animations fluides sans demander trop de puissance de calcul.

Pour l'instant, je vous demande de ne pas vous casser la tête avec ce que chaque mot de cette instruction signifie (nous allons y revenir dans un future atelier). Pour l'instant il faut pouvoir la reconnaître pour que vous sachiez ce qu'elle fait. Encore une fois, c'est une instruction nécessaire pour faire un jeu Gamebuino :)

gb.display.clear();

Comme nous exécutons loop 25 fois par seconde, il faut effacer le contenu de l'écran avant de commencer de tracer l'image suivante... sinon, ça serait un joli bazar ! C'est justement ce que fait gb.display.clear

gb.display.print("hello, world");

Nous avons fait le tour du squelette nécessaire pour faire un programme Gamebuino. On va donc pouvoir passer aux choses sérieuses! Ici, gb indique qu'il s'agit d'une fonction qui concerne la Gamebuino, et gb.display indique qu'on s'adresse plus particulièrement à l'écran. gb.display.print est une fonction qui sert à écrire une chaîne de caractères sur l'écran de la gamebuino. Les chaînes de caractères sont délimitées par des guillemets " ".

Les commentaires

Vous avez peut-être remarqué qu'on a sauté une ligne dans la fonction loop. C'est parce que c'est un commentaire.

// C'est ici que le plus gros du programme se déroule

Parfois on a besoin d'expliquer ce que fait une certaine partie du programme. Pour cela, on utilise des commentaires. Les commentaires sont des lignes qui commencent par //. Ils sont ignorés par l'ordinateur lors de l'exécution du programme, ils permettent donc d'ajouter des notes personnelles en langage parlé.

Les commentaires sont pratiques pour comprendre rapidement comment fonctionne un programme. Pensez à quand vous vous relirez dans un mois ;)

Remarques sur le C/C++ : les erreurs

Le langage C/C++ que vous êtes en train d'utiliser est sensible à la casse (rien à voir avec le fait de faire tomber votre programme par terre). Les majuscules et minuscules ont une importance : print n'est pas la même chose que Print. Si vous faites la faute, vous aurez une erreur au moment de compiler le programme!

Et n'oubliez pas les points-virgules à la fin de chaque instruction!

À vous de jouer!

Maintenant, vous pouvez écrire ce que vous voulez sur la Gamebuino. Et si vous nous composiez un petit poème ?

Partagez le résultat avec #gamebuino #helloworld pour célébrer votre tout premier programme ! :)

  • Astuce #1 Vous pouvez utiliser \n pour insérer des retour à la ligne dans votre texte.
  • Astuce #2  Vous pouvez changer la couleur du texte avec gb.display.setColor. Allez voir Graphics::setColor dans la Référence pour connaître la bonne syntaxe!
  • Astuce #3  Pour changer l'échelle du texte, il y a la fonction Graphics::setFontSize.

Essayez maintenant de créer votre propre programme en suivant les astuces. Aidez-vous de la capture d'écran et du code ci-dessous. En cas de doute, n'hésitez pas à relire le tutoriel pour mieux comprendre.

Exemple de solution

#include <Gamebuino-Meta.h>



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

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

//Affichage du message à l'écran gb.display.print("'hello, world'\nest une tradition\ninstauree en\n\n"); //Texte à l'échelle 2 gb.display.setFontSize(2); gb.display.print("1978"); //Retour à l'échelle 1 et changement de couleur gb.display.setFontSize(1); gb.display.setColor(BROWN); gb.display.print("\n\n\n - GAMEBUINO"); }



  Atelier suivant

Par Aurélien Rodot, modifié par Julien Giovinazzo

Voir la création

jicehel

NEW il y a 4 ans

Bien ce tuto pour démarrer. Bon moi, ça va je connaissais déjà mais pour quelqu'un qui nous rejoins, ça donne bien les bases pour créer un programme


Aurélien Rodot

il y a 4 ans

C'est seulement un brouillon, il reste encore bien du boulot! Mais on va aussi faire des ateliers plus avancés :)

Aurélien Rodot

NEW il y a 4 ans

jicehel jicehel

C'est seulement un brouillon, il reste encore bien du boulot! Mais on va aussi faire des ateliers plus avancés :)

jicehel

NEW il y a 4 ans

Oui j'ai vu et le pong fait un bon second tuto pour continuer. Tu pourras même garder cet exemple pour un tuto suivant avec la gestion du son peut être, mais je découvrirais avec intérêt. Perso, j'ai déjà appris des choses avec la gestion des boutons que je ne connaissais pas. C'est déjà bien plus qu'un brouillon en tous cas

STUDIOCRAFTapps

NEW il y a 4 ans

C'est bien pour un début mais ça manque de couleur. Les couleurs sur le code, c'est possible?

jicehel

NEW il y a 4 ans

C'est vrai que la même mise en couleur que sur l'éditeur Arduino permettrait aux débutants de localiser plus rapidement leurs erreurs (les mots clés avec un faute de frappe n’apparaîtraient pas de la bonne couleur par exemple et les commentaires ressortiraient mieux, ce qui faciliterait la lecture et la compréhension des codes d'exemples)

jicehel

NEW il y a 4 ans

Hum i don't know if it's a good location to post it but just before this Hello World, the tutorial: https://www.makerbuino.com/coding-getting-started/ explain very well how to connect the console and interface with the Arduino software to start coding. (It could be the first part, this one, the second and the pong the third)

Aurélien Rodot

il y a 4 ans

This is planned :)

Aurélien Rodot

NEW il y a 4 ans

jicehel jicehel

This is planned :)

Lemmy

NEW il y a 4 ans

Salut, je débute, et, au moment de la téléversion j'ai un message d'erreur qui apparaît "Erreur de compilation pour la carte Arduino/Genuino Uno" et je ne sais pas quoi faire..


en port j'ai: "/dev/cu.usbmodem411 (Arduino/Genuino Zero (Native USB Port))"

en type de carte : "Arduino/Genuino Uno"

Tout est correct ?

Aurélien Rodot

il y a 4 ans

Hello Lemmy,

Il faut que tu sélectionne "Gamebuino META" en type de carte, c'est expliqué dans le tutorial d'installation :)

Aurélien Rodot

NEW il y a 4 ans

Lemmy Lemmy

Hello Lemmy,

Il faut que tu sélectionne "Gamebuino META" en type de carte, c'est expliqué dans le tutorial d'installation :)

Aurélien Rodot

NEW il y a 4 ans

Je viens de mettre l'atelier à jour, maintenant ça devrait compiler pour la Gamebuino META :)

Lemmy

il y a 4 ans

Ça fonctionne ! Merci !

J'en profite pour exposer un autre problème ! .. Tu vas en avoir marre de moi ! 

J'ai fait tout bien il me semble.. le compteur se met à jour toutes les secondes mais il n'y a que le caractère "0" qui fonctionne. Dès que ça passe à "1", "2", etc ça me met un rectangle blanc et quand j'arrive à "10sec" ça m'affiche le zéro et toujours un carré blanc à la place du "1", pareil pour "100"

Lemmy

NEW il y a 4 ans

Aurélien Rodot Aurélien Rodot

Ça fonctionne ! Merci !

J'en profite pour exposer un autre problème ! .. Tu vas en avoir marre de moi ! 

J'ai fait tout bien il me semble.. le compteur se met à jour toutes les secondes mais il n'y a que le caractère "0" qui fonctionne. Dès que ça passe à "1", "2", etc ça me met un rectangle blanc et quand j'arrive à "10sec" ça m'affiche le zéro et toujours un carré blanc à la place du "1", pareil pour "100"

Spark

NEW il y a 4 ans

Bonjour ! J'ai essayé L'exemple du "Hello World" mais lorsque cela s'affiche sur la Gamebuino "Hello World" est répété à l'infini et non une seul fois. Est-ce normal ? Si ça l'est existe-t-il un moyen pour ne l'afficher qu'une seul fois ? Si quelqu'un peut m'aider, merci par avance.

Aurélien Rodot

NEW il y a 4 ans

@Spark et @Lemmy Sans votre code ça va être difficile de vous aider, est-ce que vous pouvez le partager ? :)

Lemmy

il y a 4 ans

C'est pas faux ça ! Je te passe le code du coup ;)


#include <Gamebuino-Meta.h>

//déclaration de la variable
int monCompteur ;

void setup() {
  gb.begin();
 //initialisation de la variable, une fois au début du pragramme
 monCompteur = 0;
}
void loop() {
  while(!gb.update());
  gb.display.println("hello, world");
  // on ajoute 1 à notre compteur
  monCompteur = monCompteur + 1;
  //puis on l'affiche à l'écran
  gb.display.println(monCompteur / 25);
  //le tout 1 fois par seconde
 
}

Spark

il y a 4 ans

Bonjour. Cela marche aussi si l'on met gb.display.print("hello world") dans la partie "void setup". Est-ce une bonne solution ou faut-il préférer la partie loop ?

P.S. : Désolé pour toutes ces questions mais je suis un vrai débutant en C.

Lemmy

NEW il y a 4 ans

Aurélien Rodot Aurélien Rodot

C'est pas faux ça ! Je te passe le code du coup ;)


#include <Gamebuino-Meta.h>

//déclaration de la variable
int monCompteur ;

void setup() {
  gb.begin();
 //initialisation de la variable, une fois au début du pragramme
 monCompteur = 0;
}
void loop() {
  while(!gb.update());
  gb.display.println("hello, world");
  // on ajoute 1 à notre compteur
  monCompteur = monCompteur + 1;
  //puis on l'affiche à l'écran
  gb.display.println(monCompteur / 25);
  //le tout 1 fois par seconde
 
}

Aurélien Rodot

NEW il y a 4 ans

@Lemmy j'ai corrigé le formatage de ton code, pense à le faire la prochaine fois c'est plus lisible :)

Voilà le code corrigé, depuis la dernière mise à jour de la bibliothèque gamebuino il faut apeller gb.display.clear();

Je mets le tuto à jour, merci pour le retour !

#include <Gamebuino-Meta.h>

//déclaration de la variable
int monCompteur ;

void setup() {
  gb.begin();
  //initialisation de la variable, une fois au début du pragramme
  monCompteur = 0;
}
void loop() {
  //on attend d'avoir à tracer l'écran suivant
  while (!gb.update());

  //on efface l'écran précédent
  gb.display.clear();

  //on affiche le message à l'écran
  gb.display.println("hello, world");
  // on ajoute 1 à notre compteur
  monCompteur = monCompteur + 1;
  //puis on l'affiche à l'écran
  gb.display.println(monCompteur / 25);
  //le tout 1 fois par seconde
}