Crear un juego flash de tipo arcade.

por Julio Laguna - redribera 1 Introduccion y descripcin del problema. 1.1 Introduccin. 1.2 A quien va dirigido este tutorial. 1.3 Descripcin 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 Continuacin... 2.2 Continuacin... 2.3 Simular el movimiento sobre el fondo. 2.4 Aadir un enemigo a nuestro juego. 2.5 Enemigo en accin. 2.6 Disparo y deteccin de colisiones. 2.7 Comentarios finales.

1 Introduccion y descripcin del problema. 1.1 Introduccin.

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. Tambin 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 puntuacn, aunque en el desarrollo de nuestro juego sera muy fcil de implementar, y adems solo veremos el movimiento de un enemigo y como este dispara un arma. Tambin trataremos el tema de las colisiones entre clips de pelcula, que en este caso nos valdrn 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 lneas, encontrares el desarrollo finalizado del fichero Flash (para la versin de Flash 8 y superiores) con el juego que vamos a desarrollar. Tan solo es necesario pulsar el botn 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 dedicacin, as como una buena planificacin del mismo, y sin olvidarnos de la creatividad que el mismo tenga. Es as que juegos con un desarrollo tanto grfico como de programacin importante, no consiguen

llegar a una audiencia buena, incluso me permitira decir, que ni siquiera a divertir. Por ello la creatividad y correcta planificacin 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 prcticamente nula. Aun as estimamos que las tcnicas utilizadas por nosotros pueden ser de inters 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 visualizacin de los ejemplos del tutorial. Desde esta misma pgina en la parte izquierda de navegacin hay un enlace a la pgina de descargas de Flash Player de Adobe.

1.2 A quien va dirigido este tutorial.

Este tutorial est dirigido, a aquellas personas que tengan inters en el desarrollo de juegos en Flash, y que no tengan una nocin avanzada en este tema. Los mtodos utilizados (uso de sprites y otros), son de sobra conocidos por las personas que tienen una experiencia en el mundo del desarrollo de juegos. An as este tutorial pretende centrarse en estos aspectos en conjunto con su aplicacin 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 bsico de Flash, creacin de pelculas y manejo bsico. As mismo el tutorial asume que el lector tiene un conocimiento del lenguaje ActionScript (lenguaje de programacin 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 iniciacin 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 podes acceder a traves del

men

situado

la

izquierda

en

esta

misma

pgina.

Esperamos que el tutorial sea del agrado del lector.

1.3 Descripcin de nuestro juego.

Vamos a incluir este apartado en este captulo de introduccin, para tener una visin global de los objetivos o acciones que va a implementar nuestro juego. Esto es as para que el lector tenga una visin de los objetivos que pretendemos, antes de iniciarse en el desarrollo tcnico del mismo. Por supuesto, para nosotros estos objetivos estn 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. An 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 direccin) - flecha arriba. Detener a nuestro personaje - flecha abajo.

Por otro lado, nuestro personaje va a tener que lidiar contra un tpico 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 camin:

Por otro lado, tendremos la escena (o vulgarmente conocido como nivel en los arcade.), donde transcurrir esta persecucin 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 podremos escena. Observares que es un juego muy sencillo, de hecho no hemos implementado ni siquiera un sistema de puntuacin, ni un nmero de vidas al personaje, para que el juego finalice. Por otro lado, se trata de un nico enemigo muy fcil de esquivar, que apenas aporta complejidad al juego. Es cierto, es un juego soso y aburrido, no lo vamos a negar, pero nuestra diversin 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 cuestin de repetir muchos de estos procesos, de una forma mas o menos creativa. No es nuestra intencin desarrollar un complejo juego, para el que hara falta mucho mas tiempo del que nosotros le podemos dedicar en estos momentos. Nuestra intencin 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. nos disparar montado esquivar en su camin. saltandola. El enemigo, aparecer en la escena de vez en cuando y nos disparar metralla, que solamente Si la metralla nos alcanza, nuestro personaje, perder una vida, y se ver como muere en la

Seguidamente, en el siguiente capitulo, comenzaremos con el desarrollo de nuestra aplicacin 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 podes encontrar varias de las definiciones que se realizan sobre sprites, podes verlo en este
enlace.

Tradicionalmente un sprite, es una imagen, que contiene varias posiciones para un objeto o personaje. Con la aparicin de los juegos 3D, el uso de sprites est decayendo en muchas plataformas, pero aun sigue vigente, y de hecho para la generacin de juegos Flash es una poderosa Aqu tenes una muestra de un Sprite para nuestro presonaje principal. tcnica.

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 mayora de los sprites y grficos que nosotros utilizaremos en este juego, los hemos obtenido del sitio Sprite Database.. Podes echar un vistazo a esta pgina donde existen

multitud de sprites listos para utilizar en nuestros juegos, cortesa de usuarios altruistas como nosotros. El uso de sprites para animar nuestros personajes es una excelente tcnica para utilizar en Flash, ya que es un entorno basado en la animacin por fotogramas, as es que podemo usar estos archivos, para generar los fotogramas de movimientos de nuestros personajes u objetos. Tambin por supuesto, podemos generar los sprites nosotros mismos con nuestros propios dibujos para dar un toque de originalidad en nuestros juegos. Pdemos utilizar varias tcnicas 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 funcin de la animacin. No obstante la tcnica que nosotros utilizaremos, es la de mediante un editor grfico del tipo FireWorks o Photoshop, utilizar la varita mgica para seleccionar cada personaje. Puesto que el fondo en el sprite es de color uniforme, lo seleccionaremos sin ningn 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 estn 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 podres 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 recordas del captulo 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, sern suficientes. Es muy importante, que las imagenes estn sobre fondo transparente (formatos gif), ya que las vamos a desplazar sobre un fondo dibujado, y no quedara bonito ver moverse un rectangulo en blanco sobre el fondo. Estas imagenes, que hemos generado (y que podes almacenar en vuestro disco pinchando sobre ellas con el botn derecho del ratn y seleccionando guardar como...), nos servirn para importarlas a la biblioteca de nuestro fichero Flash y componer un clip de pelcula 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 camin tambin 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

cdigo

finalizado.

El

formato

es

el

de

Flash

8.

Dentro de este fichero, encontrares en la biblioteca una cantidad de imagenes que hemos importado adems de otros objetos, uno de ellos es el movieclip llamado soldado_mc, cuya linea de tiempo en Flash es la misma que podes 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. Tambin 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 funcin de las acciones que realicemos y la propia lgica del juego. Cuando pensamos en la forma de moverse de nuestro personaje (en el captulo 1 lo vimos), sin darnos cuenta ya hemos realizado una aproximacin 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 fijas en la linea de tiempo del movieclip soldado_mc (figura 1 o en el fichero fuente), observares 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 siguientes: del Sprite que vimos en el captulo anterior. Por ejemplo la capa andarizquierda contiene la secuencia de fotogramas con las imagenes

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 tcnica para conseguir una animacin con una frecuencia que nos agradaba, en base a la velocidad de animacin 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 podes 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 tcnica que hemos utilizado, es la de refundir, en un nico clip de pelcula, todos los estados posibles de nuestro personaje, tanto en lo relativo a animacin de movimientos como en acciones que puede realizar. Las diferentes animaciones en las que hemos utilizado Sprites, observares que no estn superpuestas, ya que nos desplazaremos a un segmento u otro de la lienea de tiempo del clip, en funcin del estado de nuestro personaje. As en una nica pelcula, tenemos toda la lgica de movimientos de nuestro personaje. En realidad hemos utilizado esta tcnica 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 plicula principal (lo que es el juego en si). Seguidamente vamos a explicar mas detalladamente el contenido de todas las capas, as como todo el cdigo 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 animacin 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 veas como hemos incorporado un sonido a la animacin 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 cdigo 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 animacin 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. Adems 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 cdigo asociado a un nmero de fotograma en la linea de tiempo. De hecho en el primer fotograma, adems estn todas las funciones propias del clip de pelcula soldado_mc Hemos declarado acciones (en ActionScript) en once fotogramas de esta capa. La lgica principal y la definicin de funciones, estn en el primer fotogrma. Previo a ello, vamos a ver el cdigo 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 fcil referirnos a ellos en lugar de por el nmero de fotograma. Cdigo ActionScript del fotograma 3: gotoAndPlay("izqandar"); status="izquierda"; En este cdigo 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 pelcula al fotograma etiquetado como izqandar Cdigo ActionScript del fotograma 7: gotoAndPlay("derandar"); status="derecha"; Similar al anterior, pero referente a la intencin de andar a la derecha. Cdigo 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 animacin transitorio, de ah, que hallamos, establecido que debemos hacer, en funcin 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 cdigos fuente para los fotogramas 15 y 24 que estn 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 retornamos al a fotograma izqandar. 15. Cuando acabamos con la animacin de los fotogramas 15 al 24, volvemos a empezar y Realmente, esto tiene una explicacin, 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 direccin, 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 tambin lo podriamos haber realizado, de modo que el personaje, solo se moviera cuando mantenemos pulsada una tecla, no obstante, no es significativo. Los cdigos fuente para los fotogramas 27 y 36 realizan la misma funcin pero en el movimiento a la derecha: status="derandar"; if(jumping){stopAllSounds();}

gotoAndPlay("derandar"); Cdigo ActionScript del fotograma 40: stop(); status="paradofrente"; Simplemente para al personaje, no contiene animacin y establece el status paradofrente Los cdigos fuente para los fotogramas 45 y 54 son los relativos a la animacin de muerte: status="muerto";

stop(); A diferencia del movimiento a derecha e izquierda, aqu no repetimos la animacin y en el fotograma 54 la paramos con la sentencia stop(); No vamos a tener a nuestro personaje muriendo continuamente.

A continuacin en la siguiente pgina 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 cdigo fuente ActionScript para el fotograma 1 del clip soldado_mc.

code
Cdigo 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. Adems daros cuenta, que aunque inicalmente hablamos de que nuestro protagonista, tendra la capacidad de salto, anteriormente no hemos visto generada ninguna capa para salto en la linea generando de una tiempo funcion del llamada clip. salta. Esto es debido a que realmente la forma de saltar de nuestro personaje, la hemos planteado Vamos a comentar todas las funciones de este cdigo para ver las acciones que realizan: funcion Realmente, anda_izquierda estas dos funciones las y funcion podriamos haber gira_izquierda: refundido en una.

No tienen demasiado misterio, y esque en funcin 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 accin. funcion anda_derecha y funcion gira_derecha:

Estas funciones son anlgas a las anteriores que hemos visto. funcion realiza ninguna accin. funcion anterior del cual procedamos. funcion salta y funcin salto_anim: morir: parar:

Tambin anloga a la anterior, ya que en funcin del estado en el que estamos, para o no

Esta funcin directamente mueve la cabeza lectora al fotograma morir, sin importarle el estado

Estas dos funciones, son las encargadas de simular un salto de nuestro protagonista. Realmente, la tcnica que van a utilizar es la de cambiar la propiedad _y de nuestro clip de pelcula en funcin de unas formulas determiandas. En la lnea 65 podes observar como existe

una comprobacin 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 fsicas 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. Podes aprender mas acerca de este tipo de movimiento en Flash con otro tutorial que
publicamos anteriormente aqu en redribera.

La funcin salta, adems de inicializar estas variables (aceleracin, velocidad inicial, posicin inicial, sireccin del salto y tiempo), lo que hace es crear una funcin de intervalo (linea 74), previo a ello eliminamos algn posible residuo del intervalo que pudiera quedar (lnea 73). El intervalo se establece para la funcin 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 pelcula. LA funcin salto_anim() en realidad, utiliza la fsica que hemos establecido para calcular la posicin _y de nuestro clip soldado_mc en funcin del valor de las variables fsicas 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 posicin _y original), detenemos la animacin de la funcin (lnea 99) y reestablecemos la posicin original del clip (lnea 95). Esto es debido a que en los clculos fsicos, pudieramos tener una pequea desviacin del valor _y. Las lnes 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 veres mas adelante (ya lo utilizamos para saber si debemos parar el sonido de los pasos), porque segn la lgica de nuestro juego, no vamos a permitir cambiar de estado a nuestro personaje, cunado ste, est saltando. Solo con una excepcin, 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 lgica del juego, en la escena principal ser donde las realicemos. Si habes descargado el cdigo fuente, en la escena principal, la instancia de soldado_mc, llamada hombre (en el fotograma 2 de la escena principal), y desplegas las acciones para hombre, veres como all estn especificadas estas restricciones. Con la finalizacin de este soldado_mc, ya tenemos un clip de pelcula, que podemos insertar en otros clips de pelcula y que es capaz de soportar diferentes estados de animacin mediante la correcta llamada a las funciones que se declaran en el ActionScript del fotograma 1. Bajo

estas lineas observares 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 segn pulsamos la tecla correcta. Nuestro hombre en estos momentos est esttico en la escena. Y llegado a este punto nos debemos plantear como se mover por la pelcula, para lo cual hay multitud de tcnicas. Esto es todo, respecto al clip soldado_mc, seguidamente veremos como procesar la lgica de nuestro juego. Es decir el movimiento de nuestro personaje mediante la pulsacin de teclas, la IA de nuestro enemigo y la simulacin 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 tcnicas, pero casi todas ellas, estn basadas en el scrolling del escenario. Es decir, nuestro personaje se queda fijo en un punto, o como mucho tiene limitado el punto mximo 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 tcnica 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 lneas tenes el ejemplo de como realizar estas acciones implementado (si el soldado no responde a la pulsacion de las flechas, hacer un click sobre la pelcula 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 quedara un bonito fondo si fin circular. Para conseguir la animacin del fondo en uno u otro sentido y adems que este sea infinito, lo que hemos hecho (lo podes ver si descargas 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 cdigo 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
Cdigo para el fotograma 1 de la pelcula.

Este cdigo 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. Adems 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 podes observar como est compuesto. Si os fijas hemos definido dos variables bg_speed y bg_width (lnes 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 pelcula, lneas 6 a 8 onEnterFrame, procesamos la funcin mueve_fondo. La funcin mueve_fondo, es dependiente tanto de la velocidad del fondo bg_speed, como del ancho de la escena, bg_width. Por tanto si observas bien el cdigo fuente y en funcin 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 adems 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 cdigo asignado a la instancia del clip de nuestro protagonista.

code
Cdigo para la instancia del clip de soldado_mc.

Fijaros como en este cdigo, adems de cambiar el estado de nuestro protagonista en funcin 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 cdigo 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 pdisteis comprobar en el ejemplo al principio de esta pgina. Fijaos tambin 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 direccin, bien andando a la izquierda, o bien andando a la derecha. El cdigo ActionScript no necesita mas comentario, y podes descargar el fichero de ejemplo (al principio de la pgina), 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 Aadir 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 accin tpica 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 tcnica 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 pelcula al que llamaremos enemy1.

lnea de tiempo para el clip enemy1.

function dispara(){ this.gotoAndPlay("disparo"); } Cdigo ActionScript para el fotograma 1 de enemy1 stop(); Cdigo ActionScript para el fotograma 14 de enemy1 Como podres observar, en el fotograma 1, declaramos la funcin dispara, que ser la encargada de generar la animacin de nuestro enemigo disparando contra nosotros. El Cdigo del fotograma 14, detien el clip, para que nuestro enemigo no dispare continuamente, sino solo cuando nosotros llamemos a la funcin dispara.

Hemos pensado, que nuestro enemigo, vendr a dispararnos, montado en un camin por la carretera por la cual transita nuestro protagonista. Tambin utilizaremos algunos sprites para generar la animacin del camin en el que montar nuestro enemigo. Imagenes para simular el camin en el que monta nuestro enemigo:

A diferencia de la animacin de nuestro enemigo, el clip que generaremos para el movimiento del camin, 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, podres observar que nuestro enemigo y el camin estn al reves que nuestro sprite, esto es facil de conseguir insertando la instancia en la escena de flash y haciendo una transformacin de voltear horizontalmente. En nuestro juego, nuestro enemigo siempre aparecer por el lado derecho de la pelcula. Y aunque en la imagen mas arriba y en el fichero fuente podemos ver a nuestro enemigo, en tiempo de ejecucin este no se ve, ya que hemos incorporado una mascara y adems inicialmente esta posicionado en la escena, fuera del area visible cuando la pelcula esta en ejecucin. Ahora nuestra misin ser generar el desplazamiento del camin (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 (bsica) de nuestro enemigo, hemos de crear un nuevo clip al que llamaremos disparo1 y el cual contiene una pequea animacin de un simple punto, y que ser el que utilizaremos como proyectil de nuestro enemigo. Todos estos clips, los podes encontrar en el fichero fla finalizado, del cual os vuelvo a dejar un enlace
aqu.

2 La escena en movimiento. 2.5 Enemigo en accin.

Llegados a este punto, debemos proceder, al igual que hicimos con nuestro protagonista, a generar la animacin de nuestro enemigo. Al igual que hicimos anteriormente nos debemos plantear toda la lgica de sus acciones. Y al igual que hicimos antes la tcnica 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 camin. 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 camin, 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 camin 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 aadir algo (muy poca) de dificultad a nuestro protagonista, nuestro enemigo disparar rafagas con una cantidad aleatoria de proyectiles. Osea que algunas rafagas sern muy faciles de saltar, y otras, no lo sern 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 anlogo al utilizado por nuestro enemigo. Este tipo de movimiento de un enemigo, era muy clsico con los enemigos finales de las antiguas maquinas recreativas. Evidentemente, no se trata de un enemigo complejo, adems no establecemos ningn tipo de sistema de puntuacin. 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 intencin en este caso, es que el lector vea los procedimientos utilizados y los adecue a la generacin de sus propios juegos. Seguidamente vamos a ver y comentar el cdigo necesario para realizar estas acciones. Queremos tambin apuntar, que por simplicidad el cdigo necesario para el movimiento de nuestro enemigo (as como anteriormente el

movimiento del fondo), lo hemos implementado en la escena principal de nuestra pelcula Flash. Por supuesto, en un desarrollo de mayor envergadura, el lector debera plantearse, una mejor distribucin del cdigo fuente, asi como la programacin de clases para obtener un cdigo suficientemente legible y estructurado, para un mejor desarrollo de la aplicacin. 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 cdigo 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
Cdigo para la instancia del clip de soldado_mc.

Ya hemos explicado algunas de las funciones de este cdigo, en lo referente al movimiento del fondo sincronizado con el movimiento de nuestro personaje. De la lnea 40 a la lnea 72, encontramos la funcin mueve_enemigo1(). Esta funcin lo primero que hace es mirar el valor de la variable global show_enemy_der (en la lnea 6). Si esta variable se establece a falso, nuestra funcin 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 lnea 15 del cdigo, vemos que dentro de la funcin onEnterFrame, hacemos una llamada continua a la funcin mueve_enemigo1(). Por tanto la funcin est en ejecucin enemigo en base a las comprobaciones que realizamos en las lneas 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 pelcula pertenecientes a nuestro enemigo y al camin, simultaneamente. Por ejemplo si nos fijamos en este cdigo perteneciente a la funcin if (camion_der._x>480 and enemy_status==0){ enemy_speed=-2; } Lo que hacemos, es que mientras la posicin 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 cdigo al final de la funcin es el encargado de actualizar las posiciones del enemigo cada vez que se procesa un fotograma de la escena principal. continua. Gracias a esta ejecucin continua, nos podemos plantear los cambios de estado de nuestro

if (camion_der._x>480 and bg_speed>0 and enemy_status==0){ enemy_speed=-0.5; } Esta comprobacin 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 posicin x mxima 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 nmero 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 volvera 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 accin de nuestro enemigo, mas compleja ser la definicin de estados del mismo. Aunque de esta forma observares como podemos conseguir un tipo de movimiento con unas pocas instrucciones. Comentar como la funcin de las lneas 36 a 38, lo unico que hace es mover nuestra pelcula 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 deteccin de colisiones.

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

code
Cdigo para la instancia del clip de soldado_mc.

En las lneas 8,9 y 10 declaramos sendas variables globales relativas a la accin de disparar. La funcin dispara_der que se define entre las lneas 74 a la 91, es la encragada de realizar el movimiento de los disparos. Esta funcin solo actua desde el evento onEnterFrame, lnea 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 por enemigo, cada cuando evento se de encuentra en el estado que se 1, lnea 66. Una vez esta variable se active y se establezcan el nmero de disparos, se llama a la funcin dispara_der, fotograma produzca. Para ello, fijaros, como tambin tenemos una variable de estado del disparo (algo diferente) disparo_status, inicialmente a 0 y que aumenta conforme realizamos un disparo. lnea 77. Llega a contener el valor del nmero de disparos. En la lnea 76 se observa como aadimos a la escena un clip de bala, que ya creamos anteriormente en la posicin donde se encuentra nuestro enemigo, que ya est desplazandose hacia la derecha. Al mismo tiempo, entre las lneas 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, lnea 80. De las lneas 81 a 85, tenemos una propiedad muy importante de los objetos MovieClip de Flash, encargada de la deteccin de colisiones. Se trata de la propiedad hitTest de un movieClip y que acepta como argumento otro movieclip. Bueno, pues esta funcin devuelve un valor de true, cuando ambos movieeClips estn en superposicin. 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. Lneas 81 a 85. Adems de ello, iniciaremos una cuenta linea 83, de 40 eventos de fotograma (adems de parar el fondo de la escena, en la lnea 84), y que pasados estos 40 eventos, nuestro soldado volver a la vida, para seguir con el juego. Este test se hace entre las lneas 17 a la 20 en los eventos onEnterFrame. Finalmente entre las lneas 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 explicacin del cdigo. Bajo estas lneas os dejo nuevamente nuestro prototipo de juego con el fichero fla lista para descargar donde todos los comentarios que hicimos quizs se os clarifiquen algo mejor.

Descarga del archivo .fla

Por ltimo comentaremos en la siguiente seccin 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 ortografa que el tutorial pudiera tener y que esperamos revisar en breve. Dicho esto, tambin 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 podran criticar con razn este trabajo. Aun as sencillamente hemos querido compartir con vosotros el trabajo que hemos realizado para la confeccin 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 cdigo demasiado depurado, pero creemos que lo realmente importante en este tutorial es que el lector aprenda algunas tcnicas en cuanto a lo que animacin e interaccin con el usuario en Flash se refiere. La depuracin del cdigo puede ser un proceso laborioso que dejamos al estilo de programacin 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 sera excesivamente complejo hacer que el mismo enemigo apareciese tambin por la izquierda a disparar contra nosotros. Incluso un sistema de puntuaciones o un nmero de vidas mximo para nuestro protagonista sera facilmente solucionable con unas cuantas variables e instrucciones en el lugar adecuado. Tambin 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 quizs sea un buen trabajo para la correcta comprensin 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 tcnicas. De todo corazn 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.