Tutorial: Como hacer un juego. 3- Vidas y Puntuación

Hola otra vez. Volvamos a nuestro documento que terminamos en la parte 2, ahora vamos a ponerle vidas y puntaje. Para las dos cosas vamos a crear dos variables llamadas: vidas y puntaje.

Abren el panel de acciones del fotograma (clickeen en el primer y único fotograma que tenemos, presionen F9) supuestamente no tiene que decir nada. Para crear las variables van a escribir esto:

1 2	var vidas:Number = 5 var puntaje:Number = 0

Linea 1

• var vidas:Number = 5 : Por si no quedó claro en el post anterior. Declaro la variable con var. Siempre debemos poner var antes de introducir la variable. Luego le asignamos un nombre (en este caso "vidas"; podrían ponerle cualquier nombre y funcionaría igual pero comúnmente uno le asigna un nombre que esté relacionado con su función, así es más fácil recordarla). Después se define el tipo de variable (Number en el caso que la variable represente un número, String si es un texto y Boolean que es una variable especial) y finalmente el valor.
• var puntaje:Number = 0 : El valor es 0 porque el puntaje en un juego comienza desde el 0. Ya veremos diferentes formas de hacer un sistema de puntuación en nuestro juego.

Puntaje
Una vez definidas las variables podemos pasar a representarlas en el juego, vamos a hacer que sean visibles para el jugador. Seleccionen la herramienta de texto (el atajo es T)

y creen sobre nuestro escenario un cuadro de texto.


Al crear el recuadro presionen Ctrl+F3 así ven las propiedades del texto. Debería aparecer lo que se ve debajo de nuestro escenario. Lo principal que deben hacer es lo señalado con amarillo. Si allí dice Texto Estático o Introducción de Texto clickeen sobre la flecha y seleccionen Texto dinámico. Luego deben darle un nombre a este espacio. Al no ser un símbolo no necesita nombre de instancia si no que necesita la variable con la que se relaciona. Esto se debe introducir en lo señalado con azul, se puede ver un Var: y un recuadro en el que deben introducir la variable. En este caso pongan puntaje.
Lo resaltado con verde son cosas que sirven para perfeccionar la calidad del texto. La que tiene una "A" y una "b" resaltada indica si nuestro texto puede ser resaltado. No se usa mucho esto ya que no creo que alguien quiera copiar su puntaje. La que tiene varios dibujos indica la posición del texto, nada complejo. El botón que dice incorporar mejora la calidad del texto, al abrirlo te da la opción de incorporar varios caracteres como los numerales(0, 1, 2, 3 ...8, 9), todas las letras minúsculas, mayúsculas y otros. Les recomiendo que presionen este botón, seleccionen "Numerales" únicamente y acepten.
Retomando nuestro tema, ahora si prueban el juego (Ctrl+Enter) verán que aparece un 0 donde pusimos el texto dinámico.

Vidas
Ahora hagan lo mismo pero con las vidas. Finalmente pueden indicar con un texto estático, en el cual pueden escribir sin necesidad de una variable, que número representa los puntos y que número representa las vidas y el puntaje. Ahora vamos a ver cómo hacer para que los puntos aumenten. Ya que este número no es un símbolo debemos programar su aumento en las acciones de otro MC. Por eso abran el panel de acciones de nuestro personaje (click en el personaje - F9)
e ingresen estas líneas

8 9 10 11 12	if(this._y >= 400){ _root.puntaje += 10 this._x = random(550); this._y = -30; }

Linea 9

• _root.puntaje += 10 : Como está entre las llaves de la condición this._y >= 400 va a ocurrir cuando se de la condición. Y la acción que expresa esta línea es que el puntaje aumenta en 10 cada vez que el enemigo llega al límite.

Mejora del movimiento del enemigo
Ahora pueden probar el juego y ver que es lo que pasa. Por ahora es bastante simple, no? A mí me parece bastante aburrido que siempre tenga la misma velocidad por eso me parece que deberíamos ponerle una velocidad random. Para eso podemos poner esto:

8 9 10 11 12 13	if(this._y >= 400){ _root.puntaje += 10 velocidad = Math.floor(Math.random()*(15-6)+6); this._x = random(550); this._y = -30; }

Linea 10

• Math.floor : Es la función que redondea un numero hasta no tener decimales. Por ejemplo si tenés el número 3,8754812564 y usas esa función el número que queda (Math.floor(3,8754812564) = 4) es igual a 4 por ser el entero sin decimales más cercano.
• Math.random : Otra función matemática con la que obtenemos un número random entre el 0 y el 1. Podría ser 0.548451158966324784512652 o 0.1542333687415425984, etc...
• (15-6) + 6 : Sí, esto también hay que explicarlo. Forma parte de la fórmula, en la que el 15 es el número máximo que se puede obtener y el 6 es el número mínimo que se puede obtener. Sería como poner: (max-min)+min.
• Puesta en práctica: La fórmula se basa en el número random que salga. Si quisieramos obtener un número entre el 10 y el 20 aplicamos esta fórmula. Digamos que el número random que salió es 0,24857552113648. Este numero se multiplica por la diferencia entre el valor máximo y el mínimo... O sea se multiplica por 10 (20-10 = 10). El resultado es 2,4857552113648. Ahora le sumamos el valor mínimo, o sea 10. En total da 12,4857552113648. Y finalmente lo redondeamos... Como resultado final nos queda 12. Espero que hayan entendido esta fórmula, les sirve para obtener números al azar.

Ahora es más interesante el juego. Ya tenemos el puntaje, es el turno de las vidas. Es algo bastante simple lo que se debe hacer. Agreguen esto en el script del enemigo:

14 15 16 17 18

if(this.hitTest(_root.jugador)){ _root.vidas -= 1 this._x = random(550); this._y = -30; }

Linea 15

• _root.vidas -= 1 : Algo simple... La condición es cuando el enemigo toca al jugador, no creo que deba explicarlo pero bueno lo explico igual. Cuando sucede la condición la variable externa al MC (la declaramos en el fotograma, no en el MC, por eso ponemos _root) llamada vidas se resta a si misma 1. O sea, cada vez que un enemigo te toca, se te resta una vida. Fácil...

Game over
Ya está casi todo, falta el game over me parece. Para crear un game over deben ir primero a las acciones del primer fotograma y poner en la primera línea stop(); (recuerden que el flash en realidad fue hecho para crear animaciones y las animaciones se componen de muchos fotogramas a diferencia de los juegos que suelen tener menos).

1 2 3	stop(); var vidas:Number = 5 var puntaje:Number = 0

Linea 1

• stop(); : Escribimos esto así podemos jugar el juego y luego ver el fotograma que va a contener el game over. Sin esto pasaríamos directamente al próximo fotograma, eso significa que no se podría jugar.

Vamos a crear el fotograma número 2. A la derecha del primero hay uno, pero vacio. Clickeen sobre ese en el que no hay nada y presionen F7.

Debería quedar algo así. Si lo tienen así prosigamos. Hagan algo que identifique el game over. Pueden escribir Game Over o algo así...

Ahora vuelvan al primer fotograma en el que están los personajes. En el MC "jugador" vamos a poner en sus acciones:

1 2 3 4 5 6 7	onClipEvent(enterFrame){ this._x = _root._xmouse this._y = _root._ymouse if(_root.vidas == 0){ _root.gotoAndStop(2) } }

Linea 4

• if(_root.vidas == 0){ : La condición es: si la variable vidas es igual a 0. En flash, cuando se expresa una condición de igualdad siempre se debe poner 2 signos de igual.
• _root.gotoAndStop(2) : Aquí vemos otra función que controla la película. Ya vimos la opción de parar, ahora vemos la opción de IR y PARAR. Si se cumple la condición la película va a la frame n° 2 que si recuerdan es la frame de Game Over.

Supongo que queda todo claro pero si hay algo que no dejen un comentario y se los intento solucionar. En la próxima entrada terminamos definitivamente con el juego.

-Rest