hello games parte 2 - variables

en el post anterior el código quedo algo así:

void setup(){

  

  

  size(400,400);

  smooth();

}

void draw(){

  background(217,71,135);

  fill(255,255,255);

  //este sera el personaje

  strokeWeight(4);

  stroke(255,180,20);

  ellipse(200,200,40,40);

  

  //se selecciona el nuevo color

  fill(0,0,255);

  //se colorean los bordes de rojo

  stroke(255,0,0);

  //se dibuja un cuadrado en la pos 100,100

  //este cuadrado es de relleno azul y con bordes rojos

  rect(100,100,30,30);

  

}

Pero parte de este código fue solo para dar algunos ejemplos de como dibujar elementos. Así que eliminaremos algunas partes para seguir con la construccion del juego y la vamos a dejar de esta forma:

void setup(){

  

  

  size(400,400);

  smooth();

}

void draw(){

  //se pone un fondo rosa

  background(217,71,135);

  //se dice que se use blanco como relelno para las figuras

  fill(255,255,255);

  //se dice que no se pongan bordes a las figuras a dibujar

  noStroke();

  //se dibuja el circulo, el que seria nuestr personaje

  ellipse(200,200,40,40);

  

}

En este momento lo único que hace el programa es dibujar un circulo blanco de 40x40 pixeles en el centro de una pantalla rosa. Recuerden que si quieren cambiar las dimensiones del circulo solo es cambiar los últimos dos números de el comando ellipse(). así que si se quiere tener un ovalo no se pondría ellipse(200,200,40,40); sino ellipse(200,200,10,45); así la elipse será delgada en su ancho extensa en su largo.

Pero por el momento, en nuestro programa solo se están dibujando los elementos y no sucede nada mas, pero que tal si quisiéramos animarlos.  Para esto tendríamos ya que empezar a trabajar con variables. Las variables en la programación son iguales que en las matemáticas, simplemente son un valor que no es fijo, es decir que puede variar a medida que pase el tiempo.

En este momento el circulo se esta dibujando así ellipse(200,200,40,40); eso significa que siempre se va a dibujar de 40x40 pixeles en la posición X,Y de 200,200. Pero si dijéramos que uno de los valores del comando fuera variable y fuese algo como esto ellipse(X,200,40,40); eso implicaría que se dibujaría un circulo de 40x40 pixeles en la altura en Y de 200 pixeles y estaría ubicado en algún lugar en X, es decir que su posición de manera horizontal es indefinida y puede variar.

Pero supongo que varios se preguntaran como se expresa esto en programación de manera en que lo entienda el computador. Pues no es muy complicado, la variable en el computador se maneja como un espacio de memoria en el sistema que puede tener información y la cual puede ser alterada, esto significa que para usar una variable en no de nuestros programas hay que decirle al computador que se necesita abrir un espacio en la memoria para guardar unos datos, esto se llama declaración de variables, en este punto es donde se dice como se va a llamar la variable, que tipos de datos va a albergar (números enteros, decimales, letras, 

imágenes, sonidos). 

Para ver un ejemplo de esto vamos a hacer que el circulo de nuestro programa se mueva a la derecha. Para esto primero habrai que declara las variables, es decir abrir el espacio en la memoria para la variable. que seria algo así:

//se dice que se crea un variable que se va a llamar posX que 

//tendrá inicialmente un valor de 

//200 y que va a ser de tipo entero.

int posX=200;

void setup(){

  código...

}

void draw(){

código...

}

La variables siempre se deben declarar antes del setup(), hay ciertos casos que lo pueden poner dentro del draw el setup o dentro de unos segmentos de código llamados, métodos o funciones, pero eso es mas avanzado y se vera en otros posts más adelante. Por el momento solo declaren las variables antes del setup() como en el ejemplo. También Es bueno que sepan que una variable no necesariamente requiere de valor inicial, el código de nuestro programa podría ser algo así.

//se dice que se crea un variable que se va a llamar posX de tipo entero pero no se dice //cuanto vale

int posX;

void setup(){

//se el asigna el valor de 200 a la variable

posX=200;

 código...

}

void draw(){

código...

}

Poner lo anterior es legal para processing y seria total mente valido, lo diferente es que la variable al momento de ser creada no tiene valor inicial, no ballan a confundir esto con que la variable valga cero o algo así, porque no es así si una variable no vale nada es igual a null, es decir a nulo, porque en los computadores 0 se considera como un valor, como un tipo de número. Algunas veces es preferible inicializar la variables y otras no, pero eso depende del programa que se este haciendo, pero en mi opinión, siempre o al menos la mayoría de los casos, es mejor darle un valor inicial a la variable.

La forma de manejar las variables puede cambiar entre lenguajes, dependiendo como se declaren, en algunos lenguajes se puede hacer que no se puedan modificar, que solo se puedan leer por algunas partes del programa o puede que no se requiera decir de que tipo es la variable, pero todo esto depende es del lenguaje que se maneje. Aunque lo que si es igual en todos los casos, es que todas estas características (si se puede leer, escribir, de que tipo es, etc), son todas estipuladas al momento de declarar la variable, es decir cuando se crea.

Pero la variable no esta haciendo nada por el momento, si vale 200, pero eso no esta haciendo ningún cambio en nuestro programa. pero si digamos se la asignamos a a la posición en X del circulo, va a comenzara a tener alguna función en nuestro programa.


void draw(){
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);

  }

Con la variable controlando la posición en X del circulo, significa que al cambiar el valor de la variable el circulo se  pondrá en un sitio diferente. Para ver esto se puede cambiar el valor de posX digamos a 300, lo que debería hacer que el circulo se dibujara más hacia la derecha. 

Además una variable puede ser usada para varios propósitos por ejemplo que tal que quisiéramos poner un cuadrado en la misma posición X, pero en otra altura. En ese caso se podría poner el cuadrado en la altura deseada y para su posición en X ponemos la variable. Lo que daría un código así.


void draw(){
  
  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);

 //se dibuja un cuadrado en la misma posicion en x que el                      //circulo pero en otra altura
  rect(posX,300,20,20);
}

Aunque esto ultimo del cuadrado no lo necesitaremos por ahora en el programa, simplemente era para dar ejemplos de como utilizar variables. Por  lo que nuestro código por el momento quedaría algo así.



int posX;


void setup(){
  
posX=300;
  
  size(400,400);
  smooth();
}


void draw(){


  //se pone un fondo rosa
  background(217,71,135);
  //se dice que se use blanco como relelno para las figuras
  fill(255,255,255);
  //se dice que no se pongan bordes a las figuras a dibujar
  noStroke();
  //se dibuja el circulo, el que seria nuestr personaje
  ellipse(posX,200,40,40);


}

---

más proyectos en: flavourmachine.com