Discover variables, the conditional structure if and drawing rectangles.

Build a program to count guests, stock, or sheep

Length 20 minutes

Level Complete beginner

Prerequisites

Our objective now is to build a small guest counter, that increments whenever the use presses the UP arrow, and decrements whenever the Down arrow is pressed. This counter is often found at the entrance of stadiums or events to count people. But the logic we will use can be applied in many areas of a video game, such as scores or death count. Throughout the program, we will learn how to store values in memory with variables and use conditions to handle buttons.

Let's begin with the body of our last program, "Hello, world" and making a small variation: (don't hesitate to follow along on you IDE ;) )

#include 

int counter = 0;  // New line

void setup() {
  gb.begin();

}

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

  gb.display.print(counter);  // Something changed here :)
}

Let's take a deeper look at the changes we made.

int counter = 0;

This line declares and initializes a variable that we display later in loop

counter is a variable that keeps track of how many guests we have. A variable is used to store information in memory. It could be a score, an image, some text, or even a whole map for a platformer. Sadly, when you power off you console, all variables are lost :( Note for the curious: there is actually a way to store variables in the SD card as to not lose them!

Here, we give our variable an initial value of 0 with the equals operator =.

A variable has a name, here we chose counter. Choosing a descriptive name is very important, our programs can be understood more clearly by the reader and ourselves. Avoid using names like a, b or var, unless you want headaches.

A variable also has a data type. The type of a variable is set at declaration, just before naming it. Here counter is an int. "Int" is short for integer, also known as whole numbers. So counter can store any integer, such as 0, 1, 5, or -34.

Here, this instruction is not placed inside of a function (functions are bounded by curly brackets {}). In C/C++, we can place instructions outside of functions, but these will only be executed once, from top to bottom. Note this does not apply to functions (instructions end in a semicolon but functions do not).


gb.display.print(counter);

We already saw how to use the gb.display.print function in the Hello world workshop. We used it with a string as its parameter. But you can also pass an int as a parameter, like we have done here. This will of course print the value of counter.

Button layout and their names

If you run the code we wrote up to this point, you will see a screen displaying a 0. There is no movement, no interaction. Boring right? Let's fix this right now. Before we start coding, you must understand that a variable can change value, hence the name. Also it is good practice to write down an algorithm before we program. So I came up with this algorithm to create the guest counter:

If we press UP
Then add 1 to "counter"

If we press DOWN
Then subtract 1 to "counter"

If we press MENU
Then Reset "counter" to 0

This algorithm simply states that we control the value of counter with the UP and DOWN arrows. We can also reset its value with the MENU button. See nothing complicated right? Now we have to write the same thing, but in C++. The If ... Then ... in our algorithm translate to:

if (condition) {
  // ...
}

Rather straight forward. If the condition is true, Then execute everything located within those two curly brackets { }. Applying this to the first part of the algorithm (UP arrow), we get the following:

#include 

int counter = 0;

void setup() {
  gb.begin();

}

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

  if (gb.buttons.pressed(BUTTON_UP)) {  // If we press UP
    counter = counter + 1;    // Add 1 to "counter"
    gb.sound.playTick();    // Play a ticking sound
  }  // End of IF

  gb.display.print(counter);
  gb.display.fillRect(counter, 8, 2, 4);  // Draw the rectangle
}

The new instructions are explained below. Since we only give you one part of the algorithm, then...

It's your turn!

It is now up to you to complete the code we started so that the two other buttons DOWN and MENU work. Do not hesitate to read over the algorithm and help yourself with the code for the UP arrow. If you ever need help with syntax, go to the Reference page (I recommend that you bookmark that page). This time I'll be nice this time and provide most of the elements you will need:


BUTTON_DOWN
BUTTON_MENU

These are the names of the two other buttons you will need.

Once that works, here is an extra little challenge: personalize your counter. Here are the functions you can use (and that are used in the given code above):

gb.sound.playTick();

This plays an predefined "tick" sound. Could be useful to make the counter feel more responsive when the player presses a button.



gb.display.fillRect(x, y, w, h);

This function draws a rectangle. It takes mutiple parameters, seperated by comas ,. The number and order of parameters in a a function is important. If you want to read more about this function, check out its reference, but here is a quick summary:

  • x is the horizontal coordinate of the rectangle, with the left edge of the screen being 0. In the example above, ve used counter.
  • y is the vertical coordinate of the rectangle, with the top edge of the screen being 0. Here it is 8, or 8 pixels.
  • w is the width of the rectangle in pixels, here 2
  • h is the height of the rectangle in pixels, here 4

How you use theses functions is up to you! Go crazy! Try messing with the position and size of the rectangle, or how about it color? What is instead of counting guests 1 by 1, you multiplied by 2 every time.

Share your inventions on social networks with #gamebuino #tallycounter, we go through them all the time ;)


Remarks about C/C++

A computer (like your Gamebuino) can execute a huge number of instructions very quickly, but a computer is not very bright. It we do exactly as it is told, literally. So the syntax and logic of each line is rather strict. There are two types of errors: syntax errors and logic errors. Syntax errors are detected by the compiler (when you compile), who will not let you compile until it is happy. Then we have the logic errors, those get past the compiler, but things don't behave like they are supposed to when you run your game.

To fix syntax errors, reading the red text given by the compiler is crucial. Here are the most "popular" errors:

Curly brackets { }

This is an error that a lot of beginners make. It is important to know that curly brackets come in pairs. Sometimes, you may forget to put one or type an extra one by accident. Either way, the compiler will not be happy because there will be a lonely bracket without a partner somewhere :( Here is a great feature of this IDE: if you place your cursor on an opening bracket, the matching closing brackt will be highlighted (and vice-versa). Note: all if statements and functions must have brackets.

 The semicolon ;


Every instruction must end with a semicolon. This error is as easy to fix, as it is to make :P Just read over your code, and look for missing semicolons.

If you ever get stuck with an error that you cannot seam to fix, come by our discord channel for help. Even if you don't have problems, you can join the community's chat ;)


Head to the next workshop to start you Pong game!

Next Workshop

Example of solution

Here's what we came up with: (code below)

#include 

int counter = 0;

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

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

  if(gb.buttons.pressed(BUTTON_UP)){
    counter = counter + 1;
    gb.sound.playOK();
  }

  if(gb.buttons.pressed(BUTTON_DOWN)){
    counter = counter - 1;
    gb.sound.playCancel();
  }

  if(gb.buttons.pressed(BUTTON_MENU)){
    counter = 0;
    gb.sound.playTick();
  }

  gb.display.setColor(BROWN);
  gb.display.fillRect(0, 0, counter, gb.display.height());

  gb.display.setColor(WHITE);
  gb.display.setFontSize(4);
  gb.display.setCursor(8,8);
  gb.display.print(counter); 
}

Last comments

Lemmy

NEW 2 months ago

Merci, je vais essayer d'avancer la dessus ! :)


Edit:

Après une semaine sans toucher ma Gamebuino faute de temps :( j'ai suivi ton conseil Clement, et, même si je ne sais pas pourquoi ça fonctionne maintenant ! =)


#include <Gamebuino-Meta.h>

int counter = 0;

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

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

  if (gb.buttons.pressed(BUTTON_UP)) {
    counter = counter + 1;
    gb.sound.playOK();
    
  }

  if (gb.buttons.pressed(BUTTON_DOWN)) {
    counter = counter - 1;
    gb.sound.playCancel();
    
  }


if(gb.buttons.pressed(BUTTON_MENU)) {
    counter = 0;
    gb.sound.playTick();
  }

  gb.display.setColor(BROWN);
  gb.display.fillRect(0, 0, counter, gb.display.height());

  if (gb.buttons.pressed(BUTTON_DOWN)) {
  gb.display.setColor(RED);
  gb.display.setFontSize(4);
  gb.display.setCursor(8,8);
  gb.display.print(counter);

} 
  
  else if (gb.buttons.pressed(BUTTON_UP)) {
  gb.display.setColor(GREEN);
  gb.display.setFontSize(4);
  gb.display.setCursor(8,8);
  gb.display.print(counter);

}
  
  else {gb.display.setColor(WHITE));
  gb.display.setFontSize(4);
  gb.display.setCursor(8,8);
  gb.display.print(counter);


}


J'aimerais encore faire quelques modifications comme par exemple rallonger la durée de couleur rouge ou verte mais je ne sais pas comment..

et aussi j'aimerai ajouter un "flash" mais je ne connais pas la "fonction" ?? pour allumer les led "gb.display.lesledcestjoliquandcestallumé" par exemple.. :)


Vous avez déjà été formidables avec tous vos conseils mais j'en veux plus !! 

clement

NEW 2 months ago

Lemmy Lemmy

oui tu ne peux pas mettre de else sur un seul if...

mais tu peux remetre un if dans un else 


Le switch que propose geed peux etre une bonne solution.


pour evité des problèmes a ton mac voici la syntax qui fonctionne du if / else qui fonctionnera pour ton cas. reste plus qu a mettre les bonne conditions dedans 

if() {
} else if () {
} else {
}  

geed

NEW 2 months ago

Lemmy Lemmy

C'est juste un problème de syntaxe ! Pas besoin de sortir la masse :)

regarde du côté des exemple sur l'arduino IDE, section CONTROL, tu verras que le else à une structure du type if (machin) { alors } else { bidule }

https://www.arduino.cc/reference/en/


Moi à ta place, je contournerai le problème, peut être avec une deuxième variable qui passe à 1 2 ou 3 en fonction de ce que tu fais. Et en fonction de la valeur de cette variable, tu changes l'affichages. Par exemple :)

Regarde aussi du côté de la fonction Switch (bidule) {


Et bon courage ! Ne décroche pas !



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

Log in

Quality seal