Gat i Ratolí

Joc en Processing: El gat i el ratolí.

Abans de tot.

Hem de llegir els inputs del nostre Joystick amb la lectura analogica, un cop el tenim connectat a l’ordinador.

Codi en Processing

El codi explicat a continuació esta fet amb processing, el programa que ens permetrà crear el nostre joc del gat i ratolí. Creació de variables.

Part 1: Inicialitzacio de les variables

En aquest punt del programa crearem les variables necessàries per al nostre joc, que son les següents:

Tipus serial

myPort: Variable que obtindrà les dades del port sèrie, es a dir el nostre USB amb arduino connectat.

Tipus float

PlayerX i PlayerY: Marquen la posició del jugador.
EnemyX i EnemyY: Marquen la posició de l’enemic que ens perseguirà.
playerSpeedX i playerSpeedY: Marquen la velocitat de moviment del jugador vertical i horitzontal, el mateix amb enemySpeedX i enemySpeedY.
enemySizeX i enemySizeY: Marquen la grandària de l’enemic (per si el volem variar mes endavant).
Muertes: Marca la quantitat de vegades que mor el jugador.

Tipus color

Color: En servira per a donar color alguns elements.

//
import processing.serial.*;
Serial myPort;
//
float PlayerX =250;
float PlayerY =250;
float EnemyX =0;
float EnemyY =0;
//
float playerSpeedX = 0;
float playerSpeedY = 0;
float enemySpeedX = 0;
float enemySpeedY = 0;
float enemySizeX = 20;
float enemySizeY = 20;
int muertes=0;
//
color c= color(100,200,50);
//

En la funcio void setup() establirem la grandaria de la finersta amb el size. I myPort tindra assignats els valors que li hem dit a l’arduino que envii, es a dir, els axis del joystick.

void setup() {
     //  
     size(1000, 600);
     
     //
     myPort = new Serial(this, Serial.list()[0], 9600);
}

Part 2: Creacio de l'escenari

En la funcio void draw(), li assignem el color del fons(background) i utilitza codificacio RGB, en aquest cas hem afegit el color blanc. Tambe crearem el player com a ellipse i el enemic com a rectangle, i per ultim el text, el seu tamany i la seva posicio.

void draw(){
     //
     background(255,255,255);
     
     //
     ellipse(PlayerX, PlayerY, 20, 20);
     rect(EnemyX, EnemyY, enemySizeX,enemySizeY);
     //     
     
     fill(255,0,0);
     //
     noStroke();
     //
     textSize(30);
     text("Muertes:",10,30);
     textSize(27);
     text(muertes,140,30);
     fill(c);
     
}

Part 3: Programacio del joc

A partir d'aqui va tot el que estigui relacionat amb les variables creades, el port serial i l'escenari del joc.

void serialEvent (Serial myPort) {

Part 3.1: Assignacio dels parametres del joystick a variables

En aquesta funcio estem recollint la informacio de la funcio myPort, creem un array que llegira tota la linia del serial, separat per les comes, i en quan entra un salt deixa de llegir el string.
Si el string no es buit, separara la nostra string en tres de diferents, cada vegada que trobi una coma ho afegira al seguent string i es creara sequencialment depenent de quantes comes trobi, en el nostre cas, nomes necessitem la X i la Y.

//
  String inString = myPort.readStringUntil('\n');
  //
  if (inString != null) {
    //
    String[] arrayString = splitTokens(inString, ",");

Part 3.1.1: Moviment

Es calibra desde quin moment es moura el jugador, per a que hi hagi un moviment estable quan movem el joystick, ja que fins que les axis no siguin mes de 900 o menys de 300 no es moura (512 es el valor mitja).
I per últim canviem la posició del jugador sumant-li la velocitat, això fa que en cada lectura que el playerSpeedX o playerSpeedY retorni 1/-1, aquest valor es sumi a l’actual posició, per a que l’objecte es desplaci.

//Moviment Y
    if( float(arrayString[0])>900){        
        playerSpeedY=1;
    }
    else if(float(arrayString[0])<300){        
        playerSpeedY=-1;
    }
    else{
      playerSpeedY=0;
    }
    
//Moviment X
    if( float(arrayString[1])>900){        
        playerSpeedX=-1;
    }
    else if(float(arrayString[1])<300){        
        playerSpeedX=1;
    }
    else{
      playerSpeedX=0;
    }

    PlayerX = PlayerX+playerSpeedX;
    PlayerY = PlayerY+playerSpeedY;

Part 3.2: Enemy

Farem que el nostre enemic es mogui depenent de la posicio del jugador, es a dir, quan el jugador sigui a la dreta de l’enemic, aquest el perseguira en aquella direccio.
Hi ha que dir-li al joc que si el jugador esta en una posicio major o menor de la del jugador, aquest modifiqui la seva posicio cap a on es el jugador.

//persecucio
    if(PlayerX>=EnemyX)
    {
      enemySpeedX=0.8;
    }else if(PlayerX<=EnemyX){
      enemySpeedX=-0.8;
    }else{
      enemySpeedX=0;
    }
    
    if(PlayerY>=EnemyY)
    {
      enemySpeedY=0.8;
    }else if(PlayerY<=EnemyY){
      enemySpeedY=-0.8;
    }else{
      enemySpeedY=0;
    }
    EnemyX=EnemyX+enemySpeedX;
    EnemyY=EnemyY+enemySpeedY;

Part 3.3: Morts

En aquesta part fem que si l’enemic toca al jugador, el comptador de morts es suma 1 punt i aquests dos tornen a reaparèixer des-de una posició aleatòria.

//colisio
   if((abs(PlayerX-EnemyX)<8)&&(abs(PlayerY-EnemyY)<8))
   {
     
     EnemyX=ceil(random(50,975));
     EnemyY=ceil(random(50,575));
     PlayerY=ceil(random(50,975));
     PlayerX=ceil(random(50,575)); 
     muertes++;
   }

Part 3.4: Atravessar l'escenari

Per últim, en aquest pas farem que el jugador pugui traspassar l’escenari, es a dir, que si arriba al punt mes alt de l’escenari tornarà a sota de tot, i simularà un efecte de loop.

//Cambiar de posicion en los limites
   if(PlayerX<=-10){
     PlayerX=1009;
   }
   if(PlayerX>=1010){
     PlayerX=-9;
   }
      
   if(PlayerY<=-10){
     PlayerY=609;
   }
   if(PlayerY>=610){
     PlayerY=-9;
   }
   
   if(PlayerX>=EnemyX)
   {
     enemySpeedX=0.8;
   }else if(PlayerX<=EnemyX){
     enemySpeedX=-0.8;
   }else{
     enemySpeedX=0;
   }

Enllaços

Pagina web oficial de Processing
Mostra del joc.
Mostra de les connexions