Juegos en Flash: Disparo vertical en Actionscript 3
Esta es la traducción y actualización del tutorial que escribí para Kirupa sobre la creación de un Disparador Vertical en Flash.
Por cierto, cuando hice dicho tutorial, en el 2005, el Disparador Vertical (o Vertical Shooter en inglés) era considerado un género de video-juegos aunque en estos días es considerado una sub-categoría de los disparadores en general.
En este tutorial crearémos un juego en el que un caballero tiene que matar los dragones que aparecen a un lado de la pantalla. Este tutorial es más bien una explicación del código y no el desarrollo completo del juego, o sea, no tendrá ‘vidas’ ni muchas otras cosas necesarias para que sea un juego completo.
El siguiente flash es un ejemplo del disparador vertical que haremos. Haz clic dentro de la animación para que tenga el foco. Usa las teclas izquierda y derecha para mover al caballero, y presiona la tecla arriba para disparar flechas.
Preparación de los gráficos
En flash, crearemos un .fla que utilizaremos solamente para guardar los assets; escribiremos todo el código en una clase externa. Este tutorial no es sobre programación avanzada por lo tanto el código que escribiremos será muy simple y facil de entender.
Necesitamos 3 assets, un dragón, una flecha y el caballero. Agregaremos un fondo pero solo para que el juego en este tutorial no se vea tan aburrido.
El dragón lo hice en Macromedia Freehand MX (si, es algo viejo) y he lo he importado a Flash, al archivo que tendrá nuestros assets. Este es un acercamiento a dicho dragón:
Ya que fue creado originalmente usando vectores, este acercamiento permite ver algunos detalles. En flash, lo he convertido en MovieClip y sus coordenadas son 0, 0 conocido como ‘el orígen‘ (cero en x y cero en y).
La flecha la dibujé en Adobe Photoshop y la guardé como .png. Este es un acercamiento a la flecha:
Al igual que el dragón, he convertido la flecha en MovieClip y sus coordenadas son similares, se encuentra en el orígen 0, 0.
El último asset es el caballero. Este es un poco mas complejo ya que esta formado por dos movieclips, el cuerpo y las piernas, eso es porque hay animaciones en ambos y correrán dependiendo de los eventos que sucedan en la aplicación.
Los gráficos tambien fueron creados en Macromedia Freehand MX pero podrian haber sido creados en cualquier otro programa de diseño incluyendo el mismo Flash. Este es un acercamiento al caballero a un 150%:
En la imagen, el movieclip cuerpo está seleccionado, dicho clip tiene como nombre de instancia ‘cuerpo‘, el clip de las piernas tiene como nombre de instancia ‘piernas‘. Dentro de cada clip hay pequeñas animaciones que simulan movimiento de piernas y del brazo disparando la flecha.
Por el momento lo único que necesitamos en el escenario sera el caballero. Pasemos al código.
Código del Disparador Vertical
Como mencioné antes, el código lo escribiremos en una clase. Podríamos ponerlo en el primer fotograma de flash, pero la idea es evitar poner código en el .fla para promover la separación de ocupaciones, aunque a muchos les de un poco de miedo, usar clases no tiene nada de especial, es solo aprender un par de palabras clave y listo el pollo.
Como ejemplo, podríamos detener la animación de las piernas y la del cuerpo si ponemos esto en la linea del tiempo:
Código :
caballero.cuerpo.stop(); caballero.piernas.stop();
También lo podríamos poner en una función:
Código :
function detenerAnimaciones() : void
{
caballero.cuerpo.stop();
caballero.piernas.stop();
}
// y llamar la función despues de declararla:
detenerAnimaciones();
O lo podríamos poner en una clase que es lo que haremos a continuación. En Flash creamos un nuevo documento Actionscript File, dicho documento estará en blanco por defecto.
Este es el código que pondremos:
Código :
package
{
import flash.display.MovieClip;
public class DisparadorVertical extends MovieClip
{
public function DisparadorVertical()
{
detenerAnimaciones();
}
private function detenerAnimaciones() : void
{
caballero.cuerpo.stop();
caballero.piernas.stop();
}
}
}
Package y otras palabras clave están explicadas en esta introducción a ActionScript 3. Todas las clases pertenecen a un package, todas tienen nombre de clase, en este caso la nuestra se llama DisparadorVertical y extiende MovieClip ya que cualquier pelicula flash, su escenario y la linea del tiempo principal, es un MovieClip.
Guardamos nuestra clase como DisparadorVertical.as al lado del .fla y agregamos dicha clase como la ‘document class‘ en las propiedades de la pelicula flash como se muestra a continuación:
Moviendo al Personaje
El movimiento del heroe en los disparadores verticales esta limitado al eje x, o sea, los personajes se mueven horizontalmente. Agreguemos el código para mover al caballero.
Código :
stage.addEventListener(KeyboardEvent.KEY_DOWN, revisarInteraccion);
Es un ‘listener’ donde el escenario (stage) escucha cuando el jugador presiona cualquier tecla, en dado caso, llamará a la función revisarInteraccion.
Código :
private function revisarInteraccion(evento : KeyboardEvent) : void
{
if(evento.keyCode == Keyboard.LEFT)
{
caballero.x -= 5;
}
else if(evento.keyCode == Keyboard.RIGHT)
{
caballero.x += 5;
}
}
La función revisarInteraccion revisa si la tecla presionada es la flecha derecha o izquierda, si es asi, el caballero se movera 5 pixeles en el eje x.
El código actualizado es:
Código :
package
{
import flash.display.MovieClip;
import flash.ui.Keyboard;
import flash.events.KeyboardEvent;
public class DisparadorVertical extends MovieClip
{
private const PASOS : uint = 5;
...
Continua leyendo desde la fuenteNo related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
Leave a Reply