7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Game Design

Crea un juego de disparos espaciales en Flash usando AS3

Read Time: 11 mins

Spanish (Español) translation by Esther (you can also view the original English article)

Sigue los sencillos pasos de este Tutorial Premium para crear un entretenido shoot-'em-up con Flash y AS3. 


Paso 1: Breve resumen

Utilizando sprites prediseñados y las herramientas de Flash, crearemos una interfaz gráfica de buen aspecto que será impulsada por varias clases de ActionScript 3.

El usuario podrá controlar una nave espacial y disparar a múltiples enemigos mientras viaja por el espacio.


Paso 2: Configuración del documento Flash

Abre Flash y crea un documento de 320 píxeles de ancho y 480 de alto. Ajusta la velocidad de fotogramas a 24fps. 


Paso 3: Interfaz

Nuestra interfaz estará compuesta por varios sprites, campos de texto y clips de película. 

Continúa con los siguientes pasos y veremos cómo crearlo. 


Paso 4: Fondo

El fondo será muy sencillo, ya que las estrellas se generan con ActionScript. 

Crea un rectángulo de 320x480 px y rellénalo de negro. Puedes añadir un ligero degradado radial. 

Utiliza el panel de alineación (Cmd + K) para centrarlo en el escenario.


Paso 5: Sprites

He utilizado una gran librería de sprites en la demo de este tutorial, estos son parte de la SpriteLib de Flying Yogi.


Paso 6: Sprite MovieClips

Importa los sprites al escenario (Cmd+ R), conviértelos en MovieClips, y ajusta los fotogramas para mostrar una bonita animación.


Paso 7: Puntuación TextField

Se necesitará un campo de texto dinámico para mostrar la puntuación del juego. Utiliza la Herramienta texto (T) para crear uno; llámalo scoreTF y colócalo en la esquina inferior izquierda del escenario.


Paso 8: Incrustar la fuente

Para utilizar una fuente personalizada en un campo de texto dinámico, debes incrustarla en tu aplicación. Selecciona el campo de texto y utiliza el botón Incrustar... del panel Propiedades para añadir los caracteres necesarios.


Paso 9: Vista de alerta

La vista de alerta se mostrará cuando el usuario alcance un estado de juego, (ganar, perder). Utiliza la fuente que desees para crear una pantalla simple con dos campos de texto dinámicos; llámalos titleTF y msgTF, convierte la caja en un MovieClip y establece su nombre de clase como AlertView.


Paso 10: Sonidos

Utilizaremos efectos de sonido para mejorar la sensación del juego, puedes encontrar los sonidos utilizados en este ejemplo en Soungle.com utilizando las palabras clave espacio, explosión y láser.


Paso 11: Tween Nano

Utilizaremos un motor de interpolación diferente al incluido por defecto en Flash, lo que aumentará el rendimiento y será más fácil de usar. 

Puedes descargar Tween Nano desde su página web oficial.


Paso 12: Nueva clase de ActionScript

Crea una nueva (Cmd + N) clase de ActionScript 3.0 y guárdala como Main.as en tu carpeta de clases.


Paso 13: Estructura de la clase

Crea tu estructura básica de clases para comenzar a escribir tu código. 


Paso 14: Clases requeridas

Estas son las clases que necesitaremos importar para que nuestra clase funcione; la directiva import hace que las clases y paquetes definidos externamente estén disponibles para tu código.


Paso 15: Variables

Estas son las variables que usaremos, lee los comentarios en el código para saber más sobre ellas.


Paso 16: Código del constructor

El constructor es una función que se ejecuta cuando se crea un objeto a partir de una clase, este código es el primero que se ejecuta cuando se hace una instancia de un objeto o se ejecuta utilizando la Clase Documento.

Llama a las funciones necesarias para iniciar el juego. Comprueba esas funciones en los siguientes pasos. 


Paso 17: Construir estrellas

El método buildStars() utiliza el Star MC de la biblioteca para crear un fondo con estrellas colocadas al azar. Se crean dos sprites para poder interpolar ambos y simular el movimiento, utilizando el mismo truco que en este tutorial de parallax scrolling.


Paso 18: Añadir el barco

Esta función crea una instancia de la nave MC en la biblioteca y la coloca en el escenario con una bonita animación. 


Paso 19: Añadir vidas

Reutilizando el MC de naves, se añaden tres sprites de naves al escenario como indicador de vidas. Las naves se añaden a un Vector para comprobar si el juego ha terminado más adelante.


Paso 20: Añadir oyentes

Estas líneas añadirán las escuchas necesarias al escenario y al temporizador; esto incluye eventos del ratón, eventos del temporizador y eventos EnterFrame que actualizarán el juego en cada fotograma. 


Paso 21: Mover el barco

La nave del jugador será controlada por el ratón, la siguiente función se encarga de ello. 


Paso 22: Disparar

Nuestra nave podrá disparar balas para destruir y protegerse de los enemigos.  Esta función se ejecutará cada vez que el usuario haga clic en el escenario y colocará una bala delante de la nave que posteriormente será movida por la función update(). También reproduce un sonido de disparo.


Paso 23: Añadir enemigo

No sería un shooter sin algo a lo que disparar. Los enemigos son creados por la siguiente función, un Timer es usado para crear un enemigo cada 500 milisegundos (puedes cambiar ese valor en el paso de variables) que luego es movido por la función update().


Paso 24: Vista de alerta

La vista de alerta muestra al jugador información sobre el estado del juego, se muestra cuando se alcanza un evento del juego.

En esta función se utilizan dos parámetros:

  • t: El título de la alerta
  • m: Un mensaje corto

Paso 25: Actualizar

La función update() se ejecuta en cada fotograma, maneja todo el movimiento del juego y las colisiones. Es la función de bucle del juego para este juego. Echa un vistazo a los siguientes pasos para ver su comportamiento.


Paso 26: Mover el fondo

El fondo se mueve en cada fotograma para simular el viaje espacial; cuando el sprite de las estrellas del fondo alcanza el límite del escenario, se mueve de nuevo hacia arriba, creando un bucle.


Paso 27: Mover las balas

Las siguientes líneas de código comprueban si hay balas en el escenario; si es cierto, las balas se mueven hacia arriba; cuando una bala ya no es visible, se destruye.


Paso 28: Jefe

Añadiremos un jefe grande y malo al juego. Cuando el usuario alcance cierta puntuación, el jefe aparecerá:


Paso 29: Mover enemigos

Los enemigos también se mueven en cada fotograma. Este código encuentra todos los enemigos en el escenario usando el array y los mueve 5px hacia abajo.


Paso 30: Colisión de un barco enemigo

Aquí se comprueba si un enemigo colisiona con la nave del jugador; si lo hace, se realizan una serie de acciones que comienzan con el sonido de explosión:


Paso 31: Destruir al enemigo

Después de reproducir el sonido, el enemigo se retira del escenario y del array, y se pone a cero para (eventualmente) borrarlo de la memoria.


Paso 32: Eliminar la vida

Uno de los iconos del contador de vidas también será eliminado de la misma manera que el enemigo.


Paso 33: Prueba para el Game Over

Entonces comprobamos el número de vidas, si el jugador se queda sin vidas utilizamos el método de alerta para mostrar una alerta indicando que el juego ha terminado, si todavía hay vidas disponibles la nave se anima en el escenario.


Paso 34: Golpear al jefe

El siguiente código maneja las colisiones del jefe, utiliza el mismo método usado en la colisión enemigo-nave. Aquí usamos la variable bossHealth para determinar cuando el jefe es derrotado.


Paso 35: Colisión bala-enemigo

Otro código de detección de colisiones. Las balas del array se comprueban para ver si colisionan con los enemigos; cuando esto ocurre, ambos son eliminados del escenario y de sus arrays.


Paso 36: Función de reinicio

La function() de reinicio es llamada por la función de alert(), maneja las operaciones necesarias para restablecer el juego y reiniciarlo.


Paso 37: Eliminar los Sprites

La primera parte de la función restart() maneja los sprites, las siguientes líneas de código eliminan todas las imágenes del escenario.


Paso 38: Eliminar la alerta

La siguiente parte de restart() elimina la Vista de Alerta del escenario:


Paso 39: Restablecer la puntuación/salud del jefe

En la siguiente parte de restart(), se reinician las variables de puntuación y salud del jefe:


Paso 40: Llamar al método de reinicio

Por último, al final de restart(), llamamos al método que inicia todo:


Paso 41: Clase de documento

Añade el nombre de la clase al campo Clase en la sección Publicar del panel Propiedades para asociar el FLA con la clase documental Principal.


Conclusión

Ya has aprendido a crear un juego de Space Shooter con todas sus características básicas, ¡intenta ampliarlo usando lo que ya sabes!

Espero que te haya gustado este tutorial, ¡gracias por leerlo!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.