hello, world

Creations

Aurélien Rodot

6 years ago

In this section we will figure out how this program works

This program simply displays "hello, world" on your Gamebuino. If everything went properly after the installation of the software and your first upload, you should come up with something like this:

Drawing text on your screen is the initial step towards your very first game.

Let's move on to more serious things! We will now take apart this code, and understand it piece by piece.

Game structure

Here is the basic anatomy of a Gamebuino game:

1: #include <Gamebuino-Meta.h>
2: 
3: void setup() {
4: 
5: }
6: 
7: void loop() {
8: 
9: }

The code is divided into three parts.

The first line of code is #include <Gamebuino-Meta.h>. This line allows us to use the Gamebuino library (i.e. display, buttons, sound, etc). Without it, there would be no game.

Generally speaking #include acts as a bridge between programs. It is useful if you want to use code from another program. #includes are nearly always put at the beginning of the file. Here, we will only need the Gamebuino-Meta.h library.

The two other essential parts of a Gamebuino Game are the two functions setup and loop. Functions are a series of instructions that can be executed whenever they are called. A function's instructions are delimited by two curly brackets { }. So above, the setup function starts at line 3 and ends line 5.

The setup function is called once, when the game starts. The other function, loop, is called after setup until you quit the game; in other words, the instructions inside of loop are executed in a loop. Forever. Well, until you quit ;)

The display

setup()

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

As you can see, our setup function only has one instruction: gb.begin(). Anything starting with "gb" is coming from the Gamebuino-Meta library (remember, we can use this library because of #include <Gamebuino-Meta.h>). The function gb.begin() must be called at the beginning of every game, because it initializes you Gamebuino. You may have also noticed that instructions end in a semicolon ;. This is very important, all instructions end in a semicolon.

loop()

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



// This is where most of the program takes place gb.display.print("hello, world"); }


Remainder: instructions located inside the loop() function are executed in a loop forever.

while(!gb.update());

This instruction is also part of the structure of any Gamebuino program. This will do two things for you:

  • It will handle everything that happens behind the scenes, such as updating the display, getting button information, or even playing sound.
  • This will also throttle the frequency at which loop is called, as to have a constant game speed. By default, this line forces the game to run at 25 frames per second. This means that loop is called every 0.04 seconds. This is fast enough to be fluid to the human eye, but slow enough to let the CPU keep up with calculations.

For now, I am asking you to not think too much about what each character of this instruction means (we will come back to it in a later tutorial). But learn to recognize it, and remember what it does. Again, is a necessary part of every Gamebuino game :)

gb.display.clear();

Because we are calling loop 25 times every second, we need to clear the content of the screen before starting to draw the next frame... Otherwise, this would be quite a mess! Well, this is exactly what gb.display.clear(); does.

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

This line is not part of every game you will write, that is because this instruction is responsible for writing the "hello, world" to the screen. If wee take a closer look, gb means that is a Gamebuino function, and gb.display means that we are more specifically using a function that has something to do with the screen. Indeed, the function we use, gb.display.print writes a string of characters, or string for short, to the screen. A string is a series of characters written between quotes " ".

Comments

You may have noticed that we skipped a line in the loop function during the explanation. This is because it is a comment.

// This is where most of the program takes place

Sometimes we need to explain what a certain piece of code does. To do so, we use comments. Comments start with // and are ignored by the compiler. They are very useful to add personal notes and clear explanations of things in your code. We use them throughout tutorials so you do not get lost in the sometimes lengthy code we give :P

Remark about C/C++

C/C++ is the programming language you are currently using. It is a case sensitive language, meaning that print, Print, and pRiNT are all different things. If you make the mistake of calling gb.display.Print("Hey"), you will get an error when compiling. We will look into how to handle errors in the next tutorial.

And don't forget, instructions end in a semicolon! (If you forget this, the compiler may not tell you and compile anyways, which creates very bizarre behavior :P )

It's your turn!

Now that you know how to display text on your Gamebuino, try out other text. How about a poem?

Share your results with #gamebuino #helloworld to celebrate your very first program! :)

  • Tip #1 You can use the escape code \n to insert newlines in your text. (e.g. gb.display.print("hello\nWorld");)
  • Tip #2 You can change the color of text with gb.display.setColor. Check out Graphics::setColor in the Reference to learn more about this function!
  • Tip #3 To change text size, use Graphics::setFontSize.

Now try to recreate the screenshot below with the help of the tips given to you. When in doubt, do not hesitate to read the tutorial a second (or even third) time.

Solution Example

If you ran out of ideas, here is what we did on our side. Hope it helps :)

#include <Gamebuino-Meta.h>

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

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

// Draw text to screen gb.display.print("Hello world\nis a tradition\nsince\n\n");

// Change size of text gb.display.setFontSize(2); gb.display.print("1978");

// Change color and revert to original size gb.display.setColor(BROWN); gb.display.setFontSize(1); gb.display.print("\n\n\n - GAMEBUINO"); }


Next Workshop

By Aurélien Rodot, modified by Julien Giovinazzo

Any questions / comments / suggestions, be sure to drop a comment down below!

View full creation

jicehel

NEW 6 years ago

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

6 years ago

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 6 years ago

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 6 years ago

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 6 years ago

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

jicehel

NEW 6 years ago

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 6 years ago

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

6 years ago

This is planned :)

Aurélien Rodot

NEW 6 years ago

jicehel jicehel

This is planned :)

Lemmy

NEW 6 years ago

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

6 years ago

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 6 years ago

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 6 years ago

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

Lemmy

6 years ago

Ç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 6 years ago

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 6 years ago

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 6 years ago

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

Lemmy

6 years ago

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

6 years ago

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 6 years ago

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 6 years ago

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