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

Seguir leyendo...

Tutorial: Como hacer un juego. 2- Enemigo

Enemigo

En esta parte vamos a ver como crear enemigos. Vamos a utilizar el documento que ya creamos en la primera etapa de este tutorial. Una vez abierto vamos a dibujar nuestro enemigo.Yo hice algo así:

Una vez dibujado el enemigo lo hacemos MC (F8 - Clip de Película - Punto de registro en el centro - Aceptar). Ahora vamos a ponerle las acciones. Presionen F9 para que aparezca el panel de acciones de nuestro enemigo.

1 2 3 4	onClipEvent(load){ this._x = random(550); this._y = -30; }

Linea 1

• onClipEvent: Introduce el MC.
• load: Lo que introduzca entre las llaves va a suceder cuando el fotograma carga. Vamos a determinar la posición en la que este MC va a aparecer.

Linea 2 y 3

• this._x = random(550): Estamos definiendo la posición horizontal de nuestro enemigo al comienzo del juego (load). Con random(550) vamos a obtener un número al azar entre 0 y 550; o sea que la posición X va a estar entre 0 y 550

• this._y = -30: Ahora definimos la posición Y de forma fija. Al comienzo será -30 (no se va a ver, piensen que el punto límite que vemos es el 0, al poner -30 estamos haciendolo aparecer 30 pixeles arriba del límite).Ahora presionen Ctrl+Enter. Si no aparece nuestro enemigo, todo salió bien. Seguramente quieren el movimiento del enemigo. A hacerlo!
  

1 2 3 4 5 6 7	onClipEvent(load){ this._x = random(550); this._y = -30; } onClipEvent(enterFrame){ this._y -= velocidad }

Linea 5

• enterFrame: Determina las acciones que sucederán en el juego.

Linea 6

• this._y += velocidad: A laa posición Y de este MC, por cada frame, le vamos a sumar la variable "velocidad". Más tarde vamos a definir cuanto es "velocidad". Ej: Pasa una frame y la posición del MC es -30 + "velocidad". Pasa la segunda frame y la posición del MC es -30 + "velocidad" + "velocidad". Si prueban el juego ahora no va a ocurrir nada... Falta darle un valor a "velocidad". Pongan esto:
  

1 2 3 4 5 6 7 8	onClipEvent(load){ this._x = random(550); this._y = -30; var velocidad:Number = 5 } onClipEvent(enterFrame){ this._y -= velocidad }

Linea 4

• var velocidad:Number = 5: Siempre que vamos a crear una variable se debe poner var. Luego se define el nombre de esta (velocidad) y el tipo (Number). Una vez hecho todo esto podemos darle un valor. En este caso le doy 5 pero ustedes pueden poner el número que quieran... Prueben el juego. Nuestro enemigo se mueve! (pero no vuelve a aparecer)
  

Para que reaparezca vamos a escribir esto:

1 2 3 4 5 6 7 8 9 10 11 12	onClipEvent(load){ this._x = random(550); this._y = -30; var velocidad:Number = 5 } onClipEvent(enterFrame){ this._y -= velocidad if(this._y >= 400){ this._x = random(550); this._y = -30; } }

Linea 8

• if(this._y >= 400){: if introduce una condición que la tenemos entre paréntesis. La condición es: si el Y de este MC es mayor o igual (">=") a 400 (puse 400 porque es la altura total de mi documento, adaptenlo al suyo si es necesario). Lo que va entre llaves es lo que ocurre en la condición.Linea 9 y 10
  

• *Ver linea 2 y 3*

Lo único que falta es que pase tambien cuando toca a nuestro querido personaje. Vamos a usar el hitTest, función que detecta el contacto entre dos MC. Primero tenemos que darle un nombre al personaje para que flash lo reconozca en el juego. Clickeen el MC y presionen Ctrl+F3. Ahora a la izquierda de la ventana que apareció tenemos un campo de texto que dice .

Ahí escriban jugador. Este es el nombre que le ponemos al MC y con el que nos vamos a referir en el script.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	onClipEvent(load){ this._x = random(550); this._y = -30; var velocidad:Number = 5 } onClipEvent(enterFrame){ this._y -= velocidad if(this._y >= 400){ this._x = random(550); this._y = -30; } if(this.hitTest(_root.jugador)){ this._x = random(550); this._y = -30; } }

Linea 12

• if: Declara la condición. Entre paréntesis la vamos a poner y entre llaves se pone lo que sucede cuando la condición se cumple.

• (this.hitTest(_root.jugador): La condición, por ser hitTest, está compuesta por tres partes. La primera se utiliza para declarar uno de los dos MC que van a participar del contacto. Luego del punto viene la condición y finalmente entre paréntesis llamamos al nombre de instancia con el _root y lo declaramos.

Linea 13 y 14

• Por ahora vamos a hacer que cuando el enemigo toque a nuestro personaje vuelva a aparecer. Después vamos a poner vidas, etc.Prueben con Ctrl+Enter y miren!
  

Por hoy terminamos, en la próxima entrada vamos a ver como crear vidas, puntaje y más. (ver parte 3)
-Rest

Seguir leyendo...

Tutorial: Como hacer un juego. 1- Movimiento

Hola! Abro esta sección porque me pareció que mucha gente tiene ganas de aprender a hacer juegos pero no puede por varias razones. Voy a utilizar el Adobe Flash CS3 Professional; si tienen el Macromedia Flash Professional 8 o el MX no hay problema ya que me voy a dedicar a ActionScript 2.0 (lenguaje de programación del Flash).Vamos a empezar con algo básico y fácil de hacer: un juego de esquivar. Empecemos desde cero.


Introducción
Flash usa algo llamado Clips de Película para identificar los dibujos que se transforman en parte del juego (un personaje, una barra, el enemigo, etc... siempre son Clips de Película). Estos forman parte de los símbolos. Otros símbolos son los botones y los gráficos. Para crear un Clip de película (desde ahora los vamos a llamar MC) abran el Flash que tengan y clickeen en Archivo de Flash ActionScript 2.0 .

Ahora lo que van a hacer es seleccionar la herramienta pincel y van a dibujar un círculo.


Ahora presionen F8. Les aparecerá algo así:


Lo que nos sirve es lo que está arriba de la linea celeste. No se preocupen si solo aparece esa parte, la otra no es necesaria. En el texto Nombre: escriban Jugador. Si el casillero del Clip de Película está seleccionado y el punto de Registro: seleccionado es el centro clickeen Aceptar.
Ya tenemos nuestro MC. Ahora pasamos al movimiento de este MC que va a ser nuestro "Jugador". Selecciónenlo con la flecha negra y presionen F9. Acaban de abrir el Panel de Acciones. Aquí vamos a poner las órdenes que el Flash va a recibir y ejecutar. La primer linea que se debe escribir en las acciones de un MC es esta:

1 2	onClipEvent(enterFrame){ }

• onClipEvent: esto es un identificador. Como estamos en un MC el identificador que debemos poner es este. Si fuese un Botón el identificador sería on simplemente. Así que recuerden, siempre va onClipEvent en un MC.

• (enterFrame): luego del identificador viene el tiempo. Sí, lo que está entre paréntesis indica cuando van a suceder las acciones. enterFrame es como decir cada vez que pasa una frame. Otros ejemplos son: load (cuando la frame carga, sirve para crear "variables"), mouseDown (cuando el botón izquierdo del mouse es presionado), etc...

• { y }: Esto abre siempre una función. Todo lo que vaya entre "{" y "}" va a modificar algo (onClipEvent = Clip de película) y en un determinado tiempo (enterFrame = dentro del fotograma o frame)

Movimiento
Ya tenemos la base de nuestro código. Ahora vamos a darle el movimiento a nuestro "jugador".
Vamos a hacer que el mouse sea la posición del círculo. Presionen ENTER dos veces en el final de la línea 1 así crean la línea 2 en blanco. Ahora agreguen esto.

1 2 3 4

onClipEvent(enterFrame){ this._x = _root._xmouse this._y = _root._ymouse }

Antes de explicar estas dos líneas nueva tienen que entender bien lo que es el sistema cartesiano del Flash.
Wikipedia define las coordenadas cartesianas así:

Las coordenadas cartesianas son un sistema de referencia respecto de un eje (recta), dos ejes (plano), o tres ejes (en el espacio), perpendiculares entre sí (plano y espacio), que se cortan en un punto llamado origen de coordenadas. En el plano, las coordenadas cartesianas (o rectangulares) x e y se denominan respectivamente abscisa y ordenada, y se representan como (x, y).

Una explicación gráfica:

Como ven, la forma de posicionar los MC en Flash es mediante un sistema de coordenadas. Por ejemplo: el círculo azul tiene coordenadas x = 350 (pixeles) e y = 100 (pixeles), las coordenadas del gris son x = 50 e y = 200 y finalmente el rojo tiene x = 200 e y = 350. De esta forma podemos decir la posición de nuestro MC. Ahora sí paso a explicar las dos líneas nuevas.

Línea 2 y 3: Lo que estamos haciendo ahora es modificar una característica del MC (la posición X e Y). Siempre que se quiere modificar algo de un Símbolo se debe poner el "nombre" del mismo, un punto y luego la característica que se modifica.

• this: Lo principal es el nombre y para resumir flash nos da el "this" para utilizarlo cuando vamos a modificar el mismo MC en el que está el código. Generalmente se menciona el nombre de instancia (ya lo veremos más tarde) pero por ahora utilicemos "this".
• _x o _y: Después del nombre viene la característica. La posición como vimos se compone de la posición vertical(_y) y la horizontal(_x). Una nota; todas las características vienen después de un guión bajo.
• = : Obviamente tenemos que decir, si queremos cambiar algo, a que va a ser igual. Para eso está el signo igual. Nada complicado.
• _root: Se usa para identificar algo que es externo al MC que estamos modificando. Como necesitamos la posición del mouse con respecto al escenario, no al MC, tenemos que poner este "_root".
• _xmouse o _ymouse: Estás son variables especificas. Como supongo que ya deben haber deducido son la posición X del mouse y la posición Y.

Se podría decir que una traducción al español de lo que venimos haciendo sería:
En un MC (onClipEvent), cuando estamos en la frame ((enterFrame)), la posición (_x)X e Y(_y) de este MC(this.) es igual(=) a la posición X(_x) e Y(_y), respectivamente, del mouse(_xmouse y _ymouse).
Supongo que querrán comprobar si esto es verdad... Bueno presionen CONTROL+ENTER y vean que el círculo que hicimos sigue al mouse. Si les parece que tiene algo de retraso lo único que tiene que hacer es aumentar el numero de fotogramas por segundo. Pueden presionar CTRL+J (o van a Modificar-Documento), así abren las propiedades del documento. En el recuadro donde dice Velocidad de Fotogramas cambien el número a 24 o 30. Debería quedar algo así:

Si ya cambiaron a 24 o 30 esto clickeen Aceptar y vean la diferencia si antes estaba demasiado lento. Recuerden guardar este documento porque vamos a seguir modificándolo.
Espero que les sirva. Si quieren seguir con la creación de su juego, la parte 2 ya está en el blog!
-Rest

Seguir leyendo...