Crear un juego flash de tipo arcade.por Julio Laguna - redribera

1 Introduccion y descripción del problema.

    1.1 Introducción.

    1.2 A quien va dirigido este tutorial.

    1.3 Descripción de nuestro juego.2 La escena en movimiento.

    2.1 El uso de sprites.

    2.2 Componer los movimientos y animaciones del protagonista en Flash

    2.2 Continuación...

    2.2 Continuación...

    2.3 Simular el movimiento sobre el fondo.

    2.4 Añadir un enemigo a nuestro juego.

    2.5 Enemigo en acción.

    2.6 Disparo y detección de colisiones.

    2.7 Comentarios finales.

1 Introduccion y descripción del problema.

1.1 Introducción.

En este tutorial, vamos a intentar explicar como crear un sencillo juego en Flash.

Se trata de un juego, al mas puro estilo arcade, en el que veremos como crear sencillas

animaciones mediante el uso de sprites y funciones en Flash para sincronizar los movimientos

mas habituales.

En concreto veremos como definir los movimientos de un personaje principal y de un único

enemigo. También la forma en la que el escenario sobre el que se desenvuelve la trama, esta

sincronizado con los movimientos tanto del personaje como de los enemigos.

No se trata de un juego completo, de hecho, no hemos tenido en cuenta un sistema de

puntuacón, aunque en el desarrollo de nuestro juego sería muy fácil de implementar, y además

solo veremos el movimiento de un enemigo y como este dispara un arma.

También trataremos el tema de las colisiones entre clips de película, que en este caso nos

valdrán para detectar las colisiones entre los disparos de nuestro enemigo y el personaje

principal. De todos modos el tema de las colisiones, va mas allá del uso que nosotros le vamos

a dar y pude ser muy útil en el desarrollo de cualquier otro tipo de juego con Flash.

Bajo estas líneas, encontrareís el desarrollo finalizado del fichero Flash (para la versión de

Flash 8 y superiores) con el juego que vamos a desarrollar. Tan solo es necesario pulsar el

botón empezar y utilizar los cursores para manejar nuestro protagonista.

El juego en si carece de muchas opciones y por supuesto de mucho mas contenido, pero

creemos que con los conceptos que vamos a explicar, el lector será capaz de desarrollar

multitud de contenidos para crear sus propios juegos.

Por su puesto, el desarrollo de un juego, requiere de muchas horas de dedicación, así como

una buena planificación del mismo, y sin olvidarnos de la creatividad que el mismo tenga. Es

así que juegos con un desarrollo tanto gráfico como de programación importante, no consiguen

llegar a una audiencia buena, incluso me permitiría decir, que ni siquiera a divertir. Por ello la

creatividad y correcta planificación en el desarrollo, son dos factores que deben ir juntos de la

mano en el proceso de desarrollo del juego.

En nuestro caso, hemos desarrollado este juego, con fines puramente educativos, y nuestra

experiencia en el desarrollo profesional de juegos, es prácticamente nula. Aun así estimamos

que las técnicas utilizadas por nosotros pueden ser de interés a una audiencia de lectores que

pretendan iniciarse en este tipo de desarrollos.

Descarga del archivo .fla

Nota: Es necesario Flash Player 8 o superior para la correcta visualización de los

ejemplos del tutorial. Desde esta misma página en la parte izquierda de navegación hay un

enlace a la página de descargas de Flash Player de Adobe.

1.2 A quien va dirigido este tutorial.

Este tutorial está dirigido, a aquellas personas que tengan interés en el desarrollo de juegos en

Flash, y que no tengan una noción avanzada en este tema. Los métodos utilizados (uso de

sprites y otros), son de sobra conocidos por las personas que tienen una experiencia en el

mundo del desarrollo de juegos.

Aún así este tutorial pretende centrarse en estos aspectos en conjunto con su aplicación

utilizando Macromedia Flash 8, plataforma en la que el desarrollo de juegos se ha convertido

en muy popular, sobre todo enfocado a juegos en Internet (online). El lector debiera estar

familiarizado aunque solo fuera en el manejo básico de Flash, creación de películas y manejo

básico.

Así mismo el tutorial asume que el lector tiene un conocimiento del lenguaje ActionScript

(lenguaje de programación en Flash).

De todos modos el uso que haremos de ActionScript tampoco es excesivamente complejo,

con lo que entendemos, que un lector sin experiencia puede usar este tutorial, cuanto menos

como una guia de iniciación al mismo, ya que en el desarrollo del juego se utilizan las

estructuras mas comunes del lenguaje, sin entrar en estructuras mas complejas como las

clases que definen objetos.

El equipo de redribera, no tiene tampoco inconveniente en dar el soporte necesario dentro de

nuestros foros o en los comentarios para este tutorial, a los cuales podeís acceder a traves del

menú situado a la izquierda en esta misma página.

Esperamos que el tutorial sea del agrado del lector.

1.3 Descripción de nuestro juego.

Vamos a incluir este apartado en este capítulo de introducción, para tener una visión global de

los objetivos o acciones que va a implementar nuestro juego. Esto es así para que el lector

tenga una visión de los objetivos que pretendemos, antes de iniciarse en el desarrollo técnico

del mismo.

Por supuesto, para nosotros estos objetivos están claros, una vez hemos finalizado nuestro

desarrollo, pero esto no será tan obvio cuando estemos empezando con un desarrollo nuevo, y

lo normal es que a lo largo del tiempo del desarrollo, estos objetivos vayan cambiando. Aún así

creemos que hará mas comprensible la lectura.

Nuestro juego, inicialmente va a consistir en un personaje:

protagonista

Este personaje, será el protagonista principal, cuyo control lo decidiremos los jugadores

mediante las teclas de cursor. Flecha arriba, abajo, izquierda y derecha.

Con estas teclas podremos realizar las siguientes acciones:

Movernos hacia la izquierda - flecha izquierda. Movernos hacia la derecha - flecha derecha.

Saltar hacia arriba (en dirección) - flecha arriba.

Detener a nuestro personaje - flecha abajo.

Por otro lado, nuestro personaje va a tener que lidiar contra un típico enemigo al mas puro estilo arcade. Su enemigo será este personaje:

enemigo que disparará sin cuartel contra nuestro protagonista, y este, deberá esquivar sus

disparos utilizando su potente salto.Nuestro enemigo, vendrá a por nosotros montado en su flamante camión:

Por otro lado, tendremos la escena (o vulgarmente conocido como nivel en los arcade.), donde

transcurrirá esta persecución entre nuestros personajes.

Por simplicidad (que luego veremos) y porque es un sistema de de niveles bastante habitual,

nuestro nivel, deberá ser infinito, es decir que nunca se acabe, ni cuando andamos hacia la

izquierda, ni cuando andamos hacia la derecha. En realidad es algo similar a los dibujos

animados antiguos, con un fondo reversible, podemos generar una escena continua en la que

se repite el fondo por el que pasamos, sin que sea demasiado perceptible para el usuario (ni

importante en el juego).

Aquí voy a dejar un enlace hacia el fondo que utilizaremos como nivel de la escena.

Fondo para utilizar en el nivel de la escena de nuestro juego.

El objetivo de nuestro juego, va a ser muy sencillo, esquivar las rafagas de metralla que nuestro

enemigo nos disparará montado en su camión.

El enemigo, aparecerá en la escena de vez en cuando y nos disparará metralla, que solamente

podremos esquivar saltandola.

Si la metralla nos alcanza, nuestro personaje, perderá una vida, y se verá como muere en la

escena.

Observareís que es un juego muy sencillo, de hecho no hemos implementado ni siquiera un

sistema de puntuación, ni un número de vidas al personaje, para que el juego finalice. Por otro

lado, se trata de un único enemigo muy fácil de esquivar, que apenas aporta complejidad al

juego. Es cierto, es un juego soso y aburrido, no lo vamos a negar, pero nuestra diversión va a

ser otra, que es la de montar estas sencillas acciones, que van a hacer complejo nuestro

trabajo.

Una vez vistos estos conceptos, entenderemos que mejorar nuestro juego será cuestión de

repetir muchos de estos procesos, de una forma mas o menos creativa.

No es nuestra intención desarrollar un complejo juego, para el que haría falta mucho mas

tiempo del que nosotros le podemos dedicar en estos momentos. Nuestra intención es que el

lector aprenda algunos trucos y que comience a familiarizarse con Flash para resolver este tipo

de aplicaciones. Luego será Usted mismo, quien decida hasta donde quiere llegar en este

apasionante mundo de los videojuegos Flash.

Seguidamente, en el siguiente capitulo, comenzaremos con el desarrollo de nuestra aplicación

desde cero.

2 La escena en movimiento.

2.1 El uso de sprites.

Lo que se conoce como Sprite, normalmente suele tener varias definiciones. En la wikipedia

podeís encontrar varias de las definiciones que se realizan sobre sprites, podeís verlo en este

enlace.

Tradicionalmente un sprite, es una imagen, que contiene varias posiciones para un objeto o personaje. Con la aparición de los juegos 3D, el uso de sprites está decayendo en muchas plataformas, pero aun sigue vigente, y de hecho para la generación de juegos Flash es una poderosa técnica.Aquí teneís una muestra de un Sprite para nuestro presonaje principal.

Sprites para nuestro protagonista.

Existen multitud de sitios web donde obtener sprites de forma gratuita, e incluso numerosos

programas para proceder al ripeo de sprites desde juegos en diferentes plataformas: Neo-Geo,

PC, GameBoy, PlayStation,etc....

En concreto, la mayoría de los sprites y gráficos que nosotros utilizaremos en este juego, los

hemos obtenido del sitio Sprite Database.. Podeís echar un vistazo a esta página donde

existen multitud de sprites listos para utilizar en nuestros juegos, cortesía de usuarios altruistas

como nosotros.

El uso de sprites para animar nuestros personajes es una excelente técnica para utilizar en

Flash, ya que es un entorno basado en la animación por fotogramas, así es que podemo usar

estos archivos, para generar los fotogramas de movimientos de nuestros personajes u objetos.

También por supuesto, podemos generar los sprites nosotros mismos con nuestros propios

dibujos para dar un toque de originalidad en nuestros juegos.

Pdemos utilizar varias técnicas para el uso de sprites en nuestras animaciones con Flash. Por

ejemplo con una única imagen como la mostrada arriba, podemos dibujar diferentes áreas en

función de la animación. No obstante la técnica que nosotros utilizaremos, es la de mediante un

editor gráfico del tipo FireWorks o Photoshop, utilizar la varita mágica para seleccionar cada

personaje. Puesto que el fondo en el sprite es de color uniforme, lo seleccionaremos sin ningún

problema. Finalmente debemos generar tantas imagenes como frames diferentes queramos

utilizar para un personaje en el desarrollo de nuestro juego Flash.

Por ejemplo, nosotros para nuestro juego, no utilizaremos todos los movimientos del personaje,

sino unos cuantos de ellos. En concreto los relativos a giro del personaje, andar hacia la

izquierda, andar hacia la derecha, y estos en los que se ve a nuestro personaje como le han

pegado un tiro y poco a poco va muriendo.

Aquí dejo una lista completa de las imagenes que hemos generado a partir de este sprite, y que

ya están exportadas como formato gif y con transparencia.

Imagenes para el movimiento de andar hacia la derecha:

Imagenes para el movimiento de andar hacia la izquierda:

Imagenes para realizar giros del personaje:

Imagenes para simular la muerte del personaje:

Como podreís observar, tan solo hemos escogido un subconjunto de las imagenes del sprite,

para utilizar y que van a ser suficientes para utilizar en nuestro juego, ya que si recordaís del

capítulo anterior, solo nos planteamos que nuestro personaje tuviera los movimientos de andar

izquierda, derecha, saltar, parar y morir. Como estos movimientos los realizaremos en un

escenario de dos dimensiones, las imagenes que hemos recortado del sprite, serán suficientes.

Es muy importante, que las imagenes estén sobre fondo transparente (formatos gif), ya que las

vamos a desplazar sobre un fondo dibujado, y no quedaría bonito ver moverse un rectangulo

en blanco sobre el fondo.

Estas imagenes, que hemos generado (y que podeís almacenar en vuestro disco pinchando

sobre ellas con el botón derecho del ratón y seleccionando guardar como...), nos servirán para

importarlas a la biblioteca de nuestro fichero Flash y componer un clip de película con todos los

posibles movimientos de nuestro personaje.

En el siguiente apartado, veremos como componer todos estos movimientos para nuestro

personaje.

Para las animaciones de nuestro enemigo y el camión también utilizaremos sprites que

mostraremos en su momento.

2 La escena en movimiento.

2.2 Componer los movimientos y animaciones del protagonista en Flash.

Si no descargasteis el fichero fuente, que se puso en el inicio del tutorial, aquí os dejo de nuevo

el enlace con el código finalizado. El formato es el de Flash 8.

Dentro de este fichero, encontrareís en la biblioteca una cantidad de imagenes que hemos

importado además de otros objetos, uno de ellos es el movieclip llamado soldado_mc, cuya linea de tiempo en Flash es la misma que podeís ver en la imagen que os mostramos mas abajo (acercarse y hacer zoom si es necesario a la imagen).

code Figura 1 - movieclip soldado_mc

El clip soldado_mc contiene todas las animaciones de movimiento para controlar a nuestro

protagonista. También contiene las funciones necesarias para fluir de un estado a otro de

nuestro personaje.

El concepto de estado, es muy importante cuando estamos realizando un juego como este.

Esto es debido a que nuestros personajes, tanto nuestro protagonista como los enemigos a

algunas determinadas acciones del juego pasan de un estado a otro en función de las acciones

que realicemos y la propia lógica del juego.

Cuando pensamos en la forma de moverse de nuestro personaje (en el capítulo 1 lo vimos), sin

darnos cuenta ya hemos realizado una aproximación a los posibles estados de nuestro

personaje, andar hacia la derecha, hacia la izquierda, parar, saltar y morir. Tendremos tantos

estados como necesitemos en el fluir de nuestro programa.

So os fijaís en la linea de tiempo del movieclip soldado_mc (figura 1 o en el fichero fuente),

observareís como hemos generado 7 capas en las que hemos ido generando varios

fotogramas clave. Estos fotogramas clave, contienen las imagenes que hemos ido generando a

partir del Sprite que vimos en el capítulo anterior.

Por ejemplo la capa andarizquierda contiene la secuencia de fotogramas con las imagenes

siguientes:

La capa andarizquierda, comienza a tener fotogramas clave, a partir del fotograma 15

de la linea de tiempo. Cada fotograma clave, contiene una de las imagenes mostradas

anteriormente, ademas, los separa un fotograma (que no es clave), y que repite la imagen.

Realmente hemos utilizado esta técnica para conseguir una animación con una frecuencia que

nos agradaba, en base a la velocidad de animación general del fichero, que en este caso es de

12fps.

El codigo fuente (ActionScript), correspondiente al fotograma 15 de la capa Acciones es el

siguiente.

status="izqandar";if(jumping){stopAllSounds();}

Como podeís observar, simplemente define la variable status con el valor izqandar.

Por otro lado para todos los sonidos que hubiesen si estamos saltando, ya comentaremos esto.

La variable status, es muy importante en el clip soldado_mc, porque en todo momento

contiene el estado en el que se encuentra nuestro personaje. El estado es muy importante,

porque así sabremos que es lo que está haciendo nuestro personaje en todo momento. Si esta

andando hacia la izquierda, si esta parado, si está saltando.... Por tanto la técnica que hemos

utilizado, es la de refundir, en un único clip de película, todos los estados posibles de nuestro

personaje, tanto en lo relativo a animación de movimientos como en acciones que puede

realizar. Las diferentes animaciones en las que hemos utilizado Sprites, observareís que no

están superpuestas, ya que nos desplazaremos a un segmento u otro de la lienea de tiempo

del clip, en función del estado de nuestro personaje. Así en una única película, tenemos toda la

lógica de movimientos de nuestro personaje.

En realidad hemos utilizado esta técnica de poner todos los movimientos posibles de nuestro

personaje en un único movieclip, para poder utilizar el clip, como una referencia constante a

nuestro personaje dentro de la pélicula principal (lo que es el juego en si).

Seguidamente vamos a explicar mas detalladamente el contenido de todas las capas, así como

todo el código ActionScript necesario para el correcto fluir entre estados de nuestro personaje.

2 La escena en movimiento.

2.2 Componer los movimientos y animaciones del protagonista en Flash.

code Figura 1 - movieclip soldado_mc

Ya vimos el contenido de la capa andar izquierda, el contenido de la capa andar derecha es

similar y los fotogramas incorporan las siguientes imagenes que fluyen desde los fotogramas

27 a 36:

La capa morir contiene la secuencia de imagenes de la animación de morir de nuestro

protagonista. Las imagenes que fluyen desde el fotograma 45 al 54 son las siguientes.

La capa sonido, tan solo incorpora un fichero de sonido en mp3, que simula los pasos al andar

de nuestro protagonista. Aquí os dejo el enlace al fichero de sonido en mp3.

Esta es una muestra para que los lectores veaís como hemos incorporado un sonido a la

animación de nuestro personaje. Tan solo merece la pena comentar, que el sonido lo iniciamos

cuando nos situamos en los fotogramas de inicio, tanto de andar a la izquierda como andar a la

derecha. En el resto de estados de nuestro personaje, el sonido se deshabilita. Anteriormente

visteis un ejemplo en el código ActionScript de andar izquierda.

Ya no hemos incorporado mas sonidos en nuestro juego, porque lo consideramos trivial y

similar a este ejemplo. El lector con este ejemplo estimamos que no tendrá mayor problema de

incorporar nuevos sonidos a mas acciones.

La capa paradofrante incorpora tan solo una imagen que es la siguiente.

Esta capa incorpora tan solo el estado paradofrente, que no contiene ninguna

animación y es el estado al que irá nuestro personaje, cuando pulsemos la flecha abajo y por

tanto quedará parado.

Llegamos a la capa giro, la cual contiene ocho imagenes que completan un giro de 360º de

nuestro personaje.

Los fotogramas de esta capa los utilizamos, para simular un fluir mas agradable en las

animaciones cuando estando en un estado cambiamos a otro, por ejemplo cuando andamos

hacia la izquierda y de repente, cambiamos a andar a la derecha, se produce un fluir similar a

un giro para cambiar de un estado a otro.

En esta capa coinciden varios estados transitorios, como izquierda y derecha. Además es en

esta capa, en concreto en el fotograma uno, donde se encuentra el estado inicial de nuestro

personaje, que no debemos confundir con el estado paradofrente.

Para la capa de acciones, tenemos la costumbre de crear una capa independiente para

introducir todo el código asociado a un número de fotograma en la linea de tiempo. De hecho

en el primer fotograma, además están todas las funciones propias del clip de película

soldado_mc Hemos declarado acciones (en ActionScript) en once fotogramas de esta capa.

La lógica principal y la definición de funciones, están en el primer fotogrma. Previo a ello,

vamos a ver el código del resto de fotogramas, que es mucho mas sencillo.

Nota: Los fotogramas que inician estados los hemos etiquetado con un nombre, así nos

será mas fácil referirnos a ellos en lugar de por el número de fotograma.

Código ActionScript del fotograma 3:

gotoAndPlay("izqandar");status="izquierda";

En este código correspondiente al fotograma 3, tan solo establecemos el estado (con status)

del personaje a izquierda, en realidad es un estado transitorio. Seguidamente saltamos la

cabeza lectora de la película al fotograma etiquetado como izqandar

Código ActionScript del fotograma 7:

gotoAndPlay("derandar");status="derecha";

Similar al anterior, pero referente a la intención de andar a la derecha.

Código ActionScript del fotograma 8:

if (status=="frente") {gotoAndPlay("derecha");}if (status=="paradofrente") {gotoAndPlay("derecha");}if (status=="derandar") {gotoAndPlay("frente");}

Si, nos fijamos en la imagen del fotograma 8 (capa de giro), realmente, podemos

observar, que se trata de un estado en la animación transitorio, de ahí, que hallamos,

establecido que debemos hacer, en función del estado desde el que procede nuestro

personaje.

Es decir, si nuestro status es el de frente, que esl el status inicial, y alcanzamos este

fotograma, será para inmediatamente continuar hacia el fotograma marcado como derecha, (el

fotograma anterior). Como vimos, desde este fotograma (el 7) cambiaremos de status y

continuaremos hacia andarderecha. Lo mismo sucede si nuestro status es el de paradofrente.

Sin embargo, si estamos andando hacia la derecha y alcanzamos este fotograma, nuestro

siguiente paso será el de detenernos, estado paradofrente.

Los códigos fuente para los fotogramas 15 y 24 que están estrechamente ligados, son

respectivamente los siguientes:

status="izqandar";if(jumping){stopAllSounds();}

gotoAndPlay("izqandar");

Efectivamente no necesitan mas comentarios que los de establecer el estado de nuestro

personaje a izqandar.

Cuando acabamos con la animación de los fotogramas 15 al 24, volvemos a empezar y

retornamos al fotograma 15.

Realmente, esto tiene una explicación, y es que hemos planteado nuestro juego, para que

cuando el usuario, pulse sobre la flecha izquierda, o derecha, nuestro personaje, no parará de

moverse en esa dirección, hasta que no pulsemos la tecla de flecha abajo, que es la tecla para

parar a nuestro personaje.

Esto lo hemos hecho así por simplicidad, pero también lo podriamos haber realizado, de modo

que el personaje, solo se moviera cuando mantenemos pulsada una tecla, no obstante, no es

significativo.

Los códigos fuente para los fotogramas 27 y 36 realizan la misma función pero en el

movimiento a la derecha:

status="derandar";if(jumping){stopAllSounds();}

gotoAndPlay("derandar");

Código ActionScript del fotograma 40:

stop();status="paradofrente";

Simplemente para al personaje, no contiene animación y establece el status paradofrente

Los códigos fuente para los fotogramas 45 y 54 son los relativos a la animación de muerte:

status="muerto";

stop();

A diferencia del movimiento a derecha e izquierda, aquí no repetimos la animación y en el

fotograma 54 la paramos con la sentencia stop(); No vamos a tener a nuestro personaje

muriendo continuamente.

A continuación en la siguiente página vamos a comentar todas las acciones que nos saltamos

correspondientes al fotograma 1

2 La escena en movimiento.

2.2 Componer los movimientos y animaciones del protagonista en Flash.

Bajo estas lineas, está el código fuente ActionScript para el fotograma 1 del clip

soldado_mc.

code Código para el fotograma 1 de soldado_mc.

Realmente en este fotograma hemos generado todas las funciones para pasar a los estados

correspondientes y que vimos anteriormente de nuestro protagonista.

Además daros cuenta, que aunque inicalmente hablamos de que nuestro protagonista, tendría

la capacidad de salto, anteriormente no hemos visto generada ninguna capa para salto en la

linea de tiempo del clip.

Esto es debido a que realmente la forma de saltar de nuestro personaje, la hemos planteado

generando una funcion llamada salta.

Vamos a comentar todas las funciones de este código para ver las acciones que realizan:

funcion anda_izquierda y funcion gira_izquierda:

Realmente, estas dos funciones las podriamos haber refundido en una.

No tienen demasiado misterio, y esque en función del estado (definido por la variable status) en

el que se encuentre nuestro protagonista, mueven la cabeza lectora del clip a uno u otro

fotograma.

Es interesante hacer notar, que si estamos muertos, no se realiza ninguna acción.

funcion anda_derecha y funcion gira_derecha:

Estas funciones son análgas a las anteriores que hemos visto.

funcion parar:

También análoga a la anterior, ya que en función del estado en el que estamos, para o no

realiza ninguna acción.

funcion morir:

Esta función directamente mueve la cabeza lectora al fotograma morir, sin importarle el estado

anterior del cual procedamos.

funcion salta y función salto_anim:

Estas dos funciones, son las encargadas de simular un salto de nuestro protagonista.

Realmente, la técnica que van a utilizar es la de cambiar la propiedad _y de nuestro clip de

película en función de unas formulas determiandas. En la línea 65 podeís observar como existe

una comprobación condicional que evita que podamos saltar si el estado de nuestro personaje

es frente (estado inicial), paradofrente o muerto. Lo que pretendemos es simular un salto

variando la propiedad _y de nuestro clip, pero sin detener las animaciones de los cuatro

estados permitidos para realizar un salto: derecha, izquierda, derandar e izqandar. Esto es

un salto, al estilo Manic Miner (juego del ZX Spectrum de Sinclair) o a lo Michael Jordan :) .

Prosigamos. Cuando queramos que nuestro protagonista salte, deberemos llamar a la funcion

salta(), la cual establecera un valor para una serie de variables globales al clip t, vini, a,

jumpDir y yini.

Esto es así porque a la hora de implementar nuestro salto nos vamos a basar en propiedades

físicas reales de movimiento, es decir, el salto hacia arriba, será un movimiento desacelerado

(por la gravedad) y hacia abajo, se tratará de un movimiento acelerado, con el top del suelo.

Podeís aprender mas acerca de este tipo de movimiento en Flash con otro tutorial que

publicamos anteriormente aquí en redribera.

La función salta, además de inicializar estas variables (aceleración, velocidad inicial, posición

inicial, sirección del salto y tiempo), lo que hace es crear una función de intervalo (linea 74),

previo a ello eliminamos algún posible residuo del intervalo que pudiera quedar (línea 73).

El intervalo se establece para la función salto_anim(), que comienza a ejecutarse

indefinidamente cada intervalo de tiempo que hayamos establecido, en nuestro caso 25 y

teniendo en cuenta la velocidad en fps de nuestra película.

LA función salto_anim() en realidad, utiliza la física que hemos establecido para calcular la

posición _y de nuestro clip soldado_mc en función del valor de las variables físicas y del

vector de movimiento, en este caso los valores up y down. Finalmente, cuando en un

movimiento down, hemos tocado el suelo (osea nuestra posición _y original), detenemos la

animación de la función (línea 99) y reestablecemos la posición original del clip (línea 95). Esto

es debido a que en los cálculos físicos, pudieramos tener una pequeña desviación del valor _y.

Las línes 78 y 97 respectivamente, dan valor a un nuevo estado de nuestro personaje jumping,

que establecen respectivamente e true o false. Debemos conocer este estado, y lo vereís mas

adelante (ya lo utilizamos para saber si debemos parar el sonido de los pasos), porque según

la lógica de nuestro juego, no vamos a permitir cambiar de estado a nuestro personaje, cunado

éste, esté saltando. Solo con una excepción, que será cuando le disparen y lo alcancen, en

cuyo caso, si que permitiremos pasar al estado de muerto y continuar con el salto.

Estas excepciones, no las vamos a controlar en el clip soldado_mc, como hicimos con otras,

sinó que en la propia lógica del juego, en la escena principal será donde las realicemos.

Si habeís descargado el código fuente, en la escena principal, la instancia de soldado_mc,

llamada hombre (en el fotograma 2 de la escena principal), y desplegaís las acciones para

hombre, vereís como allí están especificadas estas restricciones.

Con la finalización de este soldado_mc, ya tenemos un clip de película, que podemos insertar

en otros clips de película y que es capaz de soportar diferentes estados de animación mediante

la correcta llamada a las funciones que se declaran en el ActionScript del fotograma 1. Bajo

estas lineas observareís una pelicula Flash que responde a las pulsaciones de las flechas de

teclado, pasando a mover nuestro personaje en las diferentes animaciones que hemos

generado (si no responde, haz click sobre la imagen primero).

Descarga del archivo .fla

Efectivamente nuestro hombre cambia de estado según pulsamos la tecla correcta. Nuestro

hombre en estos momentos está estático en la escena. Y llegado a este punto nos debemos

plantear como se moverá por la película, para lo cual hay multitud de técnicas.

Esto es todo, respecto al clip soldado_mc, seguidamente veremos como procesar la lógica de

nuestro juego. Es decir el movimiento de nuestro personaje mediante la pulsación de teclas, la

IA de nuestro enemigo y la simulación de movimiento con el desplazamiento del fondo del nivel.

2 La escena en movimiento.

2.3 Simular el movimiento sobre el fondo.

Una vez tenemos todos los movimientos de nuestro personaje definidos y programados, nos

damos cuenta como ya comentabamos anteriormente, de que nuestro personaje, no se

desplaza a lo largo de la escena. Entonces ¿Como realizamos el movimiento?. Existen varias

técnicas, pero casi todas ellas, están basadas en el scrolling del escenario. Es decir, nuestro

personaje se queda fijo en un punto, o como mucho tiene limitado el punto máximo al que

puede llegar dentro de la escena. Pero llegado a un punto no es nuestro personaje quien se

mueve, sino el fondo de la escena.

En nuestro caso, la técnica utilizada, es dejar fijo a nuestro personaje en el centro y lo que

realmente vamos a hacer es mover el escenario en el sentido opuesto al movimiento de

nuestro personaje.

Bajo estas líneas teneís el ejemplo de como realizar estas acciones implementado (si el

soldado no responde a la pulsacion de las flechas, hacer un click sobre la película flash).

Descarga del archivo .fla

Para conseguir este efecto, hemos utilizado lo que se conoce como un fondo reversible. Es

decir una imagen de fondo que se puede conectar el final con el principio. De hecho si

imprimieramos esta imagen y uniesemos los bordes de los extremos nos quedaría un bonito

fondo si fin circular.

Para conseguir la animación del fondo en uno u otro sentido y además que este sea infinito, lo

que hemos hecho (lo podeís ver si descargaís el fichero de ejemplo soldado_test2), ha sido

utilizar dos instancias de nuestro fondo reversible y colocarlas en la escena principal. Y la

hemos procesado con dos funciones.

Veamos y expliquemos el código ActionScript utilizado para simular este efecto:

Previo a ello os dejo aquí un enlace a la imagen que hemos utilizado como fondo de nuestro

nivel/escena.

code Código para el fotograma 1 de la película.

Este código debemos insertarlo en el primer fotograma de la escena principal. Previo a ello,

debemos insertar dos instancias del fondo que hemos utilizado. En este caso nosotros las

hemos llamado bg1 y bg2. Además ambas instancias deben estar colocadas contiguas una a

la otra y alineadas en la escena. Por supuesto la capa donde las ubiquemos, debe dejar de ver

a nuestro soldado. En el fichero de ejemplo podeís observar como está compuesto.

Si os fijaís hemos definido dos variables bg_speed y bg_width (línes 3 y 4). Estas variables

contienen la velocidad de movimiento del fondo y el ancho de nuestra escena.

Con las funciones bgMoveDer, bgMoveIzq y bgStop, lo que hacemos es manipular la variable

bg_speed, un valor positivo, un valor negativo, o cero.

El secreto del movimiento, radica en que para cada fotograma que procesa la película, líneas 6

a 8 onEnterFrame, procesamos la función mueve_fondo. La función mueve_fondo, es

dependiente tanto de la velocidad del fondo bg_speed, como del ancho de la escena,

bg_width.

Por tanto si observaís bien el código fuente y en función de estas variables las dos instancias

del clip donde introducimos la imagen del fondo, cambian el valor de la propiedad _x. Es por

ello que se hacen necesarias dos imagenes (y además mas anchas que la escena), para poder

cubrir los espacios en blanco que deje la otra al cambiar el valor de _x.

Ahora solo nos falta sincronizar la velocidad del fondo con el movimiento de nuestro protagonista.Para ello solo hace falta echar un vistazo al código asignado a la instancia del clip de nuestro protagonista.

code Código para la instancia del clip de soldado_mc.

Fijaros como en este código, además de cambiar el estado de nuestro protagonista en función

de la tecla del cursor presionada, si estas teclas son la flecha izquierda, derecha, o abajo,

llamamos a una de las funciones de la escena principal que vimos en el código anterior. Es de

esta forma como sincronizamos el movimiento de nuestro protagonista con el fondo de la

escena. Y así es como conseguimos el efecto que pùdisteis comprobar en el ejemplo al

principio de esta página.

Fijaos también como en el momento de presionar la tecla de salto, no variamos la velocidad del

fondo, ya que el salto siempre lo realizamos en una dirección, bien andando a la izquierda, o

bien andando a la derecha.

El código ActionScript no necesita mas comentario, y podeís descargar el fichero de ejemplo (al

principio de la página), para ver como está montado todo.

Seguidamente, veremos como animar a nuestro único enemigo, para dar una interactividad al

juego.

2 La escena en movimiento.

2.4 Añadir un enemigo a nuestro juego.

Para hacer algo mas entretenido nuestro juego, vamos a introducir un personaje a la escena.

Se trata de un enemigo que disparará contra nosotros y para no morir por sus disparos,

deberemos saltar para esquivar las rafagas de metralla que este nos lanza. Es una acción

típica de un arcade, que en nuestro juego apenas implica dificultad, pero que a nosotros nos

servirá para aprender como lograr introducir enemigos en nuestro juego. Nos hemos planteado

a este enemigo, y siguiendo la técnica que vimos anteriormente en cuanto al uso de sprites,

vamos a disponer de esta secuencia de imagenes para animar al mismo:

Imagenes para simular a nuestro enemigo disparandonos:

No necesitaremos mas imagenes para animar a este personaje, para el cual

crearemos un clip de película al que llamaremos enemy1.

línea de tiempo para el clip enemy1.

function dispara(){this.gotoAndPlay("disparo");}

Código ActionScript para el fotograma 1 de enemy1

stop();

Código ActionScript para el fotograma 14 de enemy1

Como podreís observar, en el fotograma 1, declaramos la función dispara, que será la

encargada de generar la animación de nuestro enemigo disparando contra nosotros.

El Código del fotograma 14, detien el clip, para que nuestro enemigo no dispare continuamente,

sino solo cuando nosotros llamemos a la función dispara.

Hemos pensado, que nuestro enemigo, vendrá a dispararnos, montado en un camión por la

carretera por la cual transita nuestro protagonista. También utilizaremos algunos sprites para

generar la animación del camión en el que montará nuestro enemigo.

Imagenes para simular el camión en el que monta nuestro enemigo:

A diferencia de la animación de nuestro enemigo, el clip que generaremos para el movimiento del camión, siempre estará reproduciendose, ya que vamos a simular que aparece y desaparece de la escena y que siempre está en marcha.

Así quedará nuestro enemigo en la escena.

Aunque podriamos generar un clip independiente que contuviese ambos clips, por simplicidad,

dejaremos los dos clips en la escena principal de nuestro fichero final.

En la imagen mas arriba, podreís observar que nuestro enemigo y el camión están al reves que

nuestro sprite, esto es facil de conseguir insertando la instancia en la escena de flash y

haciendo una transformación de voltear horizontalmente.

En nuestro juego, nuestro enemigo siempre aparecerá por el lado derecho de la película. Y

aunque en la imagen mas arriba y en el fichero fuente podemos ver a nuestro enemigo, en

tiempo de ejecución este no se ve, ya que hemos incorporado una mascara y además

inicialmente esta posicionado en la escena, fuera del area visible cuando la película esta en

ejecución.

Ahora nuestra misión será generar el desplazamiento del camión (y el enemigo que monta

sobre el), a lo largo de la escena principal y de generar la IA (en este caso muy sencilla), para

que llegado a un punto, nuestro enemigo dispare sobre nosotros.

Por último y antes de pasar a ver la Inteligencia artificial (básica) de nuestro enemigo, hemos

de crear un nuevo clip al que llamaremos disparo1 y el cual contiene una pequeña animación

de un simple punto, y que será el que utilizaremos como proyectil de nuestro enemigo. Todos

estos clips, los podeís encontrar en el fichero fla finalizado, del cual os vuelvo a dejar un enlace

aquí.

2 La escena en movimiento.

2.5 Enemigo en acción.

Llegados a este punto, debemos proceder, al igual que hicimos con nuestro protagonista, a

generar la animación de nuestro enemigo. Al igual que hicimos anteriormente nos debemos

plantear toda la lógica de sus acciones. Y al igual que hicimos antes la técnica a seguir es muy

similar a la de nuestro protagonista, basada en los diferentes estados de nuestro enemigo.

Nosotros hemos planteado la forma de atacar de nuestro enemigo de la siguiente forma:

Nuestro enemigo aparecerá y desaparecerá por el lado derecho de la pantalla, montado en el

camión. Llegado a un punto x, éste, procederá a disparar una rafaga de metralla contra

nosotros. A partir de ahí se volverá a retirar y desparecerá de la escena. Y así continuamente

por la simplicidad que le vamos a dar a este juego. Nuestro enemigo aparecerá montado en su

camión, independientemente de que nuestro protagonista está desplazandose hacia la

izquierda, o hacia la derecha. Intentaremos simular un efecto de velocidad de nuestro enemigo,

para que el camión no avance a la misma velocidad, si nuestro protagonista, camina hacia la

izquierda, hacia la derecha, o está parado. Por tanto el desplazamiento de nuestro

protagonista, afectará al desplazamiento de nuestro enemigo. La única forma que tenemos de

esquivar la metralla que dispara nuestro enemigo, es saltarla. Para añadir algo (muy poca) de

dificultad a nuestro protagonista, nuestro enemigo disparará rafagas con una cantidad aleatoria

de proyectiles. Osea que algunas rafagas serán muy faciles de saltar, y otras, no lo serán tanto.

Si alguna rafaga, alcanza a nuestro protagonista, esté morirá.

Aunque no hemos implementado una capacidad de disparo a nuestro protagonista, el lector

observará al final de este tutorial, como el desarrollo seria análogo al utilizado por nuestro

enemigo.

Este tipo de movimiento de un enemigo, era muy clásico con los enemigos finales de las

antiguas maquinas recreativas. Evidentemente, no se trata de un enemigo complejo, además

no establecemos ningún tipo de sistema de puntuación. El juego finalizará aquí, con nuestro

enemigo, en un ciclo continuo de aparecer--disparar--desaparecer. De todos modos con unos

pocos cambios, podriamos llegar a finalizar un juego, incluso algo mejor que algunos a los que

he jugado por internet.

Nuestra intención en este caso, es que el lector vea los procedimientos utilizados y los adecue

a la generación de sus propios juegos. Seguidamente vamos a ver y comentar el código

necesario para realizar estas acciones. Queremos también apuntar, que por simplicidad el

código necesario para el movimiento de nuestro enemigo (así como anteriormente el

movimiento del fondo), lo hemos implementado en la escena principal de nuestra película

Flash. Por supuesto, en un desarrollo de mayor envergadura, el lector debería plantearse, una

mejor distribución del código fuente, asi como la programación de clases para obtener un

código suficientemente legible y estructurado, para un mejor desarrollo de la aplicación. Para

los propositos de nuestro tutorial, es suficiente la forma en la que hemos distribuido todo, sino

nunca hubieramos acabado de redactar este tutorial.

Este es el código necesario para realizar el resto de acciones, que se encuentra alojado en el primer fotograma de la escena principal y que comentaremos punto por punto.

code Código para la instancia del clip de soldado_mc.

Ya hemos explicado algunas de las funciones de este código, en lo referente al movimiento del

fondo sincronizado con el movimiento de nuestro personaje.

De la línea 40 a la línea 72, encontramos la función mueve_enemigo1(). Esta función lo

primero que hace es mirar el valor de la variable global show_enemy_der (en la línea 6). Si

esta variable se establece a falso, nuestra función no se ejecutará. Como nosotros hemos

pretendido realizar un bucle infinito con nuestro enemigo, hemos establecido esta variable a

true. Pero no está de mas conocer que está ahí, para detener el movimiento de nuestro

enemigo.

Si nos fijamos en la línea 15 del código, vemos que dentro de la función onEnterFrame,

hacemos una llamada continua a la función mueve_enemigo1(). Por tanto la función está en

ejecución continua.

Gracias a esta ejecución continua, nos podemos plantear los cambios de estado de nuestro

enemigo en base a las comprobaciones que realizamos en las líneas 43 a 69.

La base para mostrar a nuestro enemigo es situarlo inicialmente fuera de la escena (cubierto

por una mascara), y a partir de ahí ir variando la propiedad _x de los dos clips de película

pertenecientes a nuestro enemigo y al camión, simultaneamente.

Por ejemplo si nos fijamos en este código perteneciente a la función

if (camion_der._x>480 and enemy_status==0){enemy_speed=-2;}

Lo que hacemos, es que mientras la posición del enemigo no alcance el punto x=480, lo vamos

desplazando hacia la izquierda dos unidades.

enemy_der._x=enemy_der._x+enemy_speed;camion_der._x=camion_der._x+enemy_speed;

Este código al final de la función es el encargado de actualizar las posiciones del enemigo cada

vez que se procesa un fotograma de la escena principal.

if (camion_der._x>480 and bg_speed>0 and enemy_status==0){enemy_speed=-0.5;}

Esta comprobación es simultanea, y lo que hace es ralentizar la marcha del enemigo cuando

nos desplazamos hacia el lado contrarió, osea hacia la izquierda.

if (camion_der._x<480 and enemy_status==0){enemy_speed=0;enemy_status=1;}

Cuando alcanzamos la posición x máxima del enemigo, cambiamos el estado del mismo al

estado 1, variable global enemy_status.

En este nuevo estado nuestro enemigo será cuando nos dispare.

if (enemy_status==1){enemy_der.dispara();disparo=true;ndisparos=randRange(2,8);enemy_status=2}

Nuestro enemigo dispara un número entre 2 y 8 proyectiles sobre nosotros y cambia su estado

al valor 2, para comenzar a desplazarse de nuevo hacia la derecha y desaparecer.

if (enemy_status==2 and bg_speed>0){enemy_speed=5;}if (enemy_status==2 and camion_der._x>600){enemy_speed=0;enemy_status=0;//show_enemy_der=false;}

Con estas últimas comprobaciones, desplazamos de nuevo a nuestro enemigo hacia la

derecha, para que desaparezca, y de nuevo inicie la secuencia.

Fijaos como hemos comentado la linea 62, para no establecer a false la variable

show_enemy_der. Si al acabar la secuencia, estableciesemos esta variable a true, como

vimos anteriormente, nuetsro enemigo ya no volvería a aprecer hasta que no la mostraramos.

Daros cuenta como hemos determinado los estados de nuestro enemigo, de una forma

sencilla, cuanto mas compleja sea la acción de nuestro enemigo, mas compleja será la

definición de estados del mismo. Aunque de esta forma observareís como podemos conseguir

un tipo de movimiento con unas pocas instrucciones.

Comentar como la función de las líneas 36 a 38, lo unico que hace es mover nuestra película

del fotograma 1 al fotograma 2, esto es porque hemos hecho una sencilla pantalla de inicio

para nuestro juego donde ponemos las instrucciones de movimiento del mismo, y que no

necesita mas comentarios. Seguidamente y para finalizar, veamos como dispara nuestro

enemigo sobre nosotros.

2 La escena en movimiento.

2.6 Disparo y detección de colisiones.

Para finalizar, veamos como resolvemos la forma de disparar de nuestro enemigo. Mostramos nuevamente el código fuente que vimos anteriormente.

code Código para la instancia del clip de soldado_mc.

En las líneas 8,9 y 10 declaramos sendas variables globales relativas a la acción de disparar.

La función dispara_der que se define entre las líneas 74 a la 91, es la encragada de realizar el

movimiento de los disparos.

Esta función solo actua desde el evento onEnterFrame, línea 16, y para ello requiere que la

variable disparo, sea true (inicialmente es false). El encargado de activar esta variable, osea el

disparo, es nuestro enemigo, cuando se encuentra en el estado 1, línea 66.

Una vez esta variable se active y se establezcan el número de disparos, se llama a la función

dispara_der, por cada evento de fotograma que se produzca.

Para ello, fijaros, como también tenemos una variable de estado del disparo (algo diferente)

disparo_status, inicialmente a 0 y que aumenta conforme realizamos un disparo. línea 77.

Llega a contener el valor del número de disparos. En la línea 76 se observa como añadimos a

la escena un clip de bala, que ya creamos anteriormente en la posición donde se encuentra

nuestro enemigo, que ya está desplazandose hacia la derecha. Al mismo tiempo, entre las

líneas 79 a la 85, tenemos un bucle que se ejecuta tantas veces como balas tenemos en

movimiento (lo limita el valor de disparo_status), y que se encarga de desplazar cada bala. 10

unidades a lo largo del eje x, línea 80.

De las líneas 81 a 85, tenemos una propiedad muy importante de los objetos MovieClip de

Flash, encargada de la detección de colisiones. Se trata de la propiedad hitTest de un

movieClip y que acepta como argumento otro movieclip. Bueno, pues esta función devuelve un

valor de true, cuando ambos movieeClips están en superposición. Esto nos viene de perlas

para testear por cada movimiento del proyectil, si este se haya en contacto con la instancia del

clip soldado_mc y que en nuestro ejemplo se llama hombre, para saber si a nuestro

personaje, lo alcanzó un proyectil, en cuyo caso lo pasaremos al estado de morir. Líneas 81 a

85.

Además de ello, iniciaremos una cuenta linea 83, de 40 eventos de fotograma (además de

parar el fondo de la escena, en la línea 84), y que pasados estos 40 eventos, nuestro soldado

volverá a la vida, para seguir con el juego. Este test se hace entre las líneas 17 a la 20 en los

eventos onEnterFrame.

Finalmente entre las líneas 87 a 90 comprobamos si los disparos salieron por la izquierda de la

pantalla, en cuyo caso reinicializaremos los valores de disparo, que nuestro enemigo se

encargará de reinicializar mas tarde cuando se cumpla otro ciclo.

Y eso es todo en cuanto a la explicación del código. Bajo estas líneas os dejo nuevamente

nuestro prototipo de juego con el fichero fla lista para descargar donde todos los comentarios

que hicimos quizás se os clarifiquen algo mejor.

Descarga del archivo .fla

Por último comentaremos en la siguiente sección algunas anotaciones finales que los autores

queremos realizar acerca del desarrollo de este y otros juegos en Flash que nos parece

necesario para finalizar este tutorial.

2 La escena en movimiento.

2.7 Comentarios finales.

Para finalizar con este tutorial, quisieramos dirigirnos al lector para comentar nuestras

impresiones a lo largo del proceso de este tutorial y que no tienen cabida en otras secciones.

Lo primero, es disculparnos por las posibles faltas de ortografía que el tutorial pudiera tener y

que esperamos revisar en breve.

Dicho esto, también queremos comentaros que nuestra experiencia en el desarrollo de juegos y

sobre todo en Flash, no es mas que la de aficionados en esta materia, y por tanto no queremos

que el lector tome como verdades absolutas lo expuesto en este tutorial, ya que posiblemente

personas con mucha mas experiencia podrían criticar con razón este trabajo.

Aun así sencillamente hemos querido compartir con vosotros el trabajo que hemos realizado

para la confección de este sencillo juego. Por supuesto, pensamos que este trabajo es

mejorable de principio a fin, y nos daremos por satisfechos con que solamente a uno de

vosotros este trabajo le haya sido útil de alguna manera.

Posiblemente no se trate de un código demasiado depurado, pero creemos que lo realmente

importante en este tutorial es que el lector aprenda algunas técnicas en cuanto a lo que

animación e interacción con el usuario en Flash se refiere. La depuración del código puede ser

un proceso laborioso que dejamos al estilo de programación de cada persona.

En cuanto al juego en si, evidentemente se trata de un juego muy sencillo que no ha costado

de desarrollar ni una decima parte de lo que ha costado elaborar este tutorial, y es que a veces

es muy complejo poder expresar las ideas que uno tiene en la cabeza.

Aunque se trata de un juego muy sencillo, creemos que una gran cantidad de las bases para el

desarrollo general de juegos flash, se han expuesto en este tutorial. A partir de esta base, es

sencillo realizar modificaciones que den mas potencia a nuestro juego. Por ejemplo no sería

excesivamente complejo hacer que el mismo enemigo apareciese también por la izquierda a

disparar contra nosotros. Incluso un sistema de puntuaciones o un número de vidas máximo

para nuestro protagonista sería facilmente solucionable con unas cuantas variables e

instrucciones en el lugar adecuado.

También nos podemos plantear crear una variable que aumente o disminuya cuando andamos

a derecha o izquierda y por cada evento de fotograma que suceda, que basicamente situe a

nuestro personaje a lo largo del eje x, con lo que podremos visualizar uno u otro enemigo y

conseguir un final para nuestro nivel.

En fin con el suficiente tiempo, las posibilidades de este u otros juegos, son infinitas y quizás

sea un buen trabajo para la correcta comprensión del lector, el ampliar este juego.

Podemos ampliar nuestro escenario para que fluya de arriba a abajo, establecer plataformas en

las que se apoye nuestro personaje, diferentes movimientos,etc...

Por nuestra parte aquí dejamos este trabajo, del que posiblemente realicemos un nuevo

tutorial, si tiene el suficiente éxito, con nuevas ampliaciones de nuestras técnicas. De todo

corazón esperamos que este tutorial os haya sido útil y esperamos vuestros comentarios en el

mismo tutorial o en los foros de nuestro sitio.

Atentamente Julio.