Welcome to tutorial 0.2 of 1! In this tutorial we learn how to mutate the previous counting game code into a very basic movement system! (TBC On tutorial 0.23 another day!)
Check out the first tutorial if you havn’t already!
Tutorial 0.1: Tutorial [0.1] Counting program in c++ on the pokitto!
Before we begin, please check back here for links to help you along the way.
LINKS:
Pokitto API
I recommend watching the video now rather than later.
Youtube video on screen coordinates!
Both of these will be invaluable for you and I will include them in future tutorials!
PART 1:
#include <Pokitto.h>
Pokitto::Display display;
Pokitto::Buttons buttons;
Some things you need to include with every program, don’t worry about this just yet.
int moveY = 0;
int sizeX = 8;
int sizeY = 8;
int speedX = 2;
int speedY = 2;
These are integers meaning numbers which are given a name and then value.
void setup(){
}
This is the start of every program. Runs only once.
void update(){
Runs every frame.
display.setColor(C_BROWN);
This sets the colour of whatever is below it.
display.fillRect(0, moveY, sizeX, sizeY);
This creates a rectangle on the screen. Now the next part gets somewhat complex so I’ll break it down real slow and gentle like 
(thispart, 0, 0, 0,)
ignore the other parts for now lets focus in on thispart, this is linked to the X axis of the screen.
(0, moveY, 0, 0)
This is the second part, which is linked to the Y axis of the screen.
(0, 0, sizeX, sizeY)
These are exactly the same thing, except the first one is linked to the horizontal size and the second part is vertical size
display.fillRect(0, moveY, sizeX, sizeY);
so when we put all of this together you get display.fillRect(xAxis, yAxis, width, height);
if (buttons.pressed(BTN_UP)){
moveY = moveY - speedY;
}
if (buttons.pressed(BTN_DOWN)){
moveY = moveY + speedY;
}
}
First we need to have an IF statement, which means IF something is true (or false) then do this, so basically if a button is pressed meaning pressed once then do below.
if (buttons.pressed(BTN_UP)){
moveY = moveY - speedY;
}
In this case we set moveY(y axis) to the number we set and then minus the speed we set speed to, basically its going to move UP because Y down would be positive. Y going upwards on screens is negative (check resource section)
if (buttons.pressed(BTN_DOWN)){
moveY = moveY + speedY;
}
We then set Y to possitive meaning going down the Y axis aka down on the screen.
PART 2:
For the next section of the tutorial I want you to try your luck at making the character also move on the X axis
Remember, this is how you will learn, by experimenting on your own, don’t worry though if you get stuck and feel like giving up I will give the answer below!
[SPOILERS AHEAD]
#include <Pokitto.h>
Pokitto::Display display;
Pokitto::Buttons buttons;
int moveY = 0;
int moveX = 0;
int sizeX = 8;
int sizeY = 8;
int speedX = 2;
int speedY = 2;
void setup(){
}
void update(){
display.setColor(C_BROWN);
display.fillRect(moveX, moveY, sizeX, sizeY);
if (buttons.pressed(BTN_UP)){
moveY = moveY - speedY;
}
if (buttons.pressed(BTN_DOWN)){
moveY = moveY + speedY;
}
if (buttons.pressed(BTN_LEFT)){
moveX = moveX - speedX;
}
if (buttons.pressed(BTN_RIGHT)){
moveX = moveX + speedX;
}
}
So we essentially just copied what we did for Y axis aka vertical movement for X axis aka horizontal movement! Now then, let me go into this further.
if (buttons.pressed(BTN_LEFT)){
moveX = moveX - speedX;
}
This part of the code moves the character DOWN/left of the xAxis
if (buttons.pressed(BTN_RIGHT)){
moveX = moveX + speedX;
}
While this part will move it on the positive of the xAxis meaning to the right of it!
So there we have it! A very simple movement system made out of literally a counting game, you should be very proud of yourselves, you have officially taken the first steps into becoming a pokitto (and pc) game developer!
PART 3:
Now I could just leave it there for you all, you’ve learnt a lot today, you’ve learnt about if statements, how to get button input, to display a shape to the screen, change colours of said rectangle, you’ve learnt about how the x and y axis works, you’ve learnt a bit about the structure of c++ in general, however I have one last brain teaser for you all!
Our little game is all fine and dandy, but unless your age is 92 then I’m guessing you want your little cube to be a bit faster, maybe even smoother? My challenge is simple, use the pokitto API (links below) to find the correct button input to make your character move constantly when you hold a button! I may be repeating myself here, but you’ve been given all of the clues necessary to do this challenge!
Heres what I came up with!
[SOILERS AHEAD]
So, you figured it out? or maybe you’re a curious cat ready to steal a peak, but remember you have to try it yourself to learn.
Here is how it is done.
void update(){
display.setColor(C_BROWN);
display.fillRect(moveX, moveY, sizeX, sizeY);
if (buttons.repeat(BTN_UP,0)){
moveY = moveY - speedY;
}
if (buttons.repeat(BTN_DOWN,0)){
moveY = moveY + speedY;
}
if (buttons.repeat(BTN_LEFT,0)){
moveX = moveX - speedX;
}
if (buttons.repeat(BTN_RIGHT,0)){
moveX = moveX + speedX;
}
lets break it down yooo
if (buttons.repeat(BTN_UP,0)){
So same deal, however we are now using buttons.repeat, this means that it returns true for everytime it is pressed, or for however long you declare it with the number at the end.
0 = forever, it will always return true aslong as you’re holding the button declared.
1 = it will return true for 1 frame
2 = true for 2 frames
ect
So that’s the end of the tutorial, I hope you’ve all learnt a lot, and I hope you have all enjoyed the improvements I’ve tried to make with my tutorials based on my foreknowledge with gamebuino tutorials.
In the next tutorial you will learn how to keep the speed constant while going diagonally and other improvements!
EDIT: All feedback welcome! These tutorials can only improve if you tell me what did and didn’t work about it, the feedback from those using these tutorials to try and learn are invaluable to this process.