Lesson 3
Animation and Moving Things
OK so we drew a little square using a function. By messing around with the function's parameters we changed its location, size, and fill. But awesome video games don't have non-moving shapes. Things move around!
Consider a flip book. By looking at a series of non-moving pictures really fast they look like they are moving. This is actually kinda how a video game makes something move across the screen.
Loop()
Previously we wrote all our code inside setup() which only runs code one time. It is perfect for.... setting things up.
Loop() runs all of its code over and over. It is where you will write most of your code. Let's start changing our code.
First delete everything in setup() except these two lines:
arduboy.begin();
arduboy.clear();
Now add these two lines in between Loop's brackets { and }
arduboy.clear();
arduboy.display();
Now let's put our fillRect( ) function in between clear() and display().
arduboy.clear();
arduboy.fillRect(5, 5, 5, 5, WHITE);
arduboy.display();
If we run this code we should see it looks the same as last lesson, but now we are running the code over and over in the loop() but nothing changes because the code is the same every time.
It would be like running a flip book where every page is the same -- nothing would change or move.
Variables
Right now loop() -- our "flipbook" -- is doing three steps over and over:
Clear the screen with clear()
Look at the code and get the instructions for what to draw.
Draw the screen using display()
Last lesson we learned that by changing the parameters of the fillRect() function we can move the square or change it's size. If we change the parameter to somethings new every "flip" of our "flipbook" it will make it look like it is moving and changing.
First step to do that is to make a variable to control the parameter that deals with the square's X value.
First we need to define a variable.
A variable is like a little bucket that we can fill with information. When we tell the program to check in the bucket, it will find whatever we put in there. We can change what is inside the variable at any time.
Add this line before setup()
int squareX = 5;
int stands for integer. Don't worry about that now.
"squareX" is what we named our variable. It could be named anything but it is nice to name them something that lets you know what it does. In this case, we are going to want it to control the X value parameter of the fillRect() function.
Change the parameter to use the variable we made and not just "5."
arduboy.fillRect(squareX, 5, 5, 5, WHITE);
If you run this code you'll notice that nothing has changed. This is because squareX is = to 5. Exactly what it was before.
Now we can change the parameter by changing our variable.
Push Button -- Change Variable
We want to change the value of squareX when we push a button.
To do that we are going to want to use an if statement. Type the following code into loop().
if (arduboy.pressed(RIGHT_BUTTON)) {
squareX = squareX + 1;
}
An if statement will run only if the right condition is met, otherwise the code will skip right over it.
If the condition is met, then the program will run all the code inside the if statement's { } brackets.
This if statement says: "OK so IF the RIGHT_BUTTON is pressed then add 1 to whatever the current value of squareX is. So... if squareX is say 10.... make it 11. If squareX is 526... make it 527."
Controlling the Speed
Put the code on the hardware and press the button.
The square should ZIP off the screen!
We did it! It moved! A little too fast! Let's make this more manageable.
First add this code in the setup()
arduboy.setFrameRate(60);
This line sets how fast our "flipbook" will flip. We can slow things down or speed things up here...
but only if we add this next line inside the loop()
if (!arduboy.nextFrame()) {
return;
}
This line basically tells the program "Hey.. don't go to the next loop until this one is totally finished."
Now our square doesn't fly off the screen but rather moves at a nice frame rate of 60. Try messing around with the setFrameRate. What happens if you set it to say 10?
Challenges!
Regular Challenge 1: Make the left button move the square to the left.
Regular Challenge 2: Make the square teleport back to (5, 5) by using arduboy.pressed(A_BUTTON)
Hard Challenge: Can you make the square move up and down using the correct buttons?
The Thinking Coder's Super Challenge: Can you make it so the square can't leave the screen? You will have to add && and < or > symbols to your if statements.
The Complete Code
#include <Arduboy2.h>
Arduboy2 arduboy;
int squareX = 5;
void setup() {
// put your setup code here, to run once:
arduboy.begin();
arduboy.setFrameRate(15);
arduboy.clear();
}
void loop() {
// put your main code here, to run repeatedly:
if (!arduboy.nextFrame()) {
return;
}
arduboy.clear();
if (arduboy.pressed(RIGHT_BUTTON)) {
squareX = squareX + 1;
}
arduboy.fillRect(squareX, 5, 5, 5, WHITE);
arduboy.display();
}