You are on page 1of 25

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

Saltar hacia arriba (en dirección) . deberá esquivar sus . Esto es así para que el lector tenga una visión de los objetivos que pretendemos. Con estas teclas podremos realizar las siguientes acciones: • • • • Movernos hacia la izquierda . será el protagonista principal. para tener una visión global de los objetivos o acciones que va a implementar nuestro juego.menú situado a la izquierda en esta misma página. Por supuesto. Nuestro juego. inicialmente va a consistir en un personaje: protagonista Este personaje. Movernos hacia la derecha . una vez hemos finalizado nuestro desarrollo. Esperamos que el tutorial sea del agrado del lector. izquierda y derecha. estos objetivos vayan cambiando. Aún así creemos que hará mas comprensible la lectura.3 Descripción de nuestro juego. pero esto no será tan obvio cuando estemos empezando con un desarrollo nuevo.flecha abajo. Por otro lado. para nosotros estos objetivos están claros.flecha derecha. Su enemigo será este personaje: enemigo que disparará sin cuartel contra nuestro protagonista. 1. cuyo control lo decidiremos los jugadores mediante las teclas de cursor. antes de iniciarse en el desarrollo técnico del mismo. y lo normal es que a lo largo del tiempo del desarrollo.flecha arriba. Flecha arriba. y este. nuestro personaje va a tener que lidiar contra un típico enemigo al mas puro estilo arcade. Vamos a incluir este apartado en este capítulo de introducción.flecha izquierda. abajo. Detener a nuestro personaje .

saltandola. Por simplicidad (que luego veremos) y porque es un sistema de de niveles bastante habitual. sin que sea demasiado perceptible para el usuario (ni importante en el juego). nuestro nivel. podemos generar una escena continua en la que se repite el fondo por el que pasamos. con un fondo reversible. vendrá a por nosotros montado en su flamante camión: Por otro lado. esquivar las rafagas de metralla que nuestro enemigo podremos escena. quien decida hasta donde quiere llegar en este apasionante mundo de los videojuegos Flash. de una forma mas o menos creativa. Observareís que es un juego muy sencillo. deberá ser infinito. perderá una vida. Luego será Usted mismo. es un juego soso y aburrido. que es la de montar estas sencillas acciones. tendremos la escena (o vulgarmente conocido como nivel en los arcade. Nuestra intención es que el lector aprenda algunos trucos y que comience a familiarizarse con Flash para resolver este tipo de aplicaciones. se trata de un único enemigo muy fácil de esquivar. donde transcurrirá esta persecución entre nuestros personajes. que solamente Si la metralla nos alcanza. es decir que nunca se acabe. pero nuestra diversión va a ser otra. aparecerá en la escena de vez en cuando y nos disparará metralla. Fondo para utilizar en el nivel de la escena de nuestro juego. nuestro personaje. Una vez vistos estos conceptos. ni cuando andamos hacia la izquierda. y se verá como muere en la . que apenas aporta complejidad al juego. que van a hacer complejo nuestro trabajo. El objetivo de nuestro juego. entenderemos que mejorar nuestro juego será cuestión de repetir muchos de estos procesos. va a ser muy sencillo. Por otro lado. ni un número de vidas al personaje. para el que haría falta mucho mas tiempo del que nosotros le podemos dedicar en estos momentos. Aquí voy a dejar un enlace hacia el fondo que utilizaremos como nivel de la escena. El enemigo. En realidad es algo similar a los dibujos animados antiguos. no lo vamos a negar.). ni cuando andamos hacia la derecha. Es cierto. nos disparará montado esquivar en su camión. para que el juego finalice. No es nuestra intención desarrollar un complejo juego. de hecho no hemos implementado ni siquiera un sistema de puntuación. Nuestro enemigo.disparos utilizando su potente salto.

Lo que se conoce como Sprite. podeís verlo en este enlace. Con la aparición de los juegos 3D. el uso de sprites está decayendo en muchas plataformas..etc.. y de hecho para la generación de juegos Flash es una poderosa Aquí teneís una muestra de un Sprite para nuestro presonaje principal. pero aun sigue vigente.1 El uso de sprites. normalmente suele tener varias definiciones. PlayStation. la mayoría de los sprites y gráficos que nosotros utilizaremos en este juego. Podeís echar un vistazo a esta página donde existen . Existen multitud de sitios web donde obtener sprites de forma gratuita.Seguidamente. técnica. e incluso numerosos programas para proceder al ripeo de sprites desde juegos en diferentes plataformas: Neo-Geo. PC. que contiene varias posiciones para un objeto o personaje. GameBoy. los hemos obtenido del sitio Sprite Database. En concreto. en el siguiente capitulo. En la wikipedia podeís encontrar varias de las definiciones que se realizan sobre sprites. 2 La escena en movimiento.. Tradicionalmente un sprite. Sprites para nuestro protagonista. es una imagen. 2. comenzaremos con el desarrollo de nuestra aplicación desde cero..

lo seleccionaremos sin ningún problema. En concreto los relativos a giro del personaje. Por ejemplo. Puesto que el fondo en el sprite es de color uniforme. Por ejemplo con una única imagen como la mostrada arriba. sino unos cuantos de ellos. y estos en los que se ve a nuestro personaje como le han pegado un tiro y poco a poco va muriendo. Pdemos utilizar varias técnicas para el uso de sprites en nuestras animaciones con Flash. ya que es un entorno basado en la animación por fotogramas. es la de mediante un editor gráfico del tipo FireWorks o Photoshop. Finalmente debemos generar tantas imagenes como frames diferentes queramos utilizar para un personaje en el desarrollo de nuestro juego Flash. así es que podemo usar estos archivos. No obstante la técnica que nosotros utilizaremos. andar hacia la derecha. Imagenes para el movimiento de andar hacia la derecha: Imagenes para el movimiento de andar hacia la izquierda: Imagenes para realizar giros del personaje: . podemos generar los sprites nosotros mismos con nuestros propios dibujos para dar un toque de originalidad en nuestros juegos. podemos dibujar diferentes áreas en función de la animación.multitud de sprites listos para utilizar en nuestros juegos. cortesía de usuarios altruistas como nosotros. También por supuesto. Aquí dejo una lista completa de las imagenes que hemos generado a partir de este sprite. utilizar la varita mágica para seleccionar cada personaje. El uso de sprites para animar nuestros personajes es una excelente técnica para utilizar en Flash. para generar los fotogramas de movimientos de nuestros personajes u objetos. y que ya están exportadas como formato gif y con transparencia. nosotros para nuestro juego. andar hacia la izquierda. no utilizaremos todos los movimientos del personaje.

Como estos movimientos los realizaremos en un escenario de dos dimensiones. 2 La escena en movimiento. derecha. Es muy importante. 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. tan solo hemos escogido un subconjunto de las imagenes del sprite. veremos como componer todos estos movimientos para nuestro personaje. las imagenes que hemos recortado del sprite. solo nos planteamos que nuestro personaje tuviera los movimientos de andar izquierda. ya que si recordaís del capítulo anterior. que las imagenes estén sobre fondo transparente (formatos gif).Imagenes para simular la muerte del personaje: Como podreís observar. 2. parar y morir. serán suficientes.. y no quedaría bonito ver moverse un rectangulo en blanco sobre el fondo. Estas imagenes. ya que las vamos a desplazar sobre un fondo dibujado. saltar. 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..2 Componer los movimientos y animaciones del protagonista en Flash. En el siguiente apartado. Para las animaciones de nuestro enemigo y el camión también utilizaremos sprites que mostraremos en su momento.). para utilizar y que van a ser suficientes para utilizar en nuestro juego. .

los separa un fotograma (que no es clave). Cada fotograma clave. en base a la velocidad de animación general del fichero. correspondiente al fotograma 15 de la capa Acciones es el siguiente. El concepto de estado. Cuando pensamos en la forma de moverse de nuestro personaje (en el capítulo 1 lo vimos). 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).Si no descargasteis el fichero fuente. Estos fotogramas clave. y que repite la imagen. El codigo fuente (ActionScript). So os fijaís en la linea de tiempo del movieclip soldado_mc (figura 1 o en el fichero fuente). Realmente hemos utilizado esta técnica para conseguir una animación con una frecuencia que nos agradaba. comienza a tener fotogramas clave. sin darnos cuenta ya hemos realizado una aproximación a los posibles estados de nuestro personaje. Esto es debido a que nuestros personajes. Tendremos tantos estados como necesitemos en el fluir de nuestro programa. es muy importante cuando estamos realizando un juego como este. code Figura 1 . saltar y morir. encontrareís en la biblioteca una cantidad de imagenes que hemos importado además de otros objetos.movieclip soldado_mc El clip soldado_mc contiene todas las animaciones de movimiento para controlar a nuestro protagonista. Por ejemplo la capa andarizquierda contiene la secuencia de fotogramas con las imagenes La capa andarizquierda. aquí os dejo de nuevo el enlace con el código finalizado. que se puso en el inicio del tutorial. hacia la izquierda. Dentro de este fichero. que en este caso es de 12fps. contiene una de las imagenes mostradas anteriormente. . observareís como hemos generado 7 capas en las que hemos ido generando varios fotogramas clave. El formato es el de Flash 8. parar. a partir del fotograma 15 de la linea de tiempo. ademas. uno de ellos es el movieclip llamado soldado_mc. También contiene las funciones necesarias para fluir de un estado a otro de nuestro personaje. contienen las imagenes que hemos ido generando a partir siguientes: del Sprite que vimos en el capítulo anterior. 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. andar hacia la derecha.

2 Componer los movimientos y animaciones del protagonista en Flash. ya comentaremos esto. es muy importante en el clip soldado_mc. todos los estados posibles de nuestro personaje. Las imagenes que fluyen desde el fotograma 45 al 54 son las siguientes..status="izqandar". Así en una única película. porque en todo momento contiene el estado en el que se encuentra nuestro personaje. Las diferentes animaciones en las que hemos utilizado Sprites. code Figura 1 . 2 La escena en movimiento. ya que nos desplazaremos a un segmento u otro de la lienea de tiempo del clip. tanto en lo relativo a animación de movimientos como en acciones que puede realizar. Seguidamente vamos a explicar mas detalladamente el contenido de todas las capas. En realidad hemos utilizado esta técnica de poner todos los movimientos posibles de nuestro personaje en un único movieclip. como una referencia constante a nuestro personaje dentro de la pélicula principal (lo que es el juego en si). 2. if(jumping){stopAllSounds(). simplemente define la variable status con el valor izqandar. Por tanto la técnica que hemos utilizado.} Como podeís observar. en función del estado de nuestro personaje. en un único clip de película. si está saltando. observareís que no están superpuestas.movieclip soldado_mc Ya vimos el contenido de la capa andar izquierda. si esta parado. para poder utilizar el clip. El estado es muy importante.. 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. Si esta andando hacia la izquierda. tenemos toda la lógica de movimientos de nuestro personaje. Por otro lado para todos los sonidos que hubiesen si estamos saltando. La variable status. porque así sabremos que es lo que está haciendo nuestro personaje en todo momento.. es la de refundir. . así como todo el código ActionScript necesario para el correcto fluir entre estados de nuestro personaje.

En esta capa coinciden varios estados transitorios. la cual contiene ocho imagenes que completan un giro de 360º de nuestro personaje. tanto de andar a la izquierda como andar a la derecha. en concreto en el fotograma uno. Anteriormente visteis un ejemplo en el código ActionScript de andar izquierda. que no debemos confundir con el estado paradofrente. como izquierda y derecha. Además es en esta capa. En el resto de estados de nuestro personaje. Tan solo merece la pena comentar. El lector con este ejemplo estimamos que no tendrá mayor problema de incorporar nuevos sonidos a mas acciones. cambiamos a andar a la derecha. que simula los pasos al andar de nuestro protagonista. Esta es una muestra para que los lectores veaís como hemos incorporado un sonido a la animación de nuestro personaje. Esta capa incorpora tan solo el estado paradofrente. que el sonido lo iniciamos cuando nos situamos en los fotogramas de inicio. se produce un fluir similar a un giro para cambiar de un estado a otro. La capa paradofrante incorpora tan solo una imagen que es la siguiente. tan solo incorpora un fichero de sonido en mp3. Ya no hemos incorporado mas sonidos en nuestro juego. que no contiene ninguna animación y es el estado al que irá nuestro personaje. Aquí os dejo el enlace al fichero de sonido en mp3 . por ejemplo cuando andamos hacia la izquierda y de repente. donde se encuentra el estado inicial de nuestro personaje. el sonido se deshabilita.La capa sonido. para simular un fluir mas agradable en las animaciones cuando estando en un estado cambiamos a otro. porque lo consideramos trivial y similar a este ejemplo. . Llegamos a la capa giro. cuando pulsemos la flecha abajo y por tanto quedará parado. Los fotogramas de esta capa los utilizamos.

} if (status=="paradofrente") {gotoAndPlay("derecha"). nos fijamos en la imagen del fotograma 8 (capa de giro). La lógica principal y la definición de funciones. Código ActionScript del fotograma 8: if (status=="frente") {gotoAndPlay("derecha"). Código ActionScript del fotograma 3: gotoAndPlay("izqandar"). en realidad es un estado transitorio. están en el primer fotogrma. De hecho en el primer fotograma.} Si. (el fotograma anterior). si nuestro status es el de frente. estado paradofrente.} if (status=="derandar") {gotoAndPlay("frente").Para la capa de acciones. en función del estado desde el que procede nuestro personaje. Previo a ello. si estamos andando hacia la derecha y alcanzamos este fotograma. desde este fotograma (el 7) cambiaremos de status y continuaremos hacia andarderecha. de ahí. así nos será mas fácil referirnos a ellos en lugar de por el número de fotograma. Como vimos. podemos observar. que es mucho mas sencillo. que hallamos. establecido que debemos hacer. Nota: Los fotogramas que inician estados los hemos etiquetado con un nombre. que esl el status inicial. status="derecha". pero referente a la intención de andar a la derecha. que se trata de un estado en la animación transitorio. Es decir. tan solo establecemos el estado (con status) del personaje a izquierda. realmente. Seguidamente saltamos la cabeza lectora de la película al fotograma etiquetado como izqandar Código ActionScript del fotograma 7: gotoAndPlay("derandar"). Lo mismo sucede si nuestro status es el de paradofrente. 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. Similar al anterior. Sin embargo. nuestro siguiente paso será el de detenernos. y alcanzamos este fotograma. En este código correspondiente al fotograma 3. vamos a ver el código del resto de fotogramas. 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. Los códigos fuente para los fotogramas 15 y 24 que están estrechamente ligados. será para inmediatamente continuar hacia el fotograma marcado como derecha. son respectivamente los siguientes: . status="izquierda".

stop(). Código ActionScript del fotograma 40: stop(). solo se moviera cuando mantenemos pulsada una tecla. A diferencia del movimiento a derecha e izquierda. Efectivamente no necesitan mas comentarios que los de establecer el estado de nuestro personaje retornamos al a fotograma izqandar. 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". pero también lo podriamos haber realizado. Cuando acabamos con la animación de los fotogramas 15 al 24. Esto lo hemos hecho así por simplicidad. de modo que el personaje.} gotoAndPlay("derandar").status="izqandar". . no obstante. aquí no repetimos la animación y en el fotograma 54 la paramos con la sentencia stop(). if(jumping){stopAllSounds(). nuestro personaje. esto tiene una explicación. para que cuando el usuario. pulse sobre la flecha izquierda. 15. No vamos a tener a nuestro personaje muriendo continuamente. y es que hemos planteado nuestro juego. volvemos a empezar y Realmente. if(jumping){stopAllSounds(). Los códigos fuente para los fotogramas 27 y 36 realizan la misma función pero en el movimiento a la derecha: status="derandar". no parará de moverse en esa dirección. Simplemente para al personaje.} gotoAndPlay("izqandar"). o derecha. que es la tecla para parar a nuestro personaje. hasta que no pulsemos la tecla de flecha abajo. no es significativo. status="paradofrente".

anteriormente no hemos visto generada ninguna capa para salto en la linea generando de una tiempo funcion del llamada clip. 2. code Código para el fotograma 1 de soldado_mc. sin importarle el estado Estas dos funciones. para o no Esta función directamente mueve la cabeza lectora al fotograma morir.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. que si estamos muertos. tendría la capacidad de salto. Esto es debido a que realmente la forma de saltar de nuestro personaje. Es interesante hacer notar. funcion anda_derecha y funcion gira_derecha: Estas funciones son análgas a las anteriores que hemos visto. No tienen demasiado misterio. está el código fuente ActionScript para el fotograma 1 del clip soldado_mc. Además daros cuenta. funcion realiza ninguna acción. la hemos planteado Vamos a comentar todas las funciones de este código para ver las acciones que realizan: funcion Realmente. son las encargadas de simular un salto de nuestro protagonista. Realmente. que aunque inicalmente hablamos de que nuestro protagonista. En la línea 65 podeís observar como existe . salta.2 Componer los movimientos y animaciones del protagonista en Flash. funcion salta y función salto_anim: morir: parar: También análoga a la anterior. Realmente en este fotograma hemos generado todas las funciones para pasar a los estados correspondientes y que vimos anteriormente de nuestro protagonista. no se realiza ninguna acción. anda_izquierda estas dos funciones las y funcion podriamos haber gira_izquierda: refundido en una. y esque en función del estado (definido por la variable status) en el que se encuentre nuestro protagonista. Bajo estas lineas. ya que en función del estado en el que estamos. mueven la cabeza lectora del clip a uno u otro fotograma. 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. funcion anterior del cual procedamos.

Podeís aprender mas acerca de este tipo de movimiento en Flash con otro tutorial que publicamos anteriormente aquí en redribera. y lo vereís mas adelante (ya lo utilizamos para saber si debemos parar el sonido de los pasos). con el top del suelo. deberemos llamar a la funcion salta(). la instancia de soldado_mc. posición inicial. se tratará de un movimiento acelerado. en la escena principal será donde las realicemos. 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. que establecen respectivamente e true o false. vereís como allí están especificadas estas restricciones. si que permitiremos pasar al estado de muerto y continuar con el salto. cunado éste. Cuando queramos que nuestro protagonista salte. sirección del salto y tiempo). esté saltando. como hicimos con otras. no vamos a permitir cambiar de estado a nuestro personaje. Esto es así porque a la hora de implementar nuestro salto nos vamos a basar en propiedades físicas reales de movimiento. La función salta. y desplegaís las acciones para hombre. Las línes 78 y 97 respectivamente. detenemos la animación de la función (línea 99) y reestablecemos la posición original del clip (línea 95). en este caso los valores up y down. jumpDir y yini. además de inicializar estas variables (aceleración. que será cuando le disparen y lo alcancen. izquierda. velocidad inicial. sinó que en la propia lógica del juego. derandar e izqandar. previo a ello eliminamos algún posible residuo del intervalo que pudiera quedar (línea 73). porque según la lógica de nuestro juego. en nuestro caso 25 y teniendo en cuenta la velocidad en fps de nuestra película. El intervalo se establece para la función salto_anim(). Con la finalización de este soldado_mc. hemos tocado el suelo (osea nuestra posición _y original). ya tenemos un clip de película. al estilo Manic Miner (juego del ZX Spectrum de Sinclair) o a lo Michael Jordan :) . Lo que pretendemos es simular un salto variando la propiedad _y de nuestro clip. no las vamos a controlar en el clip soldado_mc. cuando en un movimiento down. paradofrente o muerto. 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. LA función salto_anim() en realidad. el salto hacia arriba. vini. Si habeís descargado el código fuente. a. la cual establecera un valor para una serie de variables globales al clip t. es decir. Estas excepciones. lo que hace es crear una función de intervalo (linea 74). en cuyo caso. será un movimiento desacelerado (por la gravedad) y hacia abajo. Debemos conocer este estado. Solo con una excepción. Esto es debido a que en los cálculos físicos. pero sin detener las animaciones de los cuatro estados permitidos para realizar un salto: derecha. que comienza a ejecutarse indefinidamente cada intervalo de tiempo que hayamos establecido.una comprobación condicional que evita que podamos saltar si el estado de nuestro personaje es frente (estado inicial). pudieramos tener una pequeña desviación del valor _y. dan valor a un nuevo estado de nuestro personaje jumping. Prosigamos. Esto es un salto. Finalmente. llamada hombre (en el fotograma 2 de la escena principal). Bajo . en la escena principal.

Pero llegado a un punto no es nuestro personaje quien se mueve. seguidamente veremos como procesar la lógica de nuestro juego. haz click sobre la imagen primero).fla Efectivamente nuestro hombre cambia de estado según pulsamos la tecla correcta. pero casi todas ellas. para lo cual hay multitud de técnicas. están basadas en el scrolling del escenario. En nuestro caso. sino el fondo de la escena. 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. 2 La escena en movimiento. Es decir. la técnica utilizada. Nuestro hombre en estos momentos está estático en la escena. Descarga del archivo . Esto es todo. hacer un click sobre la película flash). Y llegado a este punto nos debemos plantear como se moverá por la película. de que nuestro personaje. Entonces ¿Como realizamos el movimiento?. o como mucho tiene limitado el punto máximo al que puede llegar dentro de la escena. Es decir el movimiento de nuestro personaje mediante la pulsación de teclas. 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. Una vez tenemos todos los movimientos de nuestro personaje definidos y programados. respecto al clip soldado_mc.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. Existen varias técnicas. 2. no se desplaza a lo largo de la escena. la IA de nuestro enemigo y la simulación de movimiento con el desplazamiento del fondo del nivel. . nos damos cuenta como ya comentabamos anteriormente. nuestro personaje se queda fijo en un punto.3 Simular el movimiento sobre el fondo.

La función mueve_fondo. Si os fijaís hemos definido dos variables bg_speed y bg_width (línes 3 y 4). radica en que para cada fotograma que procesa la película. Estas variables contienen la velocidad de movimiento del fondo y el ancho de nuestra escena. bg_width. líneas 6 a 8 onEnterFrame. bgMoveIzq y bgStop. 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. debe dejar de ver a nuestro soldado. procesamos la función mueve_fondo. Por supuesto la capa donde las ubiquemos. o cero. cambian el valor de la propiedad _x. En este caso nosotros las hemos llamado bg1 y bg2. En el fichero de ejemplo podeís observar como está compuesto. un valor negativo. Además ambas instancias deben estar colocadas contiguas una a la otra y alineadas en la escena. lo que hemos hecho (lo podeís ver si descargaís el fichero de ejemplo soldado_test2). De hecho si imprimieramos esta imagen y uniesemos los bordes de los extremos nos quedaría un bonito fondo si fin circular.Descarga del archivo . El secreto del movimiento. un valor positivo. Es decir una imagen de fondo que se puede conectar el final con el principio. Es por . Con las funciones bgMoveDer. code Código para el fotograma 1 de la película. 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. Para conseguir la animación del fondo en uno u otro sentido y además que este sea infinito. Y la hemos procesado con dos funciones. es dependiente tanto de la velocidad del fondo bg_speed. lo que hacemos es manipular la variable bg_speed. hemos utilizado lo que se conoce como un fondo reversible. Este código debemos insertarlo en el primer fotograma de la escena principal. Previo a ello. como del ancho de la escena.fla Para conseguir este efecto. debemos insertar dos instancias del fondo que hemos utilizado. ha sido utilizar dos instancias de nuestro fondo reversible y colocarlas en la escena principal.

vamos a introducir un personaje a la escena. 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. code Código para la instancia del clip de soldado_mc. Para ello solo hace falta echar un vistazo al código asignado a la instancia del clip de nuestro protagonista. 2. veremos como animar a nuestro único enemigo. Seguidamente. Nos hemos planteado a este enemigo. si estas teclas son la flecha izquierda. deberemos saltar para esquivar las rafagas de metralla que este nos lanza. Se trata de un enemigo que disparará contra nosotros y para no morir por sus disparos. además de cambiar el estado de nuestro protagonista en función de la tecla del cursor presionada. no variamos la velocidad del fondo. derecha. llamamos a una de las funciones de la escena principal que vimos en el código anterior. Para hacer algo mas entretenido nuestro juego. o abajo. El código ActionScript no necesita mas comentario. Fijaros como en este código.4 Añadir un enemigo a nuestro juego. Fijaos también como en el momento de presionar la tecla de salto.ello que se hacen necesarias dos imagenes (y además mas anchas que la escena). ya que el salto siempre lo realizamos en una dirección. 2 La escena en movimiento. que en nuestro juego apenas implica dificultad. Es una acción típica de un arcade. o bien andando a la derecha. para poder cubrir los espacios en blanco que deje la otra al cambiar el valor de _x. pero que a nosotros nos servirá para aprender como lograr introducir enemigos en nuestro juego. y siguiendo la técnica que vimos anteriormente en cuanto al uso de sprites. y podeís descargar el fichero de ejemplo (al principio de la página). bien andando a la izquierda. Ahora solo nos falta sincronizar la velocidad del fondo con el movimiento de nuestro protagonista. para dar una interactividad al juego. vamos a disponer de esta secuencia de imagenes para animar al mismo: Imagenes para simular a nuestro enemigo disparandonos: . para ver como está montado todo.

línea de tiempo para el clip enemy1. } Código ActionScript para el fotograma 1 de enemy1 stop(). para el cual crearemos un clip de película al que llamaremos enemy1. para que nuestro enemigo no dispare continuamente. . en el fotograma 1. detien el clip. Código ActionScript para el fotograma 14 de enemy1 Como podreís observar. declaramos la función dispara. sino solo cuando nosotros llamemos a la función dispara. function dispara(){ this.No necesitaremos mas imagenes para animar a este personaje. que será la encargada de generar la animación de nuestro enemigo disparando contra nosotros. El Código del fotograma 14.gotoAndPlay("disparo").

podreís observar que nuestro enemigo y el camión están al reves que nuestro sprite. En nuestro juego. en tiempo de ejecución este no se ve. nuestro enemigo siempre aparecerá por el lado derecho de la película. esto es facil de conseguir insertando la instancia en la escena de flash y haciendo una transformación de voltear horizontalmente. el clip que generaremos para el movimiento del camión. por simplicidad. ya que vamos a simular que aparece y desaparece de la escena y que siempre está en marcha. nuestro enemigo dispare sobre nosotros. . Aunque podriamos generar un clip independiente que contuviese ambos clips. que nuestro enemigo. 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). para que llegado a un punto. Y aunque en la imagen mas arriba y en el fichero fuente podemos ver a nuestro enemigo. En la imagen mas arriba. Así quedará nuestro enemigo en la escena. vendrá a dispararnos. 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. siempre estará reproduciendose. dejaremos los dos clips en la escena principal de nuestro fichero final. ya que hemos incorporado una mascara y además inicialmente esta posicionado en la escena. a lo largo de la escena principal y de generar la IA (en este caso muy sencilla).Hemos pensado. montado en un camión por la carretera por la cual transita nuestro protagonista.

incluso algo mejor que algunos a los que he jugado por internet. afectará al desplazamiento de nuestro enemigo. si nuestro protagonista.Por último y antes de pasar a ver la Inteligencia artificial (básica) de nuestro enemigo. esté morirá. Y al igual que hicimos antes la técnica a seguir es muy similar a la de nuestro protagonista. es saltarla. El juego finalizará aquí. Este tipo de movimiento de un enemigo. Intentaremos simular un efecto de velocidad de nuestro enemigo. hacia la derecha. que por simplicidad el código necesario para el movimiento de nuestro enemigo (así como anteriormente el . 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. De todos modos con unos pocos cambios. con nuestro enemigo. al igual que hicimos con nuestro protagonista. en un ciclo continuo de aparecer--disparar--desaparecer. Para añadir algo (muy poca) de dificultad a nuestro protagonista.5 Enemigo en acción. como el desarrollo seria análogo al utilizado por nuestro enemigo. Llegado a un punto x. Y así continuamente por la simplicidad que le vamos a dar a este juego. y que será el que utilizaremos como proyectil de nuestro enemigo. los podeís encontrar en el fichero fla finalizado. o está parado. el lector observará al final de este tutorial. Todos estos clips. éste. camina hacia la izquierda. alcanza a nuestro protagonista. Seguidamente vamos a ver y comentar el código necesario para realizar estas acciones. independientemente de que nuestro protagonista está desplazandose hacia la izquierda. Por tanto el desplazamiento de nuestro protagonista. o hacia la derecha. no se trata de un enemigo complejo. además no establecemos ningún tipo de sistema de puntuación. basada en los diferentes estados de nuestro enemigo. Aunque no hemos implementado una capacidad de disparo a nuestro protagonista. Nuestra intención en este caso. Evidentemente. A partir de ahí se volverá a retirar y desparecerá de la escena. Osea que algunas rafagas serán muy faciles de saltar. Queremos también apuntar. montado en el camión. nuestro enemigo disparará rafagas con una cantidad aleatoria de proyectiles. es que el lector vea los procedimientos utilizados y los adecue a la generación de sus propios juegos. 2 La escena en movimiento. a generar la animación de nuestro enemigo. Al igual que hicimos anteriormente nos debemos plantear toda la lógica de sus acciones. y otras. La única forma que tenemos de esquivar la metralla que dispara nuestro enemigo. 2. podriamos llegar a finalizar un juego. del cual os vuelvo a dejar un enlace aquí. Si alguna rafaga. no lo serán tanto. debemos proceder. para que el camión no avance a la misma velocidad. procederá a disparar una rafaga de metralla contra nosotros. era muy clásico con los enemigos finales de las antiguas maquinas recreativas. Nuestro enemigo aparecerá montado en su camión. Llegados a este punto. hemos de crear un nuevo clip al que llamaremos disparo1 y el cual contiene una pequeña animación de un simple punto.

encontramos la función mueve_enemigo1(). 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. lo vamos desplazando hacia la izquierda dos unidades. } Lo que hacemos. 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._x=enemy_der._x>480 and enemy_status==0){ enemy_speed=-2. en un desarrollo de mayor envergadura. el lector debería plantearse. Este es el código necesario para realizar el resto de acciones. hemos establecido esta variable a true._x+enemy_speed. Por supuesto. La base para mostrar a nuestro enemigo es situarlo inicialmente fuera de la escena (cubierto por una mascara). nos podemos plantear los cambios de estado de nuestro . vemos que dentro de la función onEnterFrame. nuestra función no se ejecutará. que se encuentra alojado en el primer fotograma de la escena principal y que comentaremos punto por punto._x=camion_der. enemy_der. Si esta variable se establece a falso. Para los propositos de nuestro tutorial. es suficiente la forma en la que hemos distribuido todo. De la línea 40 a la línea 72. Por ejemplo si nos fijamos en este código perteneciente a la función if (camion_der._x+enemy_speed. Gracias a esta ejecución continua. es que mientras la posición del enemigo no alcance el punto x=480. Pero no está de mas conocer que está ahí. sino nunca hubieramos acabado de redactar este tutorial. Por tanto la función está en ejecución enemigo en base a las comprobaciones que realizamos en las líneas 43 a 69. Ya hemos explicado algunas de las funciones de este código. simultaneamente. para un mejor desarrollo de la aplicación. Si nos fijamos en la línea 15 del código. lo hemos implementado en la escena principal de nuestra película Flash. camion_der. para detener el movimiento de nuestro enemigo.movimiento del fondo). en lo referente al movimiento del fondo sincronizado con el movimiento de nuestro personaje. asi como la programación de clases para obtener un código suficientemente legible y estructurado. code Código para la instancia del clip de soldado_mc. hacemos una llamada continua a la función mueve_enemigo1(). una mejor distribución del código fuente. continua. Como nosotros hemos pretendido realizar un bucle infinito con nuestro enemigo. Esta función lo primero que hace es mirar el valor de la variable global show_enemy_der (en la línea 6).

enemy_status=1. Fijaos como hemos comentado la linea 62.dispara(). y de nuevo inicie la secuencia. lo unico que hace es mover nuestra película del fotograma 1 al fotograma 2. para comenzar a desplazarse de nuevo hacia la derecha y desaparecer. ndisparos=randRange(2. para no establecer a false la variable show_enemy_der.if (camion_der. como vimos anteriormente. esto es porque hemos hecho una sencilla pantalla de inicio para nuestro juego donde ponemos las instrucciones de movimiento del mismo. if (enemy_status==1){ enemy_der._x>600){ enemy_speed=0. } Esta comprobación es simultanea.8). osea hacia la izquierda. y lo que hace es ralentizar la marcha del enemigo cuando nos desplazamos hacia el lado contrarió. 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. y que no . estableciesemos esta variable a true. } if (enemy_status==2 and camion_der. enemy_status=2 } Nuestro enemigo dispara un número entre 2 y 8 proyectiles sobre nosotros y cambia su estado al valor 2._x>480 and bg_speed>0 and enemy_status==0){ enemy_speed=-0. de una forma sencilla. //show_enemy_der=false.5. } Cuando alcanzamos la posición x máxima del enemigo. desplazamos de nuevo a nuestro enemigo hacia la derecha. Daros cuenta como hemos determinado los estados de nuestro enemigo. if (enemy_status==2 and bg_speed>0){ enemy_speed=5._x<480 and enemy_status==0){ enemy_speed=0. disparo=true. Comentar como la función de las líneas 36 a 38. para que desaparezca. cuanto mas compleja sea la acción de nuestro enemigo. if (camion_der. cambiamos el estado del mismo al estado 1. Si al acabar la secuencia. variable global enemy_status. En este nuevo estado nuestro enemigo será cuando nos dispare. enemy_status=0. nuetsro enemigo ya no volvería a aprecer hasta que no la mostraramos. } Con estas últimas comprobaciones.

y que pasados estos 40 eventos. Este test se hace entre las líneas 17 a la 20 en los eventos onEnterFrame. osea el disparo. Esto nos viene de perlas para testear por cada movimiento del proyectil. 2 La escena en movimiento. línea 16. cuando ambos movieeClips están en superposición. Esta función solo actua desde el evento onEnterFrame. Llega a contener el valor del número de disparos. y que se encarga de desplazar cada bala. Seguidamente y para finalizar. En la línea 76 se observa como añadimos a la escena un clip de bala. es la encragada de realizar el movimiento de los disparos. iniciaremos una cuenta linea 83. La función dispara_der que se define entre las líneas 74 a la 91. En las líneas 8. veamos como resolvemos la forma de disparar de nuestro enemigo. De las líneas 81 a 85. como también tenemos una variable de estado del disparo (algo diferente) disparo_status. Se trata de la propiedad hitTest de un movieClip y que acepta como argumento otro movieclip. para saber si a nuestro personaje. línea 66. de 40 eventos de fotograma (además de parar el fondo de la escena. El encargado de activar esta variable. code Código para la instancia del clip de soldado_mc. en la línea 84). línea 80. que ya creamos anteriormente en la posición donde se encuentra nuestro enemigo. Mostramos nuevamente el código fuente que vimos anteriormente. se llama a la función dispara_der.6 Disparo y detección de colisiones. fotograma produzca. Bueno. en cuyo caso lo pasaremos al estado de morir. pues esta función devuelve un valor de true. nuestro soldado volverá a la vida. fijaros.9 y 10 declaramos sendas variables globales relativas a la acción de disparar. lo alcanzó un proyectil. veamos como dispara nuestro enemigo sobre nosotros. inicialmente a 0 y que aumenta conforme realizamos un disparo. línea 77. encargada de la detección de colisiones. Para finalizar. Líneas 81 a 85. Para ello. 10 unidades a lo largo del eje x. Una vez esta variable se active y se establezcan el número de disparos. Al mismo tiempo. tenemos una propiedad muy importante de los objetos MovieClip de Flash. y para ello requiere que la variable disparo. Finalmente entre las líneas 87 a 90 comprobamos si los disparos salieron por la izquierda de la . si este se haya en contacto con la instancia del clip soldado_mc y que en nuestro ejemplo se llama hombre. sea true (inicialmente es false). Además de ello. que ya está desplazandose hacia la derecha. 2. para seguir con el juego. entre las líneas 79 a la 85. es nuestro por enemigo.necesita mas comentarios. cada cuando evento se de encuentra en el estado que se 1. tenemos un bucle que se ejecuta tantas veces como balas tenemos en movimiento (lo limita el valor de disparo_status).

y por tanto no queremos que el lector tome como verdades absolutas lo expuesto en este tutorial. Aun así sencillamente hemos querido compartir con vosotros el trabajo que hemos realizado para la confección de este sencillo juego. Lo primero. Descarga del archivo . 2 La escena en movimiento. no es mas que la de aficionados en esta materia. es disculparnos por las posibles faltas de ortografía que el tutorial pudiera tener y que esperamos revisar en breve. Y eso es todo en cuanto a la explicación del código. y nos daremos por satisfechos con que solamente a uno de vosotros este trabajo le haya sido útil de alguna manera. La depuración del código puede ser un proceso laborioso que dejamos al estilo de programación de cada persona.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. quisieramos dirigirnos al lector para comentar nuestras impresiones a lo largo del proceso de este tutorial y que no tienen cabida en otras secciones. pensamos que este trabajo es mejorable de principio a fin. también queremos comentaros que nuestra experiencia en el desarrollo de juegos y sobre todo en Flash.pantalla. 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. en cuyo caso reinicializaremos los valores de disparo. Para finalizar con este tutorial. Por supuesto. que nuestro enemigo se encargará de reinicializar mas tarde cuando se cumpla otro ciclo. 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.7 Comentarios finales. ya que posiblemente personas con mucha mas experiencia podrían criticar con razón este trabajo. . Dicho esto.

las posibilidades de este u otros juegos. se han expuesto en este tutorial. son infinitas y quizás sea un buen trabajo para la correcta comprensión del lector. En fin con el suficiente tiempo. Aunque se trata de un juego muy sencillo. 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. con lo que podremos visualizar uno u otro enemigo y conseguir un final para nuestro nivel. el ampliar este juego. establecer plataformas en las que se apoye nuestro personaje. del que posiblemente realicemos un nuevo tutorial. 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. Por nuestra parte aquí dejamos este trabajo. 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. . A partir de esta base. 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. es sencillo realizar modificaciones que den mas potencia a nuestro juego. si tiene el suficiente éxito. y es que a veces es muy complejo poder expresar las ideas que uno tiene en la cabeza.En cuanto al juego en si. con nuevas ampliaciones de nuestras técnicas.etc... creemos que una gran cantidad de las bases para el desarrollo general de juegos flash. diferentes movimientos. que basicamente situe a nuestro personaje a lo largo del eje x. Por ejemplo no sería excesivamente complejo hacer que el mismo enemigo apareciese también por la izquierda a disparar contra nosotros. Podemos ampliar nuestro escenario para que fluya de arriba a abajo. Atentamente Julio.