Learning to talk to Pokitto


#1

This is the start of (hopefully) a long post about me learning C++ to make games, I got a Pokitto during the Kickstarter and started writing in the Mbed online ide. Since my coding knowledge only included VB and Basic i had to learn everything at once.

All actions I did where on a intel i5 with windows 10 using a USB hub to connect Pokitto.

I will try to create sections regarding various topics i encountered that later can or could be used as guide for newcomers.

Not sure where to place this so for now it is in Uncategorized.

#1. Assembling Pokitto. (added 6-4-2018)

The assembly of Pokitto is not very complex, i had no problems assembling it. Thanks to the Forums i knew that the Display ribbon cable should be properly inserted or Pokitto doesnt work. Closing the case whitout moving the buttons is a bit tricky, i kept the top half pointing down during the closing to avoid buttons shifting. But you can use tape to keep them in place.

After that, charge it for at least an hour since there is a low charge in the battery (because of shipping) If it is fully charged the Yellow charging indicator turns off. At this point i did wonder if i had a solid color case, could i see the led ?

#2. Putting a .Bin on it.

I Downloaded this : [Testing]LOADER & test program for Pokitto and placed the Feelgood.snd on a 2 gb SD card. But how do i get the .Bin on the device ?, better check the Forum.

Ah so i hooked it up to the pc and placed my righthand underneath Pokitto, pressed the flash button and used my left hand to switch it on. At that point my pc made the familiar noise of a usb device connection. The drive showed up in the explorer window as CRP DISABLD, wich seems wierd but is logical when you consider what you are doing. CRP = Copy write protection and it is Disabeld or else how are you going to add a program ?

At that point i saw that it already contained a Firmware.bin file and i was not sure if this should stay or go. So made a copy of it on my pc and deleted it from Pokitto. Turns out that any file you place on pokitto itself is renamed to Firmware.bin. I disconnected Pokitto and this caused the device to reboot, and start the Animation test program. There was a very soft sound coming from the device and the animation seemed to go really fast. Later i discovered that the soft sound Pokitto had was caused by a weak battery because of a faulty battery charging circuit. Luckily Jonne send a new battery over really fast.(again thanks for that!)

#3 Setting up the IDE

Initially i tried the Code::Blocks that was mentioned on the forums, but i could never get that to work properly. I had no experience in C++ therefore i did not know how to set it up as it should and the Tutorials where not complete enough to figure it out. I had to learn more of the C++ language, so i installed Solo-Learn on my mobile and started getting to know the syntax and structure of the language better. After a while the option of a Mbed online ide was availble and this was easier to setup (or did i learn enough of the language already?)

At this point i started to wonder what i could make on Pokitto? I like Race games, and would love to make a OutRun type of game. I checked out how pseudo-3d works and how to program this in c++. There where several games that came availble on the Mbed page so i imported each and everyone into the Compiler to look at the code. Next step: try something myself.

#4 Hello World

The first program most newcomers would try is the Hello world program, this is just about as simple a program can get. When it is run it simply displays: Hello world. I did this too to see if the Mbed was setup correctly, and it was. After that i changed the text and altered the color by taking mygame.display.setColor(3); from here : [Tutorial][Beginner]3.Reading Pokitto buttons

This is fun !, what else can i do ?. There is a Bitmap demo that displays a Pokitto icon in the corner, this shows me how a bitmap looks like in the code and how you call for it.

But a static image is a little boring so could i move it around with the directional buttons ? in this line of code :

mygame.display.drawBitmap(0,0,pokitto_icon); // draw the pokitto_icon graphic

there are 2 numbers, they give Pokitto the information about the location where it should draw the Bitmap. If instead of numbers i place 2 variables in there i can change these by reading the buttons. But what types of data should i use ? Is there a API on the website that can tell me ?, well yes : https://www.pokitto.com/pokittoapi/

that gave me this :

drawBitmap (int16_t x ,int16_t y, const uint8_t * bitmap,uint8_t frame )

So after the this part :

 #include "Pokitto.h"

Pokitto::Core mygame; 

i had to put the names of the values Pokitto had to store, so i can change them with the directional buttons.
I snooped around the examples i had and discovered 2 ways to read buttons:

mygame.buttons.repeat(BTN_A,20)
(mygame.buttons.aBtn())

i checked the Api and there are several ways to handle the buttons, i had to pick the 1 that i would like best and would work for the function i intended it to do.I picked the repeat function because i can keep the directional button pressed to keep the bitmap moving.

I added the buttons in a If construction, everytime i pressed one it should increase or decrease the value that sets the position of the bitmap. But why is the x,y grid not correct ? I am used to a standard x,y,z grid that places the 0,0 position on the left bottom side of the screen. Why is this messed up? Back to the forums i go :smile:

It turns out the pokitto display is rotated on its side, but it still draws stuff from the original origin of the screen which now is in the top left corner. If i want to move down on the screen i have to increase the valeu instead of decrease it. To understand this i made a small program that tells me the coordinates of the screen:


#include "Pokitto.h"

Pokitto::Core pokitto;//link the pokitto core to the name pokitto in the code
Pokitto::Buttons bttn;//link the pokitto buttons to the name bttn

int16_t PositionX = 1;
int16_t PositionY = 1;
int screenW = 219;//the width of the screen - 1
int screenH = 175;//the Height of the screen - 1
int step = 1;

int main () {
    pokitto.begin();
    pokitto.display.persistence = 0;

    while (pokitto.isRunning()) {
        
        if (pokitto.update()) {
            
            //Movement loop:
            
            if (pokitto.buttons.repeat(BTN_LEFT,0)&& PositionX > 0){ //if button left is pressed AND player is not touching the edge
                PositionX = PositionX - step;//Decrease X position player
                }
                  
            if (pokitto.buttons.repeat(BTN_RIGHT,0)&& PositionX < screenW) { //if button right is pressed AND player is not touching the edge
                PositionX = PositionX + step;//Increase X position player
                }
                  
            if (pokitto.buttons.repeat(BTN_UP,0)&& PositionY > 0) {//if button up is pressed AND player is not touching the edge
                PositionY = PositionY - step ;//move player up   
                }
                
            if (pokitto.buttons.repeat(BTN_DOWN,0)&& PositionY < screenH) {//if button down is pressed AND player is not touching the edge
                PositionY = PositionY + step ;//move player down   
                }
                
            if (pokitto.buttons.repeat(BTN_A,0)){//pressing the A button increases the speed by increasing the step value
                    step = 5;
                    }
                    else{
                    step = 1;
                    }
                    
            if (PositionX > screenW){//this is only nessecary because the higher stepspeed can cause the pixel to go of screen, so when that happens we change the value back to the edge of the visable screen.
                PositionX = screenW;
                }
            if (PositionY > screenH){
                PositionY = screenH;
                }
            if (PositionX < 0){
                PositionX = 0;
                }
            if (PositionY < 0){
                PositionY = 0;
                }
                
            
             //End of movement loop
             
             //Draw the pixel
             
             pokitto.display.println (PositionX);
             pokitto.display.println (PositionY);
             pokitto.display.drawPixel(PositionX,PositionY);   
}   
}
} 

This looks nice, i can move stuff around! (if you would like to see something wierd try this code and set the persistence to 1) After this i adapted the bitmap demo, so I can move it around.

#5 Making a game ?

At first I was trying to make a racing game in the style of OutRun, but I realized this might be a bit much for a beginner. So what could I do ? Would a space invaders be doable ? Well maybe but i already had something to move a bitmap around. The idea was to make a cowboy that moves around and can shoot. Not sure what to shoot, perhaps static targes for now and expand on it later.

I used Img2Pok to make a small bitmap of a cowboy looking left and 1 looking right. When the game starts he always looks left. If the right button is pressed i change a value from 1 to zero, as long as this stays zero the right cowboy is displayed. Movement is simply increasing or decreasing a value when a directional button is pressed.

The background could be a bitmap aswell, so i made a bitmap that has the same size as the screen. This is simply drawn on 0,0 coordinates.

But what now?, where did my cowboy go ? All is see is the background, checking the code he is still there but not on the screen. Turns out Pokitto draws stuff on the screen in the order you tell it. I let it draw the cowboy first and then the background on top of that. No cowboy visible anymore, untill i changed the order. Best thing is to draw the main character as last.

Now for the bullet, this needs to use the current coordinates of the bitmap as origin. With a small offset since it needs to start at the pistol and not on top of his hat. Everytime the A button is pressed i get this information and start drawing a short line.

if (mygame.buttons.repeat(BTN_A,20)){  //fire button pressed, 20 ms
               
            if (playerP == 0){//player facing right
                    
                    BulletY = MoveY+(playerH/2)+1;//get current Y position player, plus half height of player so it comes out of the gun instead of his face, plus because pokitto has messed up 0,0 origin
                    BulletX = MoveX+7;
                    BulletR();// start the void BulletR (shouldt i be using a return type to check a hit ?)
                    }

You can see in the code that i call for BulletR(), this should start drawing a short line that moves right across the screen.

mygame.display.drawLine(BulletX,BulletY,BulletX+4,BulletY);
                    BulletX = BulletX +1;

The line is drawn, but instead of a short line moving it is a long line at once. Not what i intended. Time to google, how do i slow down a loop? There is a lot of information about this but i had to implement something called Deltatime. I placed a topic about pacing a game, and recieved some good help but in the end it was to complex for me to write.

There were new games added to pokitto and in one there are numerous bullets used.

These where moving at normal speeds not jumping across the screen in 1 millisecond. There has to be something wrong with my code. I found out that by placing the bullet in a “external” void caused it to be executed by Pokitto as fast as possible. Placing it back inside the Hello World example slowed it down and it moved slowly across the screen. Turns out that drawing objects need to be inside the if (mygame.update()) { loop if you want them to move normally. From the API i found that this is updated at 20 frames per second. By changing this i can change the speed of movement globally.

Whenever Cowboy Steve fires his gun now the bullet starts at his gun and begins to move to the left or the right at a normal speed.

I used a random number to place a target.

  // initialize random seed: 
  srand (time(NULL));

  /* generate number between 1 and 88: */
  step = rand() % screenH + 1;
  
    //generate enemy, still learning for now static rectangle to test hit of bullet and score
    
    X1Bad = step;
    Y1Bad = (step-4);
    X2Bad = (step+4);
    Y2Bad = step;

A rectangle because i read about collision detection on the forum and this seemed the best option for it. Now whenever this fired bullet coordinates matches the targets coordinates it should register a hit and increase the scorecount.

This is where i am at 8-4-2018, i am working out how to build this :

bool AreIntersecting(const aircraft & air, const bullet & bul){ //using collision detection
    return
    !(
        (air.getTop() > bul.getBottom()) || (air.getLeft() > bul.getRight()) ||
        (air.getRight() < bul.getLeft()) || (air.getBottom() < bul.getTop())
    );
}

into my own game, but I am not sure that my games structure would work for it.


#include "Pokitto.h" // include Pokitto library
#include "Player.h" // include the Pokitto icon graphics file

Pokitto::Core mygame; //create Pokitto application instance

int16_t MoveX = 20;//X coordinate, start at 0
int16_t TestX = 0;
int MoveY = 20;//Y coordinate, start at 0
int step;
int screenW = 110;//screen width
int screenH = 88;//screen height
int playerW = 12;//player width
int playerH = 16;//player height
int playerP = 0;//player looking left=0 or right=1
double BulletX;//bullet start location X
int BulletY;//bullet start location Y
uint32_t Starttime;//for setting a pace
uint32_t Endtime;//for setting a pace
bool Bullet = false;//setting a bullet state, true if there is a bullet, false if not
bool hit = false;//to check hits
uint32_t Time = Pokitto::Core::getTime ();
int Score = 0; //Register score
int X1Bad; //hitbox enemy
int X2Bad;
int Y1Bad;
int Y2Bad;




void BulletL(){
    
    
    BulletY = MoveY+(playerH/2)+1;//get current X position player, plus half height of player so it comes out of the gun instead of his face, and pokitto has messed up 0,0 origin
    
            mygame.display.setColor(4);//choose correct color for the bullet
     
            for (BulletX = MoveX ;BulletX > 0;BulletX = BulletX - 1){//get Y position from player and draw a line as long as it doesnt exceed the screenWidth
            mygame.display.drawLine (BulletX,BulletY,BulletX-4,BulletY);//draw the bullet 4 pixels long
            
            }
    // damnn, this happens so fast it looks like a long line...how do i slow it down?
    
}





int main () {//main program



    // Enemy Logic **********************************
    
    // initialize random seed: 
  srand (time(NULL));

  /* generate number between 1 and 88: */
  step = rand() % screenH + 1;
  
    //generate enemy, still learning for now static rectangle to test hit of bullet and score
    
    X1Bad = step;
    Y1Bad = (step-4);
    X2Bad = (step+4);
    Y2Bad = step;
    
    
    
    
    
  
  
  
    // Player logic **********************************
    
    mygame.begin(); // start the application
    mygame.setFrameRate(20); //set correct framerate
    mygame.display.bgcolor=0; // set color 0 as background, by design this should be black
    mygame.display.load565Palette(Cowboy_Steve_L_pal); //load the palette for the image
    
    /* the "while" loop runs as long as the program is running */
    while (mygame.isRunning()) {
        
             
        /* mygame.update() is processed whenever it is time to update the screen , use setframe to alter the update time currently set at 20*/
        if (mygame.update()) {

            //Movement Buttons ********************************
            

            if (mygame.buttons.repeat(BTN_LEFT,0)&& MoveX > 0){ //if button left is pressed AND player is not touching the edge
                MoveX = MoveX - 2;//Decrease X position player
                playerP = 1;
                }
                  
            if (mygame.buttons.repeat(BTN_RIGHT,0)&& MoveX < (screenW-playerW)) { //if button right is pressed AND player is not touching the edge
                MoveX = MoveX + 2;//Increase X position player
                playerP = 0 ;
                }
                  
            if (mygame.buttons.repeat(BTN_UP,0)&& MoveY > 0) {
                MoveY = MoveY - 2 ;//move player up   
                }
                
            if (mygame.buttons.repeat(BTN_DOWN,0)&& MoveY < (screenH-playerH)) {
                MoveY = MoveY + 2 ;//move player down   
                }
             
             
            //draw stuff *************************************

            mygame.display.drawBitmap(0,0,Backdrop);//background first, everything else is drawn on top of that
            mygame.display.setColor(1);
            mygame.display.println (Score);
            
            if (playerP == 0){//0 = looking left
            mygame.display.drawBitmap(MoveX,MoveY,Cowboy_Steve_L); // draw the left steve graphic
            }
            if (playerP == 1){//1 = looking right
            mygame.display.drawBitmap(MoveX,MoveY,Cowboy_Steve_R); // draw the right steve graphic   
            }
            
            
            
            //draw hitbox
            
            if (hit == false){
            mygame.display.drawRectangle(X1Bad,Y1Bad,X2Bad,Y2Bad);
            }
            
            if (mygame.buttons.repeat(BTN_A,20)){  //fire button pressed, 20 ms
               
            if (playerP == 0){//player facing right
                    
                    BulletY = MoveY+(playerH/2)+1;//get current Y position player, plus half height of player so it comes out of the gun instead of his face, plus because pokitto has messed up 0,0 origin
                    BulletX = MoveX+7;
                    Bullet = true;

                    }
                     
            else if(playerP == 1){//player facing left  
                    BulletL();
            }
            }
            
            if (Bullet == true){
                    mygame.display.setColor(1);
                    mygame.display.drawLine(BulletX,BulletY,BulletX+4,BulletY);
                    BulletX = BulletX +1;
                    }
            
            if (BulletX > screenW){//terminate bullet at screenedge
                Bullet = false;
                }
            
            if (BulletX < 0){//terminate bullet at screenedge
                Bullet = false;
                }        
            
            
              
                    
                    /*
                    
bool AreIntersecting(const aircraft & air, const bullet & bul);

bool AreIntersecting(const aircraft & air, const bullet & bul){ //using collision detection
    return
    !(
        (air.getTop() > bul.getBottom()) || (air.getLeft() > bul.getRight()) ||
        (air.getRight() < bul.getLeft()) || (air.getBottom() < bul.getTop())
    );
}

*/
}                 
}                  
return 0; // this is "good programming manners". Program informs it ended without errors
}

I need to understand the structure better, and how to spawn muliple objects from a few lines of code. Since now if i fire left it changes the coordinates of the right bullet.

#6. understanding structures (a bit)

Having the idea in mind to understand the structure in the code better, i started fooling around in the simple code i made for moving a pixel around the screen. My daughter suggested i add a camera so she could make pictures using Pokitto, but that is a bit much for me to try. However i could try to make a etch a sketch so she can draw simple pictures herself.

I checked google to see how I could do this in C++, but there are several ways to do this. On the Pokittoforum i did see a remark about screen persistence. If the screen was not refreshed it would simply leave a track where the pixel has been. Adding a bitmap made it look better already, and I set the grey color of the bitmap to transparant. Check the rest of this post more information.

After that I have two ways of showing a titlescreen, both based on setting a state (title,gameplay,game over)

I wonder if that is enough to make invaders ?, Lets see if i can manage a movable gunturret, and work from that.

#7 Invaders idea

Adapting the Sketchi code, i added a third state to it named Game over.
Using img2pok i made a simple .h file containing a small turret. Now instead of moving just 1 pixel using the arrow keys i can move the Turret bitmap around the screen. But as you might know the original space invaders did not do that so i disabled the Y movement by setting it to a fixed value.

Button logic

void updateGameplay(void)
{
// Input handling
if (pokitto.buttons.repeat(BTN_LEFT, 0))
{
    // Don't go below zero
    if(positionX >= step)
    positionX -= step;
    else
    positionX = 0;
}

if (pokitto.buttons.repeat(BTN_RIGHT, 0))
{
	const int difference = screenW - positionX - TurretW;//10 is width of turret bitmap
	if(difference >= step)//as long as difference is larger then the step (1 in this case)
		positionX += step;
	else
		positionX = screenW - TurretW;//10 is width of turret bitmap
}

Drawing the bitmap

void drawGameplay(void)
{
// Background first, everything else is drawn on top of that
pokitto.display.bgcolor = 1;

//Turret

pokitto.display.drawBitmap(positionX,positionY,Turret);
//pokitto.display.drawBitmap(0,0,Turret);

if (Bullet = true)
{
    pokitto.display.drawLine(XBullet,YBullet,XBullet,YBullet - 6);
    YBullet--;

}

}

Firing the bullet from the turret seems easy enough, whenever I press fire it should spawn a bullet at the current location of the turret. Preferably out of the barrel.

I set up a Boolean named Bullet, that is set to true when the A button is pressed. At the same time the X and Y of the turret is copied to the Xbullet and YBullet. Whenever the Bullet hits something or goes beyond the screen it is switched to False.

But here is a problem, pressing A once spawns a bullet that starts moving up. But pressing it again deletes the first bullet and spawns a new one at the turret. This way i can only fire 1 bullet at a time…

This has to be set up differently, so that each A press spawns a singular bullet that is not deleted.

Not sure how to do that, so to be continued while I learn more stuff.


#2

Wow! Well done!


#3

Thanks, i will keep adding to it :smile:


#4

I made an edit to format the code and fix some of the mild grammar issues. Mainly the lack of capitalised ‘I’.


For future reference:

Inline code:
`this` becomes this

Block code:
```cpp
this
```
becomes

this

The forum uses Markdown, there’s a ‘cheatsheet’ here.


#5

ah thanks, i was wondering about that. But i was editing as well…seems to work tho :smile:


#6

Some of our changes definitely clashed, it missed a bunch of mine. I’ll come back later when you’re not editing.


#7

updated to where i am currently working. There are some things i left out that might get edited in later. Depends a little on reactions, what do you think about it sofar ? Please feel free to critize, it is supposed to improve over time.