Juegos en Flash – Submarinos

15 min

Una variación a los juegos de rebotes, como el juego de tenis que vimos en el primer capítulo, son los juegos de disparos: finalmente movemos objetos desde ActionScript (la pelota), movemos objetos con las teclas o con el ratón (la raqueta) y detectamos colisiones (rebotes).

En este caso cambiaremos a nuestra raqueta por un barco, a la pelota por minas y la raqueta de la computadora serán los submarinos. Las colisiones disparan una explosión en el barco, en lugar de simular un rebote. En esencia no es más que una variación. Uno de los puntos nuevos a revisar en este capítulo serán las "explosiones" y los procesos aleatorios.

Entrando en tema, en este juego tendremos un barco en la parte superior del escenario el cual moveremos con nuestro ratón. En la parte baja del mismo se desplazarán hasta seis submarinos que dispararán sus cargas en forma aleatoria. Nuestro barco descargará su única mina por medio del botón derecho del ratón.

Al hacer contacto la mina con un submarino, este desaparecerá y será nuevamente lanzado en forma aleatoria, tanto en tiempo como en su posición de inicio. Al hacer impacto las cargas de los submarinos con nuestro barco, este estallará y volverá a aparecer. El barco solo puede tener una mina a la vez.

En esta versión simplificada, todos los submarinos se desplazarán de derecha a izquierda a diferentes velocidades. No tendremos marcador. De manera muy sencilla puede usted modificar estas limitaciones, así como aumentar sonidos o efectos al disparar o al estallar las minas.

15 min

Cree la estructura del juego con sus cuatros estados: cargador, inicio, juego y resultados.

Nuestro escenario estará muy simplificado. Tendremos únicamente cuatro capas:

• Capa para ActionScript: Aquí descargaremos la mayoría del código necesario en el juego.

• Etiquetas: Pondremos las etiquetas para el control del flujo del juego.

• Capa de submarinos: Aquí se desplazaran nuestros enemigos.

• Capa del barco: Aquí navegará nuestro valeroso destructor de derecha a izquierda.

Lo que es muy importante son las dimensiones del escenario, pues crearemos a los submarinos fuera de éste. Por medio de un proceso aleatorio los activaremos para que avancen de derecha a izquierda.

Como puede observar, tendremos 550 pixeles de ancho por 400 pixeles de alto. Usted puede en mucho mejorar el fondo del mar, pues la batalla se desarrollará en un simple fondo azul marino.

30 min

Los clips de película también son pocos y muy simplificados. Obviamente no nos detendremos a explicar como hacerlos, a excepción de mostrar la mecánica de las explosiones:

• El clip para ActionScript: Este MC lo utilizaremos como un motor que moverá a los submarinos, los disparos de ambos bandos y a nuestro destructor. Prácticamente es el mismo truco que utilizamos en el juego anterior. Para hacer un clip similar, seleccione un texto y nómbrelo, de preferencia, ActionScript. Conviértalo en un clip de película seleccionándolo y pulsando [F8]. Este clip debe estar fuera del escenario.

• El clip del barco: El barco tiene un efecto de explosión, por lo que su línea de tiempo tiene varios cuadros. Esta explosión puede ser tan compleja como sus capacidades de diseñador gráfico se lo permita (las mías son limitadas).

No olvide la instrucción stop() en el primer cuadro, o de lo contrario su barco se la pasará "explotando". Es muy importante que en las propiedades de vinculación el barco esté identificado como barco y que estén activadas las propiedades que se muestran en el recuadro.

Nota:

Recuerde que las propiedades de vinculación se encuentran al momento de convertir a símbolo en el botón de avanzado o seleccionando con el botón derecho del ratón en el objeto en la biblioteca y seleccionando la opción de vinculación.

Fin de Nota

• Clip del submarino: En este clip también debería haber una explosión, pero en este ejemplo no se incluyó. Usted puede añadirle alguna animación o un sonido.

Recuerde que debe crear el Identificador de vinculación, de lo contrario nunca verá navegar a sus submarinos.

• El clip para el tiro del submarino: En este caso se simplificó a solo un pequeño círculo, pero puede hacerlo tan complejo como usted lo desee. Las mismas restricciones para la identificación y vinculación se cumplen en ambos tiros.

• El clip para el tiro del barco: Aquí se presenta como un rombo del mismo color que el destructor.

Nota:

La mecánica de las explosiones se utiliza para muchos fines en los juegos. Aprovechamos la propiedad de los clips de película que en si son otras pequeñas películas. La linea de tiempo por lo general se divide en los diferentes estados de nuestro clip. Por lo general los primeros fotogramas representan un estado "normal". En el caso del barco es el barco mismo. Es importante que al final de cada estado tengamos una sentencia stop() para que la animación no pase a otros estados. En nuestro caso el segundo estado es el de la explosión, que inicia en el fotograma 2 de la línea de tiempo del clip de película. Es una buena práctica que etiquete el inicio de cada uno de sus estados, ya que si llega a incluir o borrar un fotograma, no tenga que cambiar sus sentencias gotoAndPlay() o gotoAndStop(). Este mismo "truco" lo utilizaremos en otros tipos de juegos, como las cartas o el ahorcado.

Fin de nota

Con estos pocos clips se tiene los elementos gráficos necesarios para el juego. El resto es moverlos y hacerlos explotar por medio de ActionScript.

Procederemos a escribir las rutinas para traer los objetos de la librería, moverlos y detectar las colisiones. Todo el código se escribirá en el fotograma llamado juego de la capa ActionScript.

20 min

En este fotograma almacenaremos las rutinas que serán llamadas en los clips de película, la inicialización de las variables globales y la creación de los submarinos y de los disparos.

• Abra un documento Flash nuevo y modifique sus dimensiones por 550 x 400 pixeles en el Inspector de propiedades o pulse las teclas [Ctrl]+[J]. Cambie el color del fondo a azul marino.

• Seleccione el primer fotograma de la línea de tiempo. En el panel de acciones capture el siguiente código. Si no se encuentra abierto este panel pulse la tecla [F9].

1

2

3

4

5

6

7

8

9

10

/**********************************************************************

Variables globales y constantes

***********************************************************************/

maximoSub = 6;

inicioSub = 660;

largoPantalla = 400;

subNueva = getTimer() + 1000;

velocidadMaxima = 20;

velocidad = new Array(maximoNaves);

estado = new Array(maximoNaves);

Nota:

Siempre verifique el lugar donde captura su código. En la parte inferior del Panel de Acciones podrá observar el objeto o fotograma donde captura el código. Esta revisión le puede evitar varios dolores de cabeza.

En la imagen anterior puede observar que estamos capturando el código en el primer fotograma de la capa AS.

Fin de nota

A continuación analizaremos cada una de las variables que controlan el juego:

• maximoSub: Como puede prever, es el número máximo de submarinos en el juego. Usted puede variar este parámetro, pero tenga en cuanta el tamaño de los mismos para no atiborrar el escenario.

• inicioSub: Es la coordenada en x en píxeles de donde partirán los submarinos. Si recuerda, establecimos un ancho en píxeles de 550, en otras palabras, los submarinos se crean "fuera del escenario". Si cambia el ancho del mismo, tendrá que cambiar esta variable, o si quiere que los submarinos naveguen en ambos sentidos (en este ejemplo sólo lo hacen de derecha a izquierda) deberá tener al menos dos variables.

• subNuevo: Esta variable nos servirá para saber cuando arrancará un nuevo submarino. Almacenamos el tiempo de la computadora con el método getTimer(), y le sumamos 1000, es decir, un segundo, ya que el formato de la función son los milisegundos. Usted puede jugar con este parámetro para que las naves se desplacen en el escenario en forma aleatoria.

• velocidadMaxima: Como se verá más adelante, la velocidad de cada submarino se calcula en forma aleatoria entre 1 y esta variable (15 en el ejemplo). Si usted quiere que cada submarino tenga un peso diferente en un marcador, podría utilizar la velocidad para que cada submarino valga según su velocidad (por ejemplo).

• largoPantalla: Esta variable está en píxeles y si cambia el largo de la misma, tendrá que cambiar la variable.

• velocidad: Los siguientes vectores sirven para controlar a los submarinos. Se escogió esta técnica para evitar código en los clips de los submarionos, pero usted puede modificarlo según sus necesidades. La velocidad puede variar entre el 1 y la variable de "velocidadMaxima".

• estado: En este vector almacenamos una bandera donde "0" es que el submarino no está activo, y el "1" que el submarino está en movimiento.

• tiros: Indica si el tiro del submarino está activo o no.

• tiroBarco: indica si el tiro del barco está activo o no. Si desea tener más de un tiro del barco activo, necesita cambiar esta variable por un vector (o algo similar) y cambiar algunas partes de la programación. También podría variar la velocidad de los tiros. Lo dejamos a su imaginación.

25 min.

Si usted observa, sobre el escenario sólo aparece el clip del barco. Los submarinos, sus tiros, así como el tiro del barco, son creados por medio de programación.

Después de haber capturado las variables globales, teclee el siguiente código (en el Panel de Acciones del primer fotograma).

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

/**********************************************************************************

Crea las naves enemigas

**********************************************************************************/

for(i=0;i70){

break;

}

} while (true);

return y;

}

Ejecute su película con [Ctrl]+[ENTRADA]. Observará en la pantalla que aparecen del lado derecho (y fuera) del escenario los submarinos con sus cargas y la mina del barco. Ahora deberemos proceder a darles movimiento.

10 min

Al igual que en el juego del tenis, aquí utilizaremos una función que lanza y mueve a los objetos. En ella se hace la verificación del método getTimer(), si es mayor que la variable subNuevo (calculada en la función lanzaSubNuevo()) y por último ejecuta la función que hace avanzar a las submarinos y a los disparos, de ahí que a esta función por lo general se le llame "motor".

Capture en el Panel de Acciones del fotograma de la capa ActionScript. , de lo contrario los submarinos NO partirán.

1

2

3

4

5

6

7

8

9

/**********************************************************************************

Lanza a las naves ENEMIGAS y las mueve a lo largo del escenario

***********************************************************************************/

_root.onEnterFrame = function (){

if(getTimer()>_root.subNuevo){

_root.lanzaSubNuevo();

}

_root.avanzaSubs();

}

Ejecute la película con las teclas [Ctrl]+[Enter]. Los submarinos no deberán avanzar. Para ello necesitamos las funciones lanzaSubNuevo() y avanzaSubs()

20 min.

Ahora capture el código de la función lanzaSubNuevo() enseguida del código de la rutina anterior. Esta función selecciona cual de los submarinos puede salir de su puerto. Recuerde que ya fueron creadas y posicionadas fuera del escenario. Aquí se les indica cuando deben de partir. Un punto importante es que hay que evitar la monotonía de tener un número constante de submarinos en la pantalla, o que todos naveguen a la misma velocidad.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/**********************************************************************************

Lanza Nave Nueva

***********************************************************************************/

function lanzaSubNuevo(){

indice = -1;

for(i=0;i-1){

_root.velocidad[indice] = random(velocidadMaxima+1);

_root.estado[indice] = 1;

}

subNuevo = getTimer() + 1500 * random(3);

}

Observe que estamos barriendo a todos los submarinos con el ciclo for [L6]. Dentro de él estamos buscando un submarino disponible (estado=0) [L8] y cuando lo encontramos lo lanzamos al ancho mar con nuestra función motor.

La siguiente validación [L14] verifica que se haya seleccionado un submarino disponible. Si todos se encuentran en movimiento (estado=1) la variable indice no avanzará, pero si el índice es diferente a –1 (encontramos un submarino disponible), cambiamos su estado y calculamos su velocidad [L15], es decir, el número de píxeles que la nave avanzará (igual que la pelotita).

Entre mayor sea este número, el submarino avanzará más rápidamente. Como deberá ser obvio, no podemos tener una velocidad igual a cero, pues la nave no partiría nunca, por lo cual le sumamos uno a la velocidad aleatoria [L13].

Por último calculamos cuando puede salir la próxima nave [L16]. La instrucción "getTimer()" trae la hora de la computadora en milisegundos, como ya se dijo. Lo que hacemos con la instrucción es algo similar a:

"A partir de la hora de la computadora, súmale 1.5 segundos multiplicado por un valor aleatorio entre 0 y 2".

Si el valor aleatorio es cero, la siguiente nave partirá casi de forma simultánea. Si el valor aleatorio es uno, la siguiente nave partirá en 1.5 segundos, y si es dos, partirá en 3 segundos. Usted puede jugar con ambos valores para que los submarinos salgan con mayor o menor intervalo de tiempo.

30 min.

Esta función es un poco más elaborada, pues mueve a los "subs", genera el tiro en forma aleatoria y verifica si existe o no colisiones entre los tiros enemigos y la mina lanzada por el barco (si esta existe). Captúrela después de la anterior en el Panel de Acciones del primer fotograma de la línea de tiempo:

En esta función también barremos todos los submarinos [L5]. En esencia verificaremos a los submarinos activos [L7-26] y a los tiros activos [L27-36]. Dentro de la verificación de los submarinos generaremos el disparo en forma aleatoria [L10-18]. Observe que la probabilidad en 4 en 200, es decir, aproximadamente el 2%. Pero evaluado a 12 fotogramas por segundo, tiene un 24% de probabilidades de que el submarino dispare en un segundo.

Usted puede jugar con estos parámetros para aumentar o disminuir los disparos aleatorios. En las siguientes líneas [L20-25] se verifica si el submarino ha salido del escenario.

La siguiente verificación es sobre los tiros activos [L27-36]. Observe que disminuimos 5 pixeles a la posición del tiro en el eje de las y, ya que la coordenada origen se encuentra en la esquina superior izquierda [L29]. Para finalizar el bloque, verificamos si el tiro ha llagado al límite del mar [L31], de lo contrario tendremos tiros "voladores".

Por último se llaman a las rutinas que verifican la colisión entre tanto disparo y los submarinos [L38] y el barco [L39].

Ejecute la película con las teclas [Ctrl]+[Enter]. Los submarinos ahora deberán avanzar de izquierda a derecha y lanzar sus mortíferas cargas. Ahora codificaremos las rutinas para detectar las colisiones.

25 min.

Como se comentó en el capítulo anterior, en cuestión de colisiones en juegos, se pueden tener muchas formas de verificar si dos objetos lo han hecho.

En Flash tenemos el método hitTest, pero tenemos la gran desventaja de que evalúa la colisión de los centros de los objetos, lo cual funciona bien para objetos no muy grandes y de preferencia cuadrados… pero no siempre se puede tener objetos cuadrados.

Existen algunos otros métodos como calcular las coordenadas de ambos objetos y por medio de la solución de la función cuadrática (como se estudió en la secundaria) se determina si ambos objetos colisionaron. Este método es efectivo, pero un poco complicado.

Haremos una pequeña variación a la forma de detectar la colisión del capítulo anterior. Aquí calcularemos la distancia absoluta de ambos objetos y determinaremos si están "suficientemente cerca", es decir, a ciertos píxeles que nosotros podemos determinar, por ejemplo, dependiendo del tamaño de los objetos.

En este ejemplo, tendremos que restar la distancias de las coordenadas en las exis y en yes, por ejemplo:

El único truco es determinar cuando se está "demasiado cerca", lo cual dependerá de los anchos de nuestros objetos. Usted puede determinar que "demasiado cerca" son dos pixeles, o 15. Generalmente hay que tener un valor para las "xs" y las "ys".

En nuestro caso calculamos la distancia de la siguiente forma para cada uno de los submarinos con tiro activo:

• Capture en el Panel de acciones del primer fotograma de la línea de tiempo, en seguida a la función anterior, el siguiente código:

Con el método Math.Abs obtenemos el valor absoluto de la diferencia de ambas coordenadas [L13] y determinados que el valor "demasiado cerca" son 35 pixeles para las exis y 20 para las yes. Usted puede jugar con estos valores para determinar el área de impacto. En la función determinamos que si hay impacto, ejecutamos el fotograma "explosion" del clip de película, el cual inicia el estallido del barco.

Ejecute la película con las teclas [Ctrl]+[Enter]. Las cargas de los submarinos ahora harán estallar a nuestro barco. Nos falta hacer que nuestro barco se mueva y dispare.

15 min.

Capture en el Panel de acciones del fotograma "juego" la siguiente función:

Lo primero es declara al objeto como "arrastrable" [L5]. Las coordenadas van del píxel número 5 al 500 en el eje de las exis, y solo lo dejamos desplazarse en el píxel 65. Por último verificamos si estalló el barco [L6] y lo regresamos al fotograma uno [L7]. También se puede utilizar una variable de tipo booleano para determinar si estalló el barco, ya que si cambia el número de fotogramas en el clip de película, deberá cambiar este valor en el código del guión.

Ejecute la película con las teclas [Ctrl]+[Enter]. El valeroso barco ahora se podrá desplazar con el movimiento del ratón, pero seguirá indefenso. Con la siguiente función haremos que dispare.

15 min.

En esta se utiliza el manejador con el parámetro "mouseUp" que verifica cuando el usuario ha presionado y soltado el botón del ratón. Verificamos con la variable "tiroBarco" que no exista ya el tiro. Lo posicionamos en las coordenadas del barco y modificamos la bandera a "true".

Capture en el Panel de acciones del fotograma juego el siguiente código después de la función anterior:

Ejecute la película con las teclas [Ctrl]+[Enter]. Nuestro barco ya podrá disparar, pero sus balas no eliminan a los submarinos. Por último escribiremos la rutina para verificar la colisión con los temibles submarinos.

20 min

Esta función en esencia es muy similar a la rutina que verifica la colisión de nuestro barco con las cargas de los submarinos.:

Primero verifica si el disparo del barco se efectuó. Avanza 5 pixeles el tiro (usted puede variar este parámetro) y verifica si el tiro ya salió de la pantalla (mayor de 450 pixeles). De ser esto cierto, reiniciamos las variables del tiro, de lo contrario, verificamos la posible colisión con cada uno de los submarinos.

Si hay colisión del disparo con un submarino, iniciamos las variables del submarino, las del tiro y volvemos al juego. Aquí es donde debe de incrementar una variable si quiere llevar un contador.

Capture en el Panel de acciones del primer fotograma de la línea de tiempo, en seguida a la función anterior, el siguiente código:

Ejecute la película con las teclas [Ctrl]+[Enter]. Nuestro juego estará completo. Juegue un poco con él e imagine los cambios que podría realizar para hacerlo más divertido.

5 min

Este ejemplo tiene mucho que se puede mejorar, como añadirle un marcador, hacer que los submarinos tengan diferente valor dependiendo de su velocidad o de la profundidad en que navegan. A medida que avanza el reloj, puede variar y número de submarinos o de tiros para complicar el juego.

En este capítulo aprendimos a efectuar una explosión, así como manejar elementos aleatorios, como el tiempo en que se crean los submarinos, o la altura en la pantalla de los mismos.

En el siguiente, un clásico juego tipo Arcade de naves, utilizaremos todos los elementos anteriores y jugaremos un poco con el desplazamiento de escenarios.