Say hello to programming.

Write your first program

Length 10 minutes

Level Complete beginner

Prerequisite

Let's start with a very basic program built to introduce programming to people: the Hello World program.

We will start by loading the program into your console. Then we will analyse and understand what it does. Lastly, we will help you make your own program :)

The code

Here is the code we will be looking at :D

#include <Gamebuino-Meta.h>

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

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

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

Compile and upload a program

  • 1 - Turn your Gamebuino ON
  • 2 - Plug it in the computer with with a USB cable
  • 3 - In "Tools/Port" select "Arduino/Genuino Zero (Native USB Port)"
  • 4 - Click on "Sketch/Upload" or press "Ctrl + U" to compile and upload the program to the Gamebuino
  • 5 - Compiling will take a few minutes the first time. Stare deeply at your screen to help it compile faster.
  • 6 - The console will reset and launch the new program. It overwrites any program present, but you can keep several programs at the same time on the micro SD card. See Update and install games.

Time to celebrate, you just launched your very first program!

This program simply displays "hello, world" on your Gamebuino. 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:

#include <Gamebuino-Meta.h>

void setup() {

}

void loop() {

}

The general structure 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 { }. 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.
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.

Next Workshop

Example of solution

#include 


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");
}

Last comments

Aurélien Rodot

NEW 1 week ago

Marc Benbahi Marc Benbahi

Bien joué 💪

jicehel

NEW 1 week ago

Super Aulien. Bon démarrage et réfléchi à un jeu pas trop compliqué pour tes débuts. Après si tu as des problèmes on sera là pour t'aider (même si moi, je commence aussi  et que par conséquent j'ai encore des tonnes de lacunes ;) )

Marc Benbahi

NEW 1 week ago

Aurélien,

Je l'ai fait... ! J'avoue c'était simple. J'espere retenir deux trois trucs ;)

Aurélien Rodot

1 week ago

Bien joué 💪

You must be logged in in order to post a message on the forum

Log in

Quality seal