Diferència entre revisions de la pàgina «GatiRatoli»

De Wiket
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «=Joc en Processing: El gat i el ratoli. = Abans de tot. Hem de llegir els inputs del nostre Joystick amb la lectura analogica, un cop el tenim connectat a l’ord...».)
 
(Pàgina blanquejada)
 
Línia 1: Línia 1:
=Joc en Processing: El gat i el ratoli. =
 
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 [https://processing.org 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.<br>
 
 
===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:
 
 
 
 
<u>Tipus serial</u>
 
 
myPort: Variable que obtindrà les dades del port sèrie, es a dir el nostre USB amb arduino connectat.
 
 
<u>Tipus float</u>
 
 
PlayerX i PlayerY: Marquen la posició del jugador.<br>
 
EnemyX i EnemyY: Marquen la posició de l’enemic que ens perseguirà.<br>
 
playerSpeedX i playerSpeedY: Marquen la velocitat de moviment del jugador vertical i horitzontal, el mateix amb enemySpeedX i enemySpeedY.<br>
 
enemySizeX i enemySizeY: Marquen la grandària de l’enemic (per si el volem variar mes endavant).<br>
 
Muertes: Marca la quantitat de vegades que mor el jugador.<br>
 
 
<u>Tipus color</u>
 
 
Color: En servira per a donar color alguns elements.<br>
 
 
<pre>
 
//
 
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);
 
//
 
</pre>
 
 
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.
 
<pre>
 
void setup() {
 
    // 
 
    size(1000, 600);
 
   
 
    //
 
    myPort = new Serial(this, Serial.list()[0], 9600);
 
}
 
</pre>
 
 
===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.
 
<pre>
 
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);
 
   
 
}
 
</pre>
 
 
===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.
 
 
<pre>void serialEvent (Serial myPort) {</pre>
 
 
====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.<br>
 
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.<br>
 
 
<pre>
 
//
 
  String inString = myPort.readStringUntil('\n');
 
  //
 
  if (inString != null) {
 
    //
 
    String[] arrayString = splitTokens(inString, ",");
 
</pre>
 
=====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).<br>
 
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.
 
 
<pre>
 
//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;</pre>
 
 
====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.<br>
 
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.
 
<pre>
 
//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;
 
</pre>
 
 
====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.
 
 
<pre>
 
//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++;
 
  }
 
</pre>
 
 
====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.
 
 
<pre>
 
//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;
 
  }
 
</pre>
 

Revisió de 13:34, 21 maig 2016