Sumas y Restas cíclicas
Este tópico, será visto a lo largo de 2 clases, ya que trabajar con condicionales (IF) es importante, pero la mejor forma de explicarlo es con incrementadores (variables que incrementan su valor interno). De ésta manera podemos hacer que un personaje se mueva solo, o que esté quieto y sea el fondo el que se mueve.
Para empezar, debemos descargar éste archivo que contiene el proyecto vacío de P5 y en esa carpeta poner imágenes de los personajes a usar: En este ejercicio usé una imagen de Raven , una de las Chicas superpoderosas Raven , una de Ironman y alguna para el fondo como esta.
Clase 9.1 - Incrementadores
Un incrementador, es una variable que va contando cada ciclo, por lo tanto su valor cambia de 0 a 1, luego a 2, luego a 3 y así sucesivamente. Para lograrlo debemos crear una variable, en nuestro caso en la línea 1 y 2 tenemos x e y con valores de 200 (podemos poner otros valores).
Con la línea 18, usamos image() para mostrar la imagen de las chicas superpoderosas, si queremos cambiar la imagen (hay varias en la carpeta), simplemente cambiamos el nombre en la línea 11.
Usamos los valores de las variables (x, y) para indicar la posición de la imagen, que como vimos en la línea 1 y 2, tienen un valor de 200 (podemos cambiarlo por supuesto).
Incrementando el valor de x
Para incrementar el valor de la variable x en cada ciclo, utilizamos x=x+1 que expuesto en palabras se podría expresar como:
"Reemplazar el valor de x por el valor anterior mas 1"
Esto significa queen el primer ciclo, x vale 200, en el segundo 201, en el tercero 202, luego 203, 204... etc. Por ello, en cada ciclo, se dibujara la imagen de las chicas en la posicion 201, 202, 203... hasta que se vayan de la pantalla.
Que no se vayan de la Pantalla
Como se ve en la imagen de abajo, moví la linea que dibuja el fondo rosa desde el function Setup() al function draw() porque en el primero se dibuja solo una vez, pero en el segundo, se dibuja continuamente el fondo, luego la imagen, se dibuja el fondo y luego la imagen. De esta manera siempre vemos 1 sola imagen, y evitamos la repetición detrás del personaje.Como vemos en la línea 9, el CANVAS tiene 1200 de ancho, por lo tanto, cuando la posición de la imagen de las chicas supera éste valor, sabemos que la imagen está fuera del canvas (y ya no la vemos). Por ello queremos que si el valor de x supera 1200, vuelva a 0, lo que dará la impresión que sale por la derecha y aparece por la izquierda.
Si (me gusta esa chica)
{ la invito a salir }
{ la invito a salir }
Todos entendemos esa validación lógica, si algo es cierto, entonces ocurre lo que está dentro de las llaves. Si esa condición es falsa, lo que está dentro de las llaves NO OCURRE.
Como vemos en la imagen, tenemos un bloque de SCRATCH en la parte superior (que usamos con los chicos de primero, segundo y tercer grado), con el bloque SI equivalente al IF que usamos nosotros.
Scratch utiliza bloques de colores para diferenciar distintos tipos de funciones, y el bloque celeste es una pregunta si se presionó la tecla ESPACIO. De ser cierta esa condición/pregunta, el bloque violeta hace que el personaje nos diga que presionamos la barra espaciadora.
En nuestro caso, la pregunta se pone dentro de paréntesis, y lo que va DENTRO del if entre llaves { }
Si quieren verlo en funcionamiento, pueden acceder a éste link:
Clase 9.2 Fondo en Movimiento
Este tema se desarrolla en varias clases, así que cuando empiezo éste tema les digo: "Vamos a hacer lo mismo que la clase pasada, pero mucho mas cool".
Es igual a lo que explicamos antes de hecho, movemos una imagen, y cuando sale de la pantalla, la volvemos a la posición 0, pero en vez de mover las chicas superpoderosas lo hacemos con la imagen del fondo.
Para empezar, ponemos las dos imágenes en el funcion draw(), la primera es el fondo en la posición 0,0 y la segunda es ameo que contiene las chicas.. en cualquier posición, yo puse 300,300 pero ustedes si quieren pueden usar mouseX, mouseY para moverlas con el mouse (como hicimos en clases anteriores).
Luego se le da a la primer imagen un tamaño grande para que cubra el canvas, en mi caso, la línea 9 contiene el createCanvas(1280, 800) por lo tanto en la línea 18, donde dibujo la imagen del fondo uso esos mismos números para que la imagen SE ESTIRE y cubra la pantalla.
En el proyecto hay varias imágenes que podemos usar, la idea es que se acostumbren a reemplazarlas sin demasiado problema (no solo eso, sino que algunos hasta descagran imágenes de la web al proyecto y las cargan en el sketch).
Para hacer algo similar a lo que hacíamos con las chicas superporderosas, pero EN EL FONDO, debemos reemplazar la posición 0,0 por fondox, fondoy, que por el momento tienen valor 0 pero pueden cambiar, lo que generará que el fondo se mueva.
En el ejemplo anterior usamos x=x+1 para incrementar el valor (y hacer que la imagen de las chicas fuera hacia la derecha), para este caso usaremos fondox=fondox-1 para que la imagen del fondo vaya hacia la izquierda. Pero como vemos en la imagen, en algún punto cuando la imagen termina, vemos el patrón de repetición de todas las veces que se dibujó el fondo, lo cual no es ideal.
Para resolver ésto se agrega una segunda imagen de fondo, pero en la posición, se indica fondox+1200, o sea que si el primer fondo cubre la pantalla, la segunda empieza justo en el borde de la pantalla, dejándola afuera de ésta. Cuando se ejecuta, fondox se vuelve hacia los números negativos ya que vamos restándole 10 en cada ciclo, y ambas imágenes de empalman al pasar por el canvas.
De ésta manera, veremos siempre la primer imagen irse a la izquierda hasta que la segunda llene la pantalla, y rapidamente la primera vuelve a su posición inicial, dando la ilusión de fondo continuo. Podemos ver un ejemplo Demo en el link de abajo y el codigo completo.
Luego se le da a la primer imagen un tamaño grande para que cubra el canvas, en mi caso, la línea 9 contiene el createCanvas(1280, 800) por lo tanto en la línea 18, donde dibujo la imagen del fondo uso esos mismos números para que la imagen SE ESTIRE y cubra la pantalla.
En el proyecto hay varias imágenes que podemos usar, la idea es que se acostumbren a reemplazarlas sin demasiado problema (no solo eso, sino que algunos hasta descagran imágenes de la web al proyecto y las cargan en el sketch).
Para hacer algo similar a lo que hacíamos con las chicas superporderosas, pero EN EL FONDO, debemos reemplazar la posición 0,0 por fondox, fondoy, que por el momento tienen valor 0 pero pueden cambiar, lo que generará que el fondo se mueva.
En el ejemplo anterior usamos x=x+1 para incrementar el valor (y hacer que la imagen de las chicas fuera hacia la derecha), para este caso usaremos fondox=fondox-1 para que la imagen del fondo vaya hacia la izquierda. Pero como vemos en la imagen, en algún punto cuando la imagen termina, vemos el patrón de repetición de todas las veces que se dibujó el fondo, lo cual no es ideal.
Para resolver ésto se agrega una segunda imagen de fondo, pero en la posición, se indica fondox+1200, o sea que si el primer fondo cubre la pantalla, la segunda empieza justo en el borde de la pantalla, dejándola afuera de ésta. Cuando se ejecuta, fondox se vuelve hacia los números negativos ya que vamos restándole 10 en cada ciclo, y ambas imágenes de empalman al pasar por el canvas.
De ésta manera, veremos siempre la primer imagen irse a la izquierda hasta que la segunda llene la pantalla, y rapidamente la primera vuelve a su posición inicial, dando la ilusión de fondo continuo. Podemos ver un ejemplo Demo en el link de abajo y el codigo completo.
var fondox=0;
var fondoy=0;
var ameo;
var fondo;
function setup() {
createCanvas(1200,600);
background(255,81,211);
ameo=loadImage("ironman.png");
fondo=loadImage("ciudad2.jpg");
}
function draw() {
image(fondo, fondox, fondoy, 1200, 600)
image(fondo, fondox+1200, fondoy, 1200, 600)
image(ameo, mouseX, mouseY, 300,300)
fondox=fondox-50
if ( fondox <= -1200 ) { fondox=0}
}
Como vemos, es fácil cambiar las imágenes, sólo necesitamos un enemigo y detectar las colisiones para tener un juego, pero eso lo veremos más adelante.