Make Your Own Arduboy Game – Make Pong From Scratch!

Or Operator

We already talked about using the and operator. It’s a way we connect two comparisons inside of an ifstatement. To illustrate it, look at this code:

if( a == 5 and b > 20 ) {
	c = 0;
}

c will only be set to 0 if a is equal to 5 and b is greater than 20.

There are some other operators that we can use instead of the and operator. One of them is the or operator. The or operator can be used to check if one of a few comparisons are true. Check out this code:

if( a == 5 or b > 20 ) {
	c = 20;
}

In the above example, c will be set to 20 if either a is equal to 5 or b is greater than 20.

Keep the or operator in mind. We’ll use it soon!

Modulo Operation

Do you know the answer to 12 ÷ 6? The answer is 2! That was easy, right? Okay, what about 23 ÷ 5? The answer is either 4.6 or 4 with a remainder of 3. Which is the correct answer??

If you asked the Arduboy what 23 ÷ 5 was, the answer would be 4! That seems wrong! Where did the remainder go?? We need give the Arduboy another instruction to figure out the remainder.

Remember when I said that computers have to be very precise when given instructions? When computers were young, people tried to come up with the best way to do devision. There were a lot of ideas, but the best way seemed to be introducing the modulo operator.

To get the remainer, we ask the Arduboy for the answer of 23 % 5. It will output 3! If you asked 12 % 6, you would get 0!

Why is this important? Well, we can use this to figure out more complex math, but there’s something special in game development that we can use this for.

Anytime you use two numbers with the modulo operator, the answer will be somewhere between 0 and the second number. a % b will never be a number more than b.

Keep this in mind and we’ll do something really fun with it later!

7. Adjusting The AI

Okay, so, the computer player is way too good. We’ll never be able to win. One thing we can do to stop it from being so good is to only allow it to move some of the time. When will we allow it to move its paddle? Well, for starters, we could let it move its paddle only whenever the ball is close to the right side of the screen!

Find these lines of code:

if(bally < computery) {
	computery = computery - 1;
}
if(bally + ballsize > computery + paddleheight) {
	computery = computery + 1;
}

These are the lines of code that move the computer’s paddle. Let’s put an if statement around them that checks if the ball’s horizontal position (ballx) is close to the right-side of the screen. I put 115.

if(ballx > 115) {
	if(bally < computery) {
		computery = computery - 1;
	}
	if(bally + ballsize > computery + paddleheight) {
		computery = computery + 1;
	}
}

Test it out and think about it for a second. Notice how the computer’s paddle doesn’t always move like it used it? It’s a little more precise right now, but only moves whenever the ball is close to scoring.

But, we need to add more variance… More randomness… We need to make it so that the game is different every time you play. I KNOW! Let’s let the computer paddle move when the ball is close or let the computer paddle move when the computer picks a random number.

Back in Part 5 of this series, I showed you how to pick a random number. I’m going to explain to you how that works, now.

First of all, we need to know about the rand() function. This will give us a random number, but the number can really be anything. It can be 2,000, or 9 or -200. There’s really no control over it. HOWEVER, we can use the modulo operator that we learned about earlier!! Take a look at this code and think about what this will output!!

rand() % 20

Well, we’ll randomly pick a number, then divide it by 20, then only have the remainder left. It doesn’t matter what number is randomly picked, if we just looked at the remainder, the remainder will be some number between 0 and 20. Which number? I don’t know. Isn’t that awesome?! :laughing:

That little line of code will essentially pick a random number between 0 and 20!

Let’s adjust that if statement from above!

if(ballx > 115 or rand() % 20 == 1) {

This means that if ballx is greater than 115, or a randomly-picked number is equal to 1, then we move the comptuer’s paddle. Basically, the computer’s paddle will randomly move 1/20th of the time.

Here’s the full code so far!

//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int paddlewidth = 4;
int paddleheight = 9;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;

void setup() {
	arduboy.begin();
	//Seed the random number generator
	srand(7/8);
	//Set the game to 60 frames per second
	arduboy.setFrameRate(60);
	arduboy.clear();
}

void loop() {
	//Prevent the Arduboy from running too fast
	if(!arduboy.nextFrame()) {
		return;
	}
	arduboy.clear();
	//Game code here
	switch( gamestate ) {
		case 0:
			//Title screen
			arduboy.setCursor(0, 0);
			arduboy.print("Title Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 1;
			}
			break;
		case 1:
			//Gameplay screen
			arduboy.setCursor(0, 0);
			arduboy.print("Gameplay");
			//Draw the ball
			arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
			//Move the ball right
			if(ballright == 1) {
				ballx = ballx + 1;
			}
			//Move the ball left
			if(ballright == -1) {
				ballx = ballx - 1;
			}
			//Reflect the ball off of the left side of the screen
			if(ballx == 0) {
				ballright = 1;
			}
			//Reflect the ball off of the right side of the screen
			if(ballx + ballsize == 127) {
				ballright = -1;
			}
			//Move the ball down
			if(balldown == 1) {
				bally = bally + 1;
			}
			//Move the ball up
			if(balldown == -1) {
				bally = bally - 1;
			}
			//Reflect the ball off of the top of the screen
			if(bally == 0) {
				balldown = 1;
			}
			//Reflect the ball off of the bottom of the screen
			if(bally + ballsize == 63) {
				balldown = -1;
			}
			//Draw the player's paddle
			arduboy.fillRect(playerx, playery, paddlewidth, paddleheight, WHITE);
			//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
			if(arduboy.pressed(UP_BUTTON) and playery > 0) {
				playery = playery - 1;
			}
			//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
			if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
				playery = playery + 1;
			}
			//Draw the computer's paddle
			arduboy.fillRect(computerx, computery, paddlewidth, paddleheight, WHITE);
			//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
			if(ballx > 115 or rand() % 20 == 1) {
				//If the ball is higher than the computer's paddle, move the computer's paddle up
				if(bally < computery) {
					computery = computery - 1;
				}
				//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
				if(bally + ballsize > computery + paddleheight) {
					computery = computery + 1;
				}
			}



			//If the ball makes contact with the player's paddle, bounce it back to the right
			if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
				ballright = 1;
			}
			//If the ball makes contact with the computer's paddle, bounce it back to the left
			if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
				ballright = -1;
			}
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 2;
			}
			break;
		case 2:
			//Win screen
			arduboy.setCursor(0, 0);
			arduboy.print("Win Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 3;
			}
			break;
		case 3:
			//Game over screen
			arduboy.setCursor(0, 0);
			arduboy.print("Game Over Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 0;
			}
			break;
	}
	//Check if the button is being held down
	if(arduboy.notPressed(A_BUTTON)) {
		justpressed = 0;
	}
	arduboy.display();
}

8. Scoring

Since we’re going to introduce scoring, we need a way for the ball to actually be scored. This means we need to remove some of our old bouncing code.

if(ballx == 0) {
	ballright = 1;
}
if(ballx + ballsize == 127) {
	ballright = -1;
}

Find those lines and remove them. This way, the ball will continue to move beyond the screen. In fact, we’ll check to see if the ball has moved off of the screen in order to give points!

Feel free to test the code out once you remove that code. :laughing:

To keep track of the scores, let’s declare some variables at the top of the sketch.

int playerscore = 0;
int computerscore = 0;

Now, look for the code in case 1 that displayed the text, “Gameplay.” Instead of just displaying that text, let’s modify it to display the player’s and computer’s scores.

arduboy.setCursor(20, 0);
arduboy.print(playerscore);

arduboy.setCursor(101, 0);
arduboy.print(computerscore);

Next, we need a way to actually score! Since the code now allows for the ball to move off of the screen, let’s check if it’s off the screen and if it is, then give someone a point, and then move it back into the middle of the screen.

Here’s how we can check if the ball is off of the screen.

if(ballx < -10) {

}
if(ballx > 130) {

}

To change the points, and put it back into the middle of the screen, we simply change the appropriate variables…

if(ballx < -10) {
	ballx = 63;
	computerscore = computerscore + 1;
}
if(ballx > 130) {
	ballx = 63;
	playerscore = playerscore + 1;
}

I really suggest testing the game out, so far. Here’s the code that I have:

//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int paddlewidth = 4;
int paddleheight = 9;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;
int playerscore = 0;
int computerscore = 0;

void setup() {
	arduboy.begin();
	//Seed the random number generator
	srand(7/8);
	//Set the game to 60 frames per second
	arduboy.setFrameRate(60);
	arduboy.clear();
}

void loop() {
	//Prevent the Arduboy from running too fast
	if(!arduboy.nextFrame()) {
		return;
	}
	arduboy.clear();
	//Game code here
	switch( gamestate ) {
		case 0:
			//Title screen
			arduboy.setCursor(0, 0);
			arduboy.print("Title Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 1;
			}
			break;
		case 1:
			//Gameplay screen
			//Display the player's score
			arduboy.setCursor(20, 0);
			arduboy.print(playerscore);
			//Display the computer's score
			arduboy.setCursor(101, 0);
			arduboy.print(computerscore);
			//Draw the ball
			arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
			//Move the ball right
			if(ballright == 1) {
				ballx = ballx + 1;
			}
			//Move the ball left
			if(ballright == -1) {
				ballx = ballx - 1;
			}
			//Move the ball down
			if(balldown == 1) {
				bally = bally + 1;
			}
			//Move the ball up
			if(balldown == -1) {
				bally = bally - 1;
			}
			//Reflect the ball off of the top of the screen
			if(bally == 0) {
				balldown = 1;
			}
			//Reflect the ball off of the bottom of the screen
			if(bally + ballsize == 63) {
				balldown = -1;
			}
			//Draw the player's paddle
			arduboy.fillRect(playerx, playery, paddlewidth, paddleheight, WHITE);
			//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
			if(arduboy.pressed(UP_BUTTON) and playery > 0) {
				playery = playery - 1;
			}
			//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
			if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
				playery = playery + 1;
			}
			//Draw the computer's paddle
			arduboy.fillRect(computerx, computery, paddlewidth, paddleheight, WHITE);
			//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
			if(ballx > 115 or rand() % 20 == 1) {
				//If the ball is higher than the computer's paddle, move the computer's paddle up
				if(bally < computery) {
					computery = computery - 1;
				}
				//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
				if(bally + ballsize > computery + paddleheight) {
					computery = computery + 1;
				}
			}
			//If the ball moves off of the screen to the left...
			if(ballx < -10) {
				//Move the ball back to the middle of the screen
				ballx = 63;
				//Give the computer a point
				computerscore = computerscore + 1;
			}
			//If the ball moves off of the screen to the right....
			if(ballx > 130) {
				//Move the ball back to the middle of the screen
				ballx = 63;
				//Give the player a point
				playerscore = playerscore + 1;
			}

			//If the ball makes contact with the player's paddle, bounce it back to the right
			if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
				ballright = 1;
			}
			//If the ball makes contact with the computer's paddle, bounce it back to the left
			if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
				ballright = -1;
			}
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 2;
			}
			break;
		case 2:
			//Win screen
			arduboy.setCursor(0, 0);
			arduboy.print("Win Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 3;
			}
			break;
		case 3:
			//Game over screen
			arduboy.setCursor(0, 0);
			arduboy.print("Game Over Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 0;
			}
			break;
	}
	//Check if the button is being held down
	if(arduboy.notPressed(A_BUTTON)) {
		justpressed = 0;
	}
	arduboy.display();
}

Awesome, huh? It’s pretty much a finished game at this point! We just need to clean it up, some!

One thing we need to do is check if someone wins! Let’s do a check to see if someone has 5 points. If they do, then change the gamestate variable to the appropriate value.

if(playerscore == 5) {
	gamestate = 2;
}
if(computerscore == 5) {
	gamestate = 3;
}

Hmm… Maybe we should change the code inside of case 2 for pushing the A button. Instead of taking you to gamestate = 3, maybe we should use gamestate = 0 so that it takes you to the title screen of the game. Why would we want to show the win screen, then game over screen right afterwards, right?

Here’s the completed code so far:

//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int paddlewidth = 4;
int paddleheight = 9;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;
int playerscore = 0;
int computerscore = 0;

void setup() {
	arduboy.begin();
	//Seed the random number generator
	srand(7/8);
	//Set the game to 60 frames per second
	arduboy.setFrameRate(60);
	arduboy.clear();
}

void loop() {
	//Prevent the Arduboy from running too fast
	if(!arduboy.nextFrame()) {
		return;
	}
	arduboy.clear();
	//Game code here
	switch( gamestate ) {
		case 0:
			//Title screen
			arduboy.setCursor(0, 0);
			arduboy.print("Title Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 1;
			}
			break;
		case 1:
			//Gameplay screen
			//Display the player's score
			arduboy.setCursor(20, 0);
			arduboy.print(playerscore);
			//Display the computer's score
			arduboy.setCursor(101, 0);
			arduboy.print(computerscore);
			//Draw the ball
			arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
			//Move the ball right
			if(ballright == 1) {
				ballx = ballx + 1;
			}
			//Move the ball left
			if(ballright == -1) {
				ballx = ballx - 1;
			}
			//Move the ball down
			if(balldown == 1) {
				bally = bally + 1;
			}
			//Move the ball up
			if(balldown == -1) {
				bally = bally - 1;
			}
			//Reflect the ball off of the top of the screen
			if(bally == 0) {
				balldown = 1;
			}
			//Reflect the ball off of the bottom of the screen
			if(bally + ballsize == 63) {
				balldown = -1;
			}
			//Draw the player's paddle
			arduboy.fillRect(playerx, playery, paddlewidth, paddleheight, WHITE);
			//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
			if(arduboy.pressed(UP_BUTTON) and playery > 0) {
				playery = playery - 1;
			}
			//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
			if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
				playery = playery + 1;
			}
			//Draw the computer's paddle
			arduboy.fillRect(computerx, computery, paddlewidth, paddleheight, WHITE);
			//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
			if(ballx > 115 or rand() % 20 == 1) {
				//If the ball is higher than the computer's paddle, move the computer's paddle up
				if(bally < computery) {
					computery = computery - 1;
				}
				//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
				if(bally + ballsize > computery + paddleheight) {
					computery = computery + 1;
				}
			}
			//If the ball moves off of the screen to the left...
			if(ballx < -10) {
				//Move the ball back to the middle of the screen
				ballx = 63;
				//Give the computer a point
				computerscore = computerscore + 1;
			}
			//If the ball moves off of the screen to the right....
			if(ballx > 130) {
				//Move the ball back to the middle of the screen
				ballx = 63;
				//Give the player a point
				playerscore = playerscore + 1;
			}
			//Check if the player wins
			if(playerscore == 5) {
				gamestate = 2;
			}
			//Check if the computer wins
			if(computerscore == 5) {
				gamestate = 3;
			}



			//If the ball makes contact with the player's paddle, bounce it back to the right
			if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
				ballright = 1;
			}
			//If the ball makes contact with the computer's paddle, bounce it back to the left
			if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
				ballright = -1;
			}
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 2;
			}
			break;
		case 2:
			//Win screen
			arduboy.setCursor(0, 0);
			arduboy.print("Win Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 0;
			}
			break;
		case 3:
			//Game over screen
			arduboy.setCursor(0, 0);
			arduboy.print("Game Over Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 0;
			}
			break;
	}
	//Check if the button is being held down
	if(arduboy.notPressed(A_BUTTON)) {
		justpressed = 0;
	}
	arduboy.display();
}

9. Reset Function

If you tested this out, you’re going to notice that once you win and try to play again, you won’t really be able to. The reason this happens is that the Arduboy remembers the score from the last match! It starts the new match of Pong, checks the scores, and realizes someone has already won, then shows you either the win screen or game over screen.

What we need to do is reset the game’s variables… ballxplayerscore, and computerscore.

Scroll all the way down to case 2 and case 3. Inside of both of them, there’s a check to see if we push the A button. This is a great place to put the code to reset our variables since pushing A is supposed to reset the game to the very beginning.

So, inside of the button checks of case 2 and case 3, put this code:

ballx = 63;
playerscore = 0;
computerscore = 0;

Actually! I got an idea! Instead of writing the same code multiple times, I should teach you about writing functions to save you time!

You already kinda know what functions are, right? They’re instructions that the computer follows. One example of this is arduboy.clear(), which will erase everything on the screen!

Well, one cool thing about programming is that you can write your own functions! It’s really helpful! Sometimes, you’ll have code that you want to use over and over again, but maybe you don’t want to type over and over again…

Scroll all the way up… After you declare your variables, let’s declare a function. :heart: We’ll call it resetgame(). Type this out:

void resetgame() {

}

Inside of the braces, we’ll be able to put the instructions that are contained within the resetgame() function. Let’s update it with the code we used a moment ago!

void resetgame() {
	ballx = 63;
	playerscore = 0;
	computerscore = 0;
}

There we go! Any time we want to run those instructions, instead of typing out all 3 of those lines, we can save time by typing resetgame() instead!

Back down near the bottom, add the resetgame() function where you change gamestate to 0! :slight_smile:

If you got confused, here’s the full code!

//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int paddlewidth = 4;
int paddleheight = 9;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;
int playerscore = 0;
int computerscore = 0;

void resetgame() {
	ballx = 63;
	playerscore = 0;
	computerscore = 0;
}

void setup() {
	arduboy.begin();
	//Seed the random number generator
	srand(7/8);
	//Set the game to 60 frames per second
	arduboy.setFrameRate(60);
	arduboy.clear();
}

void loop() {
	//Prevent the Arduboy from running too fast
	if(!arduboy.nextFrame()) {
		return;
	}
	arduboy.clear();
	//Game code here
	switch( gamestate ) {
		case 0:
			//Title screen
			arduboy.setCursor(0, 0);
			arduboy.print("Title Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 1;
			}
			break;
		case 1:
			//Gameplay screen
			//Display the player's score
			arduboy.setCursor(20, 0);
			arduboy.print(playerscore);
			//Display the computer's score
			arduboy.setCursor(101, 0);
			arduboy.print(computerscore);
			//Draw the ball
			arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
			//Move the ball right
			if(ballright == 1) {
				ballx = ballx + 1;
			}
			//Move the ball left
			if(ballright == -1) {
				ballx = ballx - 1;
			}
			//Move the ball down
			if(balldown == 1) {
				bally = bally + 1;
			}
			//Move the ball up
			if(balldown == -1) {
				bally = bally - 1;
			}
			//Reflect the ball off of the top of the screen
			if(bally == 0) {
				balldown = 1;
			}
			//Reflect the ball off of the bottom of the screen
			if(bally + ballsize == 63) {
				balldown = -1;
			}
			//Draw the player's paddle
			arduboy.fillRect(playerx, playery, paddlewidth, paddleheight, WHITE);
			//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
			if(arduboy.pressed(UP_BUTTON) and playery > 0) {
				playery = playery - 1;
			}
			//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
			if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
				playery = playery + 1;
			}
			//Draw the computer's paddle
			arduboy.fillRect(computerx, computery, paddlewidth, paddleheight, WHITE);
			//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
			if(ballx > 115 or rand() % 20 == 1) {
				//If the ball is higher than the computer's paddle, move the computer's paddle up
				if(bally < computery) {
					computery = computery - 1;
				}
				//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
				if(bally + ballsize > computery + paddleheight) {
					computery = computery + 1;
				}
			}
			//If the ball moves off of the screen to the left...
			if(ballx < -10) {
				//Move the ball back to the middle of the screen
				ballx = 63;
				//Give the computer a point
				computerscore = computerscore + 1;
			}
			//If the ball moves off of the screen to the right....
			if(ballx > 130) {
				//Move the ball back to the middle of the screen
				ballx = 63;
				//Give the player a point
				playerscore = playerscore + 1;
			}
			//Check if the player wins
			if(playerscore == 5) {
				gamestate = 2;
			}
			//Check if the computer wins
			if(computerscore == 5) {
				gamestate = 3;
			}


			//If the ball makes contact with the player's paddle, bounce it back to the right
			if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
				ballright = 1;
			}
			//If the ball makes contact with the computer's paddle, bounce it back to the left
			if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
				ballright = -1;
			}
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				gamestate = 2;
			}
			break;
		case 2:
			//Win screen
			arduboy.setCursor(0, 0);
			arduboy.print("Win Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				resetgame();
				gamestate = 0;
			}
			break;
		case 3:
			//Game over screen
			arduboy.setCursor(0, 0);
			arduboy.print("Game Over Screen");
			//Change the gamestate
			if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
				justpressed = 1;
				resetgame();
				gamestate = 0;
			}
			break;
	}
	//Check if the button is being held down
	if(arduboy.notPressed(A_BUTTON)) {
		justpressed = 0;
	}
	arduboy.display();
}

Wow!

Give yourself a pat on the back! Good job with this one! It was a long tutorial, but if you made it this far, you really deserve some kind of prize! :slight_smile: You are definitely ready to start experimenting and making your own game!

Next Tutorial

The next tutorial will be a bit shorter. I’ll teach you some cool stuff that I purposely skipped before. A lot more features that will make programming a little easier for you. We’ll use that stuff to upgrade this Pong game to have more features, too!

This tutorial is copied and abridged from the original by Jonathan Holmes.

Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait34 . I’d greatly appreciate that. :smile:

Make Your Own Arduboy Game – Graphics!

Previous parts of this series: Part 1Part 2Part 3Part 4, and Part 5

In this tutorial, I’m going to show you how to make a game demo where you can move a sprite around a screen that has a tiled background. I’ll also teach you some more basic programming fundamentals.

Starting Code

Let’s use this code to start our program. Open the Arduino IDE, start a new project, and make sure the code looks like this:

//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
void setup() {
	arduboy.begin();
	arduboy.clear();
}
void loop() {
	arduboy.clear();
	
	arduboy.display();
}

Starting Images

Right-click and download these two images to your computer.

This image will be your background image. We’re going to tile it across the entire Arduboy screen.

This image will be your player sprite, which is the image that represents your character. You’ll move this face around your screen on the Arduboy.

Convert Images

Remember how I said that you can store data and variables in several formats? Remember, one format that we used before for numbers was int. Well, to store images, we actually want to convert them into raw data that we can store them in byte arrays. Don’t worry too much about what that means, just know it’s different than an int and can hold a different amount of data.

I’ve seen some people on this forum say that they convert images to raw data by hand, but luckily, I created an online tool that will do it for us called ToChars. Open up http://www.crait.net/tochars/615 in a new tab and follow these instructions for each image.

1) Click Start

2) Click Browse

3) Set Size

For the background image, set the height and width to both be 8 pixels. For the player sprite, set them to be 16 pixels.

4) Click Convert

5) Grab Data

Here’s the raw data for background image:

0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80, 

Here’s the raw data for the player sprite:

0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,

Hold onto these for a second and I’ll teach you where to put them.

Talking About Initializing Variables

Alright, I kinda left out some information about initializing variables. So far, I’ve had you initialize variables at the top of the sketch, right under the Arduboy arduboy; line. But, it’s important to know that you can actually initialize them pretty much anywhere. We’ll do that later on, so I don’t want it to surprise you.

I want to teach you a shortcut, though. When we’ve been initializing variables, we have been doing them in the following format:

int counter;
counter = 5;

This is valid, but there’s a shortcut that you can take. You can actually set a value to a variable at the same time you initialize it.

int counter = 5;

Cool, huh? You can also do this with constants.

Constants

constant is like a variable in the sense that you can have it store data that you can also initialize. The only difference is that the data can’t be changed. It saves memory to store data in constants instead of variables if you aren’t going going to change the data that it holds. We’ll do that with our image data since we won’t change the images at all.

To create a constant, you use the const keyword in front of the initialization.

int counter = 5;
const int height = 5;

Since you can’t change the data inside of a constant, height cannot be changed or given a new value. If you were to use the following code, you would get an error and the code will not work.

height = 12;

Storing Images

Whew! That was a lot to tell you real quick, but let’s move on to storing the raw image data into byte arrays. Where you normally initialize variables, put the following code:

const unsigned char background[] PROGMEM  = {
    0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
    0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};

To summarize this code, we converted 2 images to 2 groups of characters. One is named background and the other is named player. Let’s break this code down a little and go word-by-word.

  • const: We already know that we are creating a variable that cannot be changed.
  • unsigned: This means that we cannot use negative values. Just ignore this for a while.
  • char: The way we store byte data is by putting it into a char, which stands for character. This is the kind of variable that we are creating instead of using an int like the last tutorial. :wink:
  • background: Like all variables, we need to give these two character arrays names. The top one is called background and the bottom one is called player.
  • []: The brackets that you see here means that we’re creating an array. An array is a group of variables. We’re creating groups of char variables. We can call them character arrays.
  • =: Like in the shortcut that I explained above, when you initialize a variable, you can assign a value to it at the same time. We can do this with arrays. We’ll actually assign the characters directly into the array.
  • { }: Anything inside of the braces is what we’re actually putting inside of the array.
  • 0x84, 0x20,...: This is the data that we got from the ToChars site. It’s an image stored in multiple bytes/characters. Each character is separated by a comma. ToChars converted the images to characters. Get it? :laughing:

Your game’s code should look like this:

//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
const unsigned char background[] PROGMEM  = {
    0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
    0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
    arduboy.begin();
    arduboy.clear();
}
void loop() {
    arduboy.clear();
    arduboy.display();
}

Parameters

I can’t wait to show you how to draw the above images to the Arduboy screen! But I can’t just yet! :open_mouth: I need to tell you about a function’s parameters! Remember that a function is an instruction for the computer. Sometimes, they look like this:

arduboy.clear();

That clears the Arduboy’s screen. It’s a function that is easy to understand. Here’s another:

arduboy.print(randomnumber);

This is from the last tutorial. The randomnumber is a variable that we put into the function. We told the Arduboy what to print. That’s called a parameter. And in fact, functions can have multiple parameters. We already saw one earlier that did this in the last tutorial, too!

arduboy.setCursor(0, 0);

The arduboy.setCursor() function requires two parameters that are separated by a comma.

The function to draw an image to the Arduboy’s screen has a lot more parameters that you need to use. This is actually pretty common.

Drawing Images

So, we want to draw an image to the Arduboy screen, finally! Let’s start by drawing the player sprite that we called player. Inside of the loop() area, after we clear the screen, let’s add this line of code:

arduboy.drawBitmap(5, 10, player, 16, 16, WHITE);
  • The first two parameters are 5 and 10. These numbers represent the X and Y location that the image will be drawn to. Changing these numbers will change where the image appears.
  • The next parameter that’s given is the image that we want to draw, which is player.
  • The next two parameters are the width and height of the image that is being drawn. For the playerimage, we’ll have 16, 16, but for the background image, we’ll have 8, 8 since that’s how big those images are.
  • the last parameter is what color we want to draw to the screen. WHITE means that we’re drawing all the white pixels in the image as white. BLACK means that we’re drawing all the white pixels in the image as black. It seems counter-intuitive, but it becomes useful later on.

Okay! If your code looks like the following, then go ahead and put it on your Arduboy!

//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
const unsigned char background[] PROGMEM  = {
    0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
    0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
    arduboy.begin();
    arduboy.clear();
}
void loop() {
    arduboy.clear();
    arduboy.drawBitmap(5, 10, player, 16, 16, WHITE);
    arduboy.display();
}

Your Arduboy should properly display as:

Control The Sprite

Okay, remember how we controlled the value of a variable with the Up and Down buttons? To move the sprite around, we’ll do something very similar.

To start, let’s initialize 2 variables at the top of the sketch:

int playerx = 5;
int playery = 10;

The playerx and playery variables will hold the coordinates for our image as it’s moving around. In the arduboy.drawBitmap() function, let’s replace the X and Y parameter with these variables.

arduboy.drawBitmap(palyerx, playery, player, 16, 16, WHITE);

Let’s increase/decrease those variables’ values when the Up/Down and Left/Right buttons are pressed.

if(arduboy.pressed(LEFT_BUTTON)) {
    playerx = palyerx - 1;
}
if(arduboy.pressed(RIGHT_BUTTON)) {
    playerx = palyerx + 1;
}
if(arduboy.pressed(UP_BUTTON)) {
    playery = palyery - 1;
}
if(arduboy.pressed(DOWN_BUTTON)) {
    playery = palyery + 1;
}

That’s all it takes to move an image around the screen! Test out the code on your Arduboy and have fun with it!

//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
int playerx = 5;
int playery = 10;
const unsigned char background[] PROGMEM  = {
    0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
    0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
    arduboy.begin();
    arduboy.clear();
}
void loop() {
    arduboy.clear();
    if(arduboy.pressed(LEFT_BUTTON)) {
        playerx = playerx - 1;
    }
    if(arduboy.pressed(RIGHT_BUTTON)) {
        playerx = playerx + 1;
    }
    if(arduboy.pressed(UP_BUTTON)) {
        playery = playery - 1;
    }
    if(arduboy.pressed(DOWN_BUTTON)) {
        playery = playery + 1;
    }
    arduboy.drawBitmap(playerx, playery, player, 16, 16, WHITE);
    arduboy.display();
}

For Loop

Okay, remember how I said that loops tell the computer to repeat a set of actions over and over again? I’m going to teach you about one called the for loop. This loop allows you to repeat a set of instructions for a specified amount of times.

Why is this important? We want to make a background for this game, but the background image that we have is too small to fill the entire screen, so we’ll print it many times in different places until it fills up the entire screen.

Let’s say we want to use the arduboy.print(); function to print your name 10 times in a row. We’d have to use a loop keyword and we’ll need a variable to keep track of how many times we’ve printed so far, and a line of code to increase that variable every time we loop through. Luckily, the for loop has a lot of that built-in. Take a look at it, below:

for( int counter = 0; counter < 10; counter = counter + 1 ) {
    arduboy.print("crait");
}

Alright, again, let’s break this down:

  • for: This is kinda like a function. It lets the Arduboy know you want to use a for loop.
  • int counter = 0;: Whenever you run a for loop, you’ll need to initialize/set a variable. We create a counter variable that is equal to 0. This code gets executed before the loop is entered.
  • counter < 10;: This is the check to see if the loop should run or not. If counter is less than 10, then it should run.
  • counter = counter + 1: After all of the instructions inside of the loop are followed, this code is ran. It increases counter by 1. Eventually, counter will grow big enough so that the loop does not execute anymore.
  • { }: Anything inside of these braces will be considered part of the loop and only be executed when the Arduboy is running this for loop.

Instead of this code printing my name 10 times, we can have it count!

for( int counter = 0; counter < 10; counter = counter + 1 ) {
    arduboy.print( counter );
}

If we run the above loop, the Arduboy would print out the numbers 0 to 9! You can change the number of times it will loop, you can change what number the counter starts with, and you can even change how many numbers counter is increased by every time the loop is run.

Tile Background

Alrighty! Let’s get the background implemented! We’re almost done!

The Arduboy’s screen resolution is 128 pixels wide by 64 pixels tall, which means if we use a background image of 8 pixels by 8 pixels, we would have 16 columns wide by 8 rows high.

Let’s tile the background image 8 times across the top of the screen.

for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
    arduboy.drawBitmap( backgroundx, 0, background, 8, 8, WHITE );
}

Do you understand what’s going on, here? :slight_smile: Notice that the backgroundx variable is used to count the loop, but also used when drawing the background image. Since we want to span the background across the width of the screen, we want to count up to 128. Because we want to put a new image every 8 pixels, we’ll increase it by 8 every time a tile is drawn.

Add this code before you draw your sprite and run it on your Arduboy. It should appear like this:

Next, let’s add another for loop. Instead of doing this after the previous loop, we’ll have this loop inside of the other!

for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
    for( int backgroundy = 0; backgroundy < 64; backgroundy = backgroundy + 8 ) {
        arduboy.drawBitmap( backgroundx, backgroundy, background, 8, 8, WHITE );
    }
}

To summarize the above code, for each column on the screen, we will draw several rows of backgroundimages until the screen is full. This is the result:

Here’s the full code:

//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
int playerx = 5;
int playery = 10;
const unsigned char background[] PROGMEM  = {
    0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
    0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f, 
};
void setup() {
    arduboy.begin();
    arduboy.clear();
}
void loop() {
    arduboy.clear();
    if(arduboy.pressed(LEFT_BUTTON)) {
        playerx = playerx - 1;
    }
    if(arduboy.pressed(RIGHT_BUTTON)) {
        playerx = playerx + 1;
    }
    if(arduboy.pressed(UP_BUTTON)) {
        playery = playery - 1;
    }
    if(arduboy.pressed(DOWN_BUTTON)) {
        playery = playery + 1;
    }
    //For each column on the screen
    for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
        //For each row in the column
        for( int backgroundy = 0; backgroundy < 64; backgroundy = backgroundy + 8 ) {
                //Draw a background tile
            arduboy.drawBitmap( backgroundx, backgroundy, background, 8, 8, WHITE );
        }
    }
    //Draw player sprite
    arduboy.drawBitmap(playerx, playery, player, 16, 16, WHITE);
    arduboy.display();
}

Clean Up

Uh, oh! You notice the problem? Our character’s face is clear and you can see the background though it. How can we fix that? Let’s just simply draw a black square behind it to block the background images. Put this before we draw the player’s sprite.

arduboy.fillRect(playerx, playery, 16, 16, BLACK);

Finished Code

Here it is! Run this code on your Arduboy to make sure it works properly! If it does, then feel free to modify this code to start making your own game! :smiley:

//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
int playerx = 5;
int playery = 10;
const unsigned char background[] PROGMEM  = {
    0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
    0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f, 
};
void setup() {
    arduboy.begin();
    arduboy.clear();
}
void loop() {
    arduboy.clear();
    if(arduboy.pressed(LEFT_BUTTON)) {
        playerx = playerx - 1;
    }
    if(arduboy.pressed(RIGHT_BUTTON)) {
        playerx = playerx + 1;
    }
    if(arduboy.pressed(UP_BUTTON)) {
        playery = playery - 1;
    }
    if(arduboy.pressed(DOWN_BUTTON)) {
        playery = playery + 1;
    }
    //For each column on the screen
    for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
        //For each row in the column
        for( int backgroundy = 0; backgroundy < 64; backgroundy = backgroundy + 8 ) {
                //Draw a background tile
            arduboy.drawBitmap( backgroundx, backgroundy, background, 8, 8, WHITE );
        }
    }
    //Draw black square
    arduboy.fillRect(playerx, playery, 16, 16, BLACK);
    //Draw player sprite
    arduboy.drawBitmap(playerx, playery, player, 16, 16, WHITE);
    arduboy.display();
}

What’s Next?

What’s next? I’ll teach you how to make your own Pong game from scratch!! Click here to go check it out!

This tutorial is copied and abridged from the original by Jonathan Holmes.

Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait30 . I’d greatly appreciate that. :smile:

Make Your Own Arduboy Game – Your First Game!

This is Part 5 in a series on learning how to program your own Arduboy game. If you have skipped the previous parts, please read over Part 1Part 2Part 3 and Part 4.

Your Game

I think you’ve got all the skills you need to make your first game! This game will be a number guessing game where the Arduboy picks a random number and the player has 7 attempts to guess the number. After each guess, the Arduboy will tell the player a hint. If the player guesses right, the player wins!

Starting Code

Okay, let’s start a new project. Open up the Arduino IDE and go to File > New. In the new window, add some comments at the top that include your name and the title of this game.

Whenever I make a new game, the first things I do are: 1) Include the Arduboy library, 2) Create a new Arduboy object, 3) Prepare the setup() and loop() sections.

Here’s what the code looks like when we’re ready to begin:

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
  arduboy.begin();
  arduboy.clear();

}

void loop() {
  arduboy.clear();

  arduboy.display();
}

Setting Up Variables

For our game, we need to set up some variables. We need one to keep track of how many attempts the players has left, what the number the player is guessing, what number the Arduboy picked, and one to know if the player has won or not.

At this point, you only know how to use int‘s, so we’ll continue using them. In the next part, I’m going to teach you about more of them.

Anyway, let’s initialize the variables by adding this code before setup():

int playerwin;
int attempts;
int guessednumber;
int randomnumber;

Inside of setup(), let’s assign these variables to 0.

playerwin = 0;
attempts = 0;
guessednumber = 0;

randomnumber isn’t supposed to be 0. Instead, let’s use the following code to assign a random number to it between 1 and 100;

srand(7/8);
randomnumber = 1 + rand() % 100;

This is some wizardry if you don’t know much about computer programming. But keep following these tutorials and we’ll explain them in a later part. :smiley:

Next, we’re going to put most of our game’s code between the arduboy.clear() and arduboy.display()functions. So, put a comment in between them so we can keep track of where we are. Your code should now look like this:

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
	arduboy.begin();
	arduboy.clear();
	playerwin = 0;
	attempts = 0;
	guessednumber = 0;
	randomnumber = 0;

}

void loop() {
	arduboy.clear();
	//Gameplay code goes here
	arduboy.display();
}

Else

We want our player to know if they have won or not. So, our playerwin variable will help with that. If playerwin is equal to 0, the player has not won. If playerwin is not equal to 0, then the player has won. In our code, we can put 2 if statements in to handle this.

if( playerwin == 0 ) {
	//Ask the player for a number and play the game
}
if( playerwin == 1 ) {
	//Tell the player that they won!
}

There can be some problems from doing our code this way, so I am going to teach you a better method using the if-else statement.

What we want is for our game to run some code if the player didn’t win, yet, and run other code if they did. At the end of an if statement, we can add else and more braces for a new section of code. Confused? Take a look below:

if( playerwin == 0 ) {
	//Ask the player for a number and play the game
} else {
	//Tell the player that they won!
}

Else is just another way to say otherwise. The above code says that if playerwin is equal to 0, then we need to run some code, otherwise we need to run some other code.

Coding The Game

Let’s stick the above if-else statement into the game and see where we’re at:

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
	arduboy.begin();
	arduboy.clear();
	playerwin = 0;
	attempts = 0;
	guessednumber = 0;
	randomnumber = 0;
}

void loop() {
	arduboy.clear();
	if( playerwin == 0 ) {
		//Ask the player for a number and play the game
	} else {
		//Tell the player that they won!
	}
	arduboy.display();
}

Now, we have two sections of code we need to finish: 1) Asking the player for numbers and 2) Telling the player that they won.

Guessing A Number

The player will have 7 attempts to guess a number. So, when their attempts is at 7, we’ll show them a game over screen instead of letting them guess, again. We’ll use another if-else statement.

if( attempts == 7 ) {
	//Game Over screen
} else {
	//Player has more attempts
}

We’ll worry about the Game Over screen in a minute. For now, let’s modify the part with players having more attempts remaining.

The first thing we want to do is handle the buttons. If a player uses the Up or Down button, the guessednumberwill increase or decrease. When the player presses the A Button, the player will actually attempt to guess that number.

if( arduboy.pressed(UP_BUTTON) == true ) {
	guessednumber = guessednumber + 1;
}
if( arduboy.pressed(DOWN_BUTTON) == true ) {
	guessednumber = guessednumber - 1;
}
if( arduboy.pressed(A_BUTTON) == true ) {
	//Guess number
}

This is something we’ve seen before in the previous tutorial. After we handle the button input, we want to display the number being guessed as well as how many attempts the player has left. Add this code in:

arduboy.setCursor(0, 0);
arduboy.print("Attempt: ");
arduboy.print(attempts);
arduboy.print("\n");
arduboy.print("Number to guess: ");
arduboy.print(guessednumber);

You should know what this code does. However, there is something new: arduboy.print("\n"); This line of code creates a linebreak, which is like hitting the Enter button on your keyboard to insert a new line of text.

Let’s go back and add one more if-else statement in this to handle the player making a guess! :smiley:Remember, if the player guesses the random number, the player will win, otherwise (else) the player use up an attempt.

Remember, when a player wins, we already decided that playerwin would be changed from 0 to another number! Change the A Button code to this:

if( arduboy.pressed(A_BUTTON) == true ) {
	if( guessednumber == randomnumber ) {
		playerwin = 1;
	} else {
		attempts = attempts + 1;
	}
}

Makes sense, right? :slight_smile: Here’s what the code should currently look like! We’re almost done!

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
	arduboy.begin();
	arduboy.clear();
	playerwin = 0;
	attempts = 0;
	guessednumber = 0;
	randomnumber = 0;
	srand(7/8);
	randomnumber = 1 + rand() % 100;
}

void loop() {
	arduboy.clear();
	if( playerwin == 0 ) {
		//Ask the player for a number and play the game
		if( attempts == 7 ) {
			//Game Over screen
		} else {
			//Player has more attempts
			if( arduboy.pressed(UP_BUTTON) == true ) {
				guessednumber = guessednumber + 1;
			}
			if( arduboy.pressed(DOWN_BUTTON) == true ) {
				guessednumber = guessednumber - 1;
			}
			if( arduboy.pressed(A_BUTTON) == true ) {
				if( guessednumber == randomnumber ) {
					playerwin = 1;
				} else {
					attempts = attempts + 1;
				}
			}
			arduboy.setCursor(0, 0);
			arduboy.print("Attempt: ");
			arduboy.print(attempts);
			arduboy.print("\n");
			arduboy.print("Number to guess: ");
			arduboy.print(guessednumber);
		}
	} else {
		//Tell the player that they won!
	}
	arduboy.display();
}

Game Over Screen

The Game Over screen is pretty easy. We need to put 2 things into the Game Over section: 1) Tell the player they lost and what the correct number actually was, and 2) Let them push A to restart the game. We already know how to tell the player that they lost:

arduboy.setCursor(0, 0);
arduboy.print("You lost!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);

Easy, right? When the player presses the A Button, we want the variables to reset and find a new random number. Here’s what that code looks like.

if( arduboy.pressed(A_BUTTON) == true ) {
	randomnumber = 1 + rand() % 100;
	attempts = 0;
	playerwin = 0;
}

Win Screen

The Win screen will look almost identical to the Game Over screen. Let’s add this code to the Win screen:

arduboy.setCursor(0, 0);
arduboy.print("You won!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true ) {
	randomnumber = 1 + rand() % 100;
	attempts = 0;
	playerwin = 0;
}

Uh, Oh!! There’s A Problem!

Uh, oh!!! :open_mouth::sweat: There’s a problem… We’re almost done, but there’s a problem that I specifically avoided telling you about. Go ahead and run this code on your Arduboy and see if you can figure out what it is! If you’ve done the previous tutorials in this series, you may have already figured it out!

Here’s what the code should look like so far:

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
	arduboy.begin();
	arduboy.clear();
	playerwin = 0;
	attempts = 0;
	guessednumber = 0;
	randomnumber = 0;
	srand(7/8);
	randomnumber = 1 + rand() % 100;
}

void loop() {
	arduboy.clear();
	if( playerwin == 0 ) {
		//Ask the player for a number and play the game
		if( attempts == 7 ) {
			//Game Over screen
			arduboy.setCursor(0, 0);
			arduboy.print("You lost!");
			arduboy.print("\n");
			arduboy.print("Correct Number: ");
			arduboy.print(randomnumber);
			if( arduboy.pressed(A_BUTTON) == true ) {
				randomnumber = 1 + rand() % 100;
				attempts = 0;
				playerwin = 0;
			}
		} else {
			//Player has more attempts
			if( arduboy.pressed(UP_BUTTON) == true ) {
				guessednumber = guessednumber + 1;
			}
			if( arduboy.pressed(DOWN_BUTTON) == true ) {
				guessednumber = guessednumber - 1;
			}
			if( arduboy.pressed(A_BUTTON) == true ) {
				if( guessednumber == randomnumber ) {
					playerwin = 1;
				} else {
					attempts = attempts + 1;
				}
			}
			arduboy.setCursor(0, 0);
			arduboy.print("Attempt: ");
			arduboy.print(attempts);
			arduboy.print("\n");
			arduboy.print("Number to guess: ");
			arduboy.print(guessednumber);
		}
	} else {
		//Tell the player that they won!
		arduboy.setCursor(0, 0);
		arduboy.print("You won!");
		arduboy.print("\n");
		arduboy.print("Correct Number: ");
		arduboy.print(randomnumber);
		if( arduboy.pressed(A_BUTTON) == true ) {
			randomnumber = 1 + rand() % 100;
			attempts = 0;
			playerwin = 0;
		}
	}
	arduboy.display();
}

Did you figure out the problem? Yeah, it’s kinda unexpected. The Arduboy is too fast when playing a game like this! Playing the game and pressing the A button will blast through the entire menu super fast. Same with pressing Up or Down… The numbers will scroll too fast.

Fixing This Issue

So, we need to do 1 of 2 things to fix this speed issue. We could intentionally slow the Arduboy down, however, when making some games, they will move too slow to be enjoyable. That’s not really an option for us. The second option is to have some kind of variable that keeps track if the player is holding down the button or not. The Arduboy is so fast that if you press the button for a fraction of a second, it will already run through the code several times, thinking you’ve pressed the button several times.

Let’s start by going all the way to the top of our file to initialize some new variables.

int upbuffer;
int downbuffer;
int abuffer;

Next, let’s assign them to be 0 in our setup() section.

upbuffer = 0;
downbuffer = 0;
abuffer = 0;

To keep track of our button presses, we’ll have these variables hold either a 0 or a 1. If the buffer variable is 0, that means that the player did not press that button. If the buffer variable is equal to 1, that means the player did press that button.

Whenever the player lets go of a button, we want to set these variables back to 0.

This means that any time we press a button, we can check to see if the button was being held down or if it was pressed for the first time. If is being held down, we want to pretend like the button was not even pressed and ignore it.

This may be a little confusing for some people to understand, but please bear with me. :bear:

At the end of loop(), let’s add some code that can do that.

if( arduboy.notPressed(A_BUTTON) == true ) {
	abuffer = 0;
}
if( arduboy.notPressed(DOWN_BUTTON) == true ) {
	downbuffer = 0;
}
if( arduboy.notPressed(UP_BUTTON) == true ) {
	upbuffer = 0;
}

Now, every place that we check to see if a button is pressed or not, we need to also check to see if the buffer variable is 0 or 1.

If the button is being pressed and the buffer variable is 0, then we will run the code as well and change the buffer variable to 1.

Replace all the button checks that look like the following…

if( arduboy.pressed(A_BUTTON) == true  ) {

to…

if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
	abuffer = 1;

Notice that the word and allows us to check for multiple things inside of an if statement. Do this with Up and Down Button checks, too!

From…

if( arduboy.pressed(DOWN_BUTTON) == true  ) {

to…

if( arduboy.pressed(DOWN_BUTTON) == true and downbuffer == 0 ) {
	downbuffer = 1;

From…

if( arduboy.pressed(UP_BUTTON) == true  ) {

to…

if( arduboy.pressed(UP_BUTTON) == true and upbuffer == 0 ) {
	upbuffer = 1;

After you do that, test your code, which should look just like this:

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;
int upbuffer;
int downbuffer;
int abuffer;

void setup() {
	arduboy.begin();
	arduboy.clear();
	playerwin = 0;
	attempts = 0;
	guessednumber = 0;
	randomnumber = 0;
	srand(7/8);
	randomnumber = 1 + rand() % 100;
	upbuffer = 0;
	downbuffer = 0;
	abuffer = 0;
}

void loop() {
	arduboy.clear();
	if( playerwin == 0 ) {
		//Ask the player for a number and play the game
		if( attempts == 7 ) {
			//Game Over screen
			arduboy.setCursor(0, 0);
			arduboy.print("You lost!");
			arduboy.print("\n");
			arduboy.print("Correct Number: ");
			arduboy.print(randomnumber);
			if( arduboy.pressed(A_BUTTON) == true  and abuffer == 0 ) {
				abuffer = 1;
				randomnumber = 1 + rand() % 100;
				attempts = 0;
				playerwin = 0;
			}
		} else {
			//Player has more attempts
			if( arduboy.pressed(UP_BUTTON) == true and upbuffer == 0 ) {
				upbuffer = 1;
				guessednumber = guessednumber + 1;
			}
			if( arduboy.pressed(DOWN_BUTTON) == true and downbuffer == 0 ) {
				downbuffer = 1;
				guessednumber = guessednumber - 1;
			}
			if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
				abuffer = 1;
				if( guessednumber == randomnumber ) {
					playerwin = 1;
				} else {
					attempts = attempts + 1;
				}
			}
			arduboy.setCursor(0, 0);
			arduboy.print("Attempt: ");
			arduboy.print(attempts);
			arduboy.print("\n");
			arduboy.print("Number to guess: ");
			arduboy.print(guessednumber);
		}
	} else {
		//Tell the player that they won!
		arduboy.setCursor(0, 0);
		arduboy.print("You won!");
		arduboy.print("\n");
		arduboy.print("Correct Number: ");
		arduboy.print(randomnumber);
		if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
			abuffer = 1;
			randomnumber = 1 + rand() % 100;
			attempts = 0;
			playerwin = 0;
		}
	}
	if( arduboy.notPressed(A_BUTTON) == true) {
		abuffer = 0;
	}
	if( arduboy.notPressed(DOWN_BUTTON) == true ) {
		downbuffer = 0;
	}
	if( arduboy.notPressed(UP_BUTTON) == true ) {
		upbuffer = 0;
	}
	arduboy.display();
}

Hints

After testing your game, you may have realized that it’s just too hard for someone to actually beat. I tried a many times and won only once. It’s almost impossible! :head_bandage:

Let’s make the game a little easier and a little more fun by adding in hints to the player. To start this, let’s create a new variable called lastguess and give it a value of 0.

Every time the player makes a guess, let’s set lastguess to have the same value of their guessednumber.

Look for the line of code where the player uses one of their attempts:

attempts = attempts + 1;

After that line, let’s add the following:

lastguess = guessednumber;

Add a new linebreak after with arduboy.print("\n"); and add a new if-else statement. We’re going to check the player guessed anything, yet.

arduboy.print("\n");
if( attempts == 0 ) {
	//No last guess
} else {
	//Last guess was wrong
}

If there have been 0 attempts so far, then let’s print out “Good luck!” Otherwise, let’s display the last guess. That code should now look like:

arduboy.print("\n");
if( attempts == 0 ) {
	arduboy.print("Good luck!");
} else {
	arduboy.print(lastguess);
}

Our hint will actually to tell the user if lastguess is less than < or greater than > the randomnumber and print that out. That code should now look like:

arduboy.print("\n");
if( attempts == 0 ) {
	arduboy.print("Good luck!");
} else {
	arduboy.print(lastguess);
	if( lastguess > randomnumber ) {
		arduboy.print(" is too high!");
	}
	if( lastguess < randomnumber ) {
		arduboy.print(" is too low!");
	}
}

You’ve seen all of this code before, except for checking if a number is less than < or greater than > another number.

Full Code

Yes! :laughing: You’re finally done!! Test out this code and have fun!

//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;
int upbuffer;
int downbuffer;
int abuffer;
int lastguess;

void setup() {
	arduboy.begin();
	arduboy.clear();
	playerwin = 0;
	attempts = 0;
	guessednumber = 0;
	randomnumber = 0;
	srand(7/8);
	randomnumber = 1 + rand() % 100;
	upbuffer = 0;
	downbuffer = 0;
	abuffer = 0;
	lastguess = 0;
}

void loop() {
	arduboy.clear();
	if( playerwin == 0 ) {
		//Ask the player for a number and play the game
		if( attempts == 7 ) {
			//Game Over screen
			arduboy.setCursor(0, 0);
			arduboy.print("You lost!");
			arduboy.print("\n");
			arduboy.print("Correct Number: ");
			arduboy.print(randomnumber);
			if( arduboy.pressed(A_BUTTON) == true  and abuffer == 0 ) {
				abuffer = 1;
				randomnumber = 1 + rand() % 100;
				attempts = 0;
				playerwin = 0;
			}
		} else {
			//Player has more attempts
			if( arduboy.pressed(UP_BUTTON) == true and upbuffer == 0 ) {
				upbuffer = 1;
				guessednumber = guessednumber + 1;
			}
			if( arduboy.pressed(DOWN_BUTTON) == true and downbuffer == 0 ) {
				downbuffer = 1;
				guessednumber = guessednumber - 1;
			}
			if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
				abuffer = 1;
				if( guessednumber == randomnumber ) {
					playerwin = 1;
				} else {
					attempts = attempts + 1;
					lastguess = guessednumber;
				}
			}
			arduboy.setCursor(0, 0);
			arduboy.print("Attempt: ");
			arduboy.print(attempts);
			arduboy.print("\n");
			arduboy.print("Number to guess: ");
			arduboy.print(guessednumber);
			arduboy.print("\n");
			if( attempts == 0 ) {
				arduboy.print("Good luck!");
			} else {
				arduboy.print(lastguess);
				if( lastguess > randomnumber ) {
					arduboy.print(" is too high!");
				}
				if( lastguess < randomnumber ) {
					arduboy.print(" is too low!");
				}
			}
		}
	} else {
		//Tell the player that they won!
		arduboy.setCursor(0, 0);
		arduboy.print("You won!");
		arduboy.print("\n");
		arduboy.print("Correct Number: ");
		arduboy.print(randomnumber);
		if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
			abuffer = 1;
			randomnumber = 1 + rand() % 100;
			attempts = 0;
			playerwin = 0;
		}
	}
	if( arduboy.notPressed(A_BUTTON) == true) {
		abuffer = 0;
	}
	if( arduboy.notPressed(DOWN_BUTTON) == true ) {
		downbuffer = 0;
	}
	if( arduboy.notPressed(UP_BUTTON) == true ) {
		upbuffer = 0;
	}
	arduboy.display();
}

What’s Next?

Wow! That was a lot! There is still a lot of stuff you need to learn to be a great programmer. I’ll teach you that stuff later, though. The next tutorial is going to be fun! You’ll learn how to make games with images!

This tutorial is copied and abridged from the original by Jonathan Holmes.

Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait8 . I’d greatly appreciate that. :smile:

Make Your Own Arduboy Game – Questions & Button Input

This is Part 4 in a series on learning how to program your own Arduboy game. If you have skipped the previous parts, please read over Part 1Part 2Part 3.

Stopping Robots From Washing Their Hair

Remember in the previous part of this tutorial, I told you about the back of the shampoo bottles? The instructions say:

1. Lather
2. Rinse
3. Repeat

The problem with this is that if you gave these instructions to a robot, it will repeat these steps forever. We need to implement some way to stop the robot from doing that. In computer programming, we can use conditional statements. Conditional statements are basically questions that we ask the computer and if the answer is true, then follow different instructions

1. Lather
2. Rinse
3. If you need to wash your hair again, then Repeat

The first kind of conditional statements you’ll come into contact with are if statements. Like the example above, you can basically ask the computer if something is true, then do something. A robot following the above instructions won’t wash their hair forever since it will eventually be washed.

Buttons

We can also use if statements to test buttons, too! That’s how video games know if you’re pushing buttons. Moving a character may look like this:

1. If the Right Button is pressed, move character right
2. If the Left Button is pressed, move character left
3. Print character picture to screen
4. Repeat

Format

The format for if statements in C/C++ is:

if(something is true) {
    DoSomething();
}

Only if the something is true, then DoSomething(); command will run.

To check if the A Button is pressed, we need to use the arduboy.pressed(A_BUTTON) function. Putting it in the correct format, it will look like this:

if( arduboy.pressed(A_BUTTON) == true ) {
    DoSomething();
}

Notice that we use a double equal sign == instead of just a single equal sign =. You’ll mostly see this inside of conditional statements. Don’t let it scare you! A single equal sign = means that you are assigning a value. A double equal sign == is checking the value. I’ll talk more about this later!

Above, we checked to see if the A Button was being pressed, but we can also check if the A Button is not being pressed!

if( arduboy.pressed(A_BUTTON) == false ) {
    DoSomething();
}

Cool, right?!

Modifying The Code

Let’s go grab that code from Part 3 and modify it:

//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text
//Include the Arduboy Library
#include <Arduboy.h>
//Initialize the arduboy object
Arduboy arduboy;
//Initialize our counter variable
int counter;
//The setup() function runs once when you turn your Arduboy on
void setup() {
  //Start the Arduboy properly and display the Arduboy logo
  arduboy.begin();
  //Get rid of the Arduboy logo and clear the screen
  arduboy.clear();
  //Assign our counter variable to be equal to 0
  counter = 0;
}
//The loop() function repeats forever after setup() is done
void loop() {
  //Clear whatever is printed on the screen
  arduboy.clear();
  //Move the cursor back to the top-left of the screen
  arduboy.setCursor(0, 0);
  //Increase counter's value by 1
  counter = counter + 1;
  //Print out the value of counter
  arduboy.print(counter);
  //Refresh the screen to show whatever's printed to it
  arduboy.display();
}

Remember that counter is our variable that increases forever in our previous code. What we’re going to do is change this code to increase or decrease counter depending on if you’re holding the Up Button or Down Button.

We need to find the line that increases counter and remove it. After we clear the screen with arduboy.clear();, let’s add the following code:

if( arduboy.pressed(UP_BUTTON) == true ) {
    //Increase counter
}
if( arduboy.pressed(DOWN_BUTTON) == true ) {
    //Decrease counter
}

Our code to increase counter was counter = counter + 1; . Using that code, we can decrease it by switching the plus sign for minus sign. To decrease counter, our code will be counter = counter - 1; . Try to plug those in and when you’re done, check to see if it is the same as the completed code, below.

Testing Numbers & Variables

I was going to end the tutorial now, but let’s extend it a little more and tell you about testing numbers!

I told you before that inside of an if statement, you can check to see if something is true or false. But, you can also check the values of variables or numbers.

if( counter == 36 ) {
  arduboy.setCursor(30, 30);
  arduboy.print("Yay!");
}

What do you think would happen if you ran the above code? if counter is equal to 36, then the Arduboy will set the cursor and print out “Yay!” to the screen. Notice that you can put multiple lines of code inside of the ifstatements.

Add that right after the other if statements that check for the Up and Down Buttons.

The Completed Code

:smiley:

//Jonathan Holmes (crait)
//October 21st, 2016
//Button Test
//Include the Arduboy Library
#include <Arduboy.h>
//Initialize the arduboy object
Arduboy arduboy;
//Initialize our counter variable
int counter;
//The setup() function runs once when you turn your Arduboy on
void setup() {
  //Start the Arduboy properly and display the Arduboy logo
  arduboy.begin();
  //Get rid of the Arduboy logo and clear the screen
  arduboy.clear();
  //Assign our counter variable to be equal to 0
  counter = 0;
}
//The loop() function repeats forever after setup() is done
void loop() {
  //Clear whatever is printed on the screen
  arduboy.clear();
  //Check if the UP_BUTTON is being pressed
  if( arduboy.pressed(UP_BUTTON) == true ) {
    //Increase counter by 1
    counter = counter + 1;
  }
  //Check if the DOWN_BUTTON is being pressed
  if( arduboy.pressed(DOWN_BUTTON) == true ) {
    //Decrease counter
    counter = counter - 1;
  }
  //Check if counter is equal to 36
  if( counter == 36 ) {
    
    arduboy.setCursor(30, 30);
    arduboy.print("Yay!");
  }
  //Move the cursor back to the top-left of the screen
  arduboy.setCursor(0, 0);
  //Print out the value of counter
  arduboy.print(counter);
  //Refresh the screen to show whatever's printed to it
  arduboy.display();
}

Running The Code

Run the code and see what happens when you push the Up and Down Button!

What’s Next?

You realize you already have all the skills to make a fun game, right? In the next part of this tutorial series, I’ll be walking you through the steps of making a game with all the skills that we’ve covered so far! :smiley:

This tutorial is copied and abridged from the original by Jonathan Holmes.

Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait8 . I’d greatly appreciate that. :smile:

Make Your Own Arduboy Game – Storing Data & Loops 

This is Part 3 in a series on learning how to program your own Arduboy game. If you have skipped the previous parts, please read over Part 1 and Part 2.

Variables

Computers work a lot with calculations and data. To make most video games, you’re going to need to be able to store data, like high scores, or player location, or lives remaining. In order to remember data, a computer must set aside some memory to put that data into. Then, the computer can be told to change the data stored there.

Loops

Remember how I said that computers have to be given specific instructions? Ever notice how the back of shampoo bottles say to 1. Lather2. Rinse3. Repeat? If a computer were given those instructions, they would be stuck in an infinite loop of lathering, rinsing, and repeating. In programming, having instructions repeat in a loop can be very useful. I’ll show you how to use the loop() function to do this.

Getting Started

In this program, we’re going to make the Arduboy keep track of a number and display it to you as it is increased.

Let’s do it! Grab the code from the previous tutorial so that we can build off of it:

//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
  // put your setup code here, to run once:
  arduboy.begin();
  arduboy.clear();
  arduboy.print("Holmes is cool!");
  arduboy.display();
}

void loop() {
  // put your main code here, to run repeatedly:

}

Initialization

Whenever you create a variable, you have to initialize it, which is setting aside memory for the data and giving it a name. You’ve already done this but didn’t realize it. Check out the Arduboy arduboy; line. You initialized an object called arduboy. Objects are a lil’ more complex than I want to get into during this tutorial, but there are different kinds of variables that you can initialize. Here are some: Integers, booleans, characters, objects, doubles, and many more.

We’ll initialize our number that’s going to increase as an integer. This basically means that it’s a whole number, without fractions. Integers will appear as int inside of C++ code.

To initialize a variable, you must put 3 things: The type of variable, the name of the variable, then a semi-colon. Let’s call our variable counter. Here’s the code: int counter; Put it under the Arduboy arduboy; line.

Assignment

Whenever you create a variable, you can give it a value. This is called assignment. We don’t know what counter‘s value is because we never gave it one.

Let’s clean up the code by removing the arduboy.print(); and arduboy.display() functions from setup(). Instead, let’s put the assignment there:

counter = 0;

This line of code is saying that counter‘s value is now equal to 0. Instead of 0, you could put another number, a mathematical formula, or some other things that I’ll explain below.

Here’s what your code should look like:

//Jonathan Holmes (crait)
//October 18th, 2016
//Counter

#include <Arduboy.h>
Arduboy arduboy;

int counter;

void setup() {
  // put your setup code here, to run once:
  arduboy.begin();
  arduboy.clear();
  counter = 0;
}

void loop() {
  // put your main code here, to run repeatedly:

}

Incrementing

Okay, our program will be repeating a few simple instructions over and over again. Basically, we’ll change the value of counter, then display the value of counter, then repeat. To do this, we should add some code into the loop() function.

counter = counter + 1;

This line of code means that you are assigning the value of counter to itself plus 1. Or, in other words, counter‘s value is now equal to the value of counter + 1.

Displaying The Variable’s Value

Now that we have the variable increasing, let’s display it! Remember how we used arduboy.print() to print some text to the screen? Well, we can use that same function to display numbers to the screen, too. Add arduboy.print(counter); .

If you were to run this code as it is, now, then the Arduboy’s screen would fill up with numbers. If we’re going to print something new, we need to be sure to erase what was previously on the screen. We need to add in arduboy.clear(); at the beginning of loop() and arduboy.display(); at the end to display the updated screen.

Have you ever used a type writer? Whenever you type letters, the cursor moves over. The arduboy.print()function works similarly. Every time you use the arduboy.print() function, it moves the cursor over. So we need to reset the cursor to the top of the screen with arduboy.setCursor(0, 0); . I will explain this more in a later tutorial, but just throw that at the top of the loop().

The Completed Code

I’ve added in some comments, but your code should look like the following:

//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

//Include the Arduboy Library
#include <Arduboy.h>
//Initialize the arduboy object
Arduboy arduboy;
//Initialize our counter variable
int counter;
//The setup() function runs once when you turn your Arduboy on
void setup() {
  //Start the Arduboy properly and display the Arduboy logo
  arduboy.begin();
  //Get rid of the Arduboy logo and clear the screen
  arduboy.clear();
  //Assign our counter variable to be equal to 0
  counter = 0;
}
//The loop() function repeats forever after setup() is done
void loop() {
  //Clear whatever is printed on the screen
  arduboy.clear();
  //Move the cursor back to the top-left of the screen
  arduboy.setCursor(0, 0);
  //Increase counter's value by 1
  counter = counter + 1;
  //Print out the value of counter
  arduboy.print(counter);
  //Refresh the screen to show whatever's printed to it
  arduboy.display();
}

Running The Code

Connect your Arduboy to your computer and upload this code to it. Your Arduboy should start counting up!

What’s Next?

In the next tutorial, we’ll be learning about testing the values of variables, booleans, and pressing buttons!

This tutorial is copied and abridged from the original by Jonathan Holmes.

Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait17 . I’d greatly appreciate that. :smile:

Make Your Own Arduboy Game – Printing Text 

This is Part 2 in a series on learning how to program your own Arduboy game. If you have yet to install the Arduino IDE and Arduboy Library,                           please go back to Part 1.

Creating A New Sketch

Using the Arduino IDE, go to File > New. This will create a new window with a new sketch. A sketch is a file with your code in it. Sometimes you’ll hear it called “source code”.

Reviewing Our Code

In that new window, you should see the following code:

void setup() {
  // put your setup code here, to run once:
}
void loop() {
  // put your main code here, to run repeatedly:
}

Whenever you write code, you’re going to put a lot of it inside of braces, which look like { and }. That is to split up different lines of code that occur at different times. You’ll learn more specifics about what those different times are later on. All you need to worry about is that you have some code that will be put into the setup()section and the loop() section. These are called functions, but we don’t need to know much about them right now. All we need to know is that whatever code that’s inside of the setup() function will be run once whenever the Arduboy turns on and whatever code is inside the loop() function will be run later on.

Comments

The next thing I want to bring to your attention are the comments. These are lines of code that are completely ignored. They’re great for adding in notes so that you can read your code easier. I’m going to use them a lot, so I thought we should start with them.

It’s very typical to use comments to explain the purpose of functions, variables, and at the beginning of your code to explain the purpose of your program/game.

Let’s go ahead and add some comments to the top of the program! At the top, add a few new lines of text that starts with two slashes, then your name, date, and the title of this program.

Your code should now look like this:

//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text
void setup() {
  // put your setup code here, to run once:
}
void loop() {
  // put your main code here, to run repeatedly:
}

Those lines of text should turn grey.

Getting Arduboy-Specific Instructions

Okay, that was simple enough, but we need to start adding in our instructions, now. To add in a lot of Arduboy-specific instructions, we need to import the Arduboy Library into our code. Make a new line of code after your comments and add #include <Arduboy.h> . This line of code says that you want to grab a lot of instructions from the Arduboy.h file. There’s nothing more about that that you need to know.

Make a new line after that, and add Arduboy arduboy; . Don’t worry about this too much. Like I said, this is part of getting Arduboy-Specific instructions.

Our code should look like this:

//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
  // put your setup code here, to run once:

}

void loop() {
  // put your main code here, to run repeatedly:

}

The setup() Function

Sweet! I’m glad you got this far. Add the following lines of code inside of the braces of the setup() function:

 arduboy.begin();
  arduboy.clear();
  arduboy.print("Hello");
  arduboy.display();

Notice that each line of code ends in a semi-colon ; . This is because all instructions in C++ need to end in one. Otherwise, the computer will think it’s something else that I’ll explain later.

Next, notice that all of these lines of code include arduboy. at the beginning. This is because our instructions are stored inside of the arduboy library.

Last thing I want you to look at is the parenthesis, ( and ) . All functions have these. Some include things inside of them and some do not.

The arduboy.begin(); function pretty much tells the Arduboy to turn on properly. Once that is done, the next instruction is followed.

arduboy.clear(); tells the Arduboy to erase everything on the screen.

arduboy.print("Hello"); tells the Arduboy to write some text to the screen. Notice that we actually have something inside of the ( and ) this time. To tell the Arduboy what we want to print, we need to it inside of the parenthesis. Any time you’re working with text, you have to put quotation marks around the text, so we gotta do that, too. You can actually put whatever you want inside of those quotations. Maybe play around with it and put your own name into it. :smiley:

Last, we have to tell the Arduboy to actually refresh the screen and show you what you just printed to it. That’s what the arduboy.display(); does.

You’re done!

That’s it! You’ve programmed your first program for the Arduboy! This is what the finished code should look like:

//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
  // put your setup code here, to run once:
  arduboy.begin();
  arduboy.clear();
  arduboy.print("Holmes is cool!");
  arduboy.display();
}

void loop() {
  // put your main code here, to run repeatedly:

}

Installing

Like we did in the previous tutorial, connect your Arduboy with a USB data cable, select the correct port and board, then click the  button to transfer it to your Arduboy!

What’s Next?

Next, let’s learn about storing data and loops! Click here to go to that tutorial! :smiley:

Credits

This tutorial is copied and abridged from the original by Jonathan Holmes.

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait19 . I’d greatly appreciate that. :smile: