hello games parte 3- animación

Pero por el momento, nuestro programa no esta haciendo nada interesante simplemente esta dibujando un circulo en la pantalla. Pero que tal si quisiéramos que el circulo se mueva. Ya vimos que el cambio de valor en una variable, asociada la posición de un objeto, puede permitirnos poner este objeto en deferentes partes de la pantalla. Entonces para hacer que un objeto se anime, tendríamos que hacer que la variable asociada a su posición, o al valor que deseemos alterar, valla variando a medida que corre el programa. 


Para nuestro ejemplo, haré que el circulo se desplace en el eje X, es decir de manera horizontal. Como ya tenemos una variable asociada para la posición en X de nuestro objeto voy a trabajar sobre esta. Recordaran que anteriormente había dicho que el código que esta dentro del draw(), va a ser llamado cada frame del programa, lo que implica que podemos aprovechar esta función para poder hacer cambios en nuestras variables, durante la ejecución.


Para nuestro caso voy a sumarle a al variable, así el circulo se mover hacia la derecha. lo que nos daría un código algo así.


void draw(){
  //se altera la variable de la posicion
  posX=posX+1;
  //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);


  
}




De esta forma, como el codigo de draw esta siendo llamado constantemente y en este código se encuentra la instrucción que le dice a la variable posX que se le sume 1, cada vez que se llame el código de draw se  le sumara 1 a posX y así el circulo será dibujado cada vez más a al derecha.


Habrán visto que para la sumatoria de la variable pues posX=posX+1, esto significa que posX es igual a el valor que tiene más uno. Pero esto también se puede escribir de otras formas más abreviadas, que dicen lo mismo pero es solo para escribir mas rápido el código. Por ejemplo para este código el posX=posX+1 podría haberse escrito posX++, que significa que a posX se le suma uno, esta instrucción también esta de manera negativa, donde se le dice al programa que la variable se le reste uno, este ultimo se muestra de manera variable--, o en nuestro caso posX--. Aunque en nuestro ejemplo el ponerlo negativo haría que el circulo se moviere hacia la izquierda, pero eso se explica un poco mejor adelante. 


Pero estas abreviaciones solo sirven para sumar o restar uno, en caso de querer hacer esto con otras cifras, solo es cuestión de usar el operador +=, que implica que a la variable se le sume una determinada cantidad. Digamos que nuestro código fuese posX=posX+20, esto podría ser abreviado como posX+=20, que implicaría que a posX se le suma a su valor actual 20. Aunque este operador no solo esta para sumar también sirve para cualquier operación aritmética, por lo que existe el -= para la restarle, *= para multiplicar al valor actual y /=para dividir el valor de la variable.


por lo que el draw de el código podría ponerse de esta forma.



int posX;


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


void draw(){
  
  //se altera la varaible de la posicion
  posX+=1;
  //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);

}


La velocidad desde términos físicos, se define como el desplazamiento vectorial de un objeto por unidad de tiempo. Lo que es completamente aplicable a nuestro modelo, dondo vemos que el objeto (el circulo), se mueve 1 pixel cada frame sobre el eje X, que se podría ver como una velocidad de 1px/frame en el eje X. esto implica que si en vez de poner


posX+=1;


pusiéramos


posX+=4;


El objeto se movería mas rápido, porque este ahora estaría sumando 4 px a su posición, lo que implicaría una velocidad de 4px/frame, la cual es más rápida que nuestra antigua velocidad de 1px/frame.

---

más proyectos en flavourmachine.com best way to waste your time