Crear un juego básico del tipo "shooter" en Flash

En este tip veremos como crear un pequeño juego de tiros, tipo S.W.AT. El tip es solo una idea, cada quien puede personalizar el juego y agregar más detalles y cosas.

Bueno, pues entremos en accion...
Empezamos creando el documento, Flash AS 2.0, el tamaño y color de fondo al gusto. En este caso usare el tamaño predeterminado, 24 FPS y color blanco de fondo.

La mira

La mira es con lo que disparara el jugador, debe ser sencilla, es decir, no muy abrumadora, porque no permitira ver lo que se esta apuntando. Pueden hacerla muy sencilla, un círculo, unas líneas que lo atraviesan y un punto rojo en el medio, ó mas detallada.
Esta vez lo haremos de forma sencilla, mas o menos así:



Si queremos mantener organizadas las cosas (recomendado) crearemos una capa que llamaremos "aimer".
Lo seleccionamos, y lo convertimos en un movieClip ( F8 ), el nombre no importa, pero la instancia debe ser "aimer". Entramos al aimer y lo seleccionamos todo, y con las felchas del teclado lo alineamos al centro (donde se encuentra una pequeña cruz)

Lo seleccionamos (a la mira) y presionamos (F9) para entrar al panel de acciones, e introducimos el siguiente código para poner el mc como puntero:

Código :

//Declaramos que entramos a un evento del movieClip
onClipEvent (load) {
//Iniciamos el arrastre del mc al aimer del usuario
startDrag("_root.aimer", true);
//Cerramos
}

Una vez hecho esto vamos al primer fotograma y entramos al panel de acciones y escribimos este código, que ocultará el mouse:

Código :

Mouse.hide();

La vida

Como en todo juego de tiros, siempre tenemos nuestra vida, asi que procederemos a crearla; nuevamente reitero: puede ser desde el diseño más simple al mas sofisticado. Por ahora crearemos nustra barra de vida que en mi caso será asi (la barra ya va en otra layer que para identificarla llamaremos "contenido"):



Con 10 espacios que representarán los décimos enque se dividirá la vida.
Esta la convertiremos en movieClip con elnombre de instancia "vida", entramos en su línea del tiempo y agregaremos 1 fotograma clave en el que la vida ira disminuyendo, hasta llegar a que la vida quede vacía. En el primer fotograma y último haremos que se detenga la línea del tiempo, así que entraremos en el panel de acciones y pondremos:

Código :

stop();

En el primer y último frame.

Los enemigos

El enemigo es a quien mataremos en nuestro juego, a quien lo asesinaremos vilmente, asi que diseñaremos nuestro enemigo por ahora de manera muy sencilla, un simple stickman de baja calidad, te recomiendo lo hagas en grupos para tenerlo más ordenado, algo así:



Esto y lo demás lo haremos en la capa contenido. Primero lo convertimos en mc, con el nombre de instancia "enemigo", yo recomiendo crear una nueva capa dentro de él, llamada "cabeza".

En lo siguiente es muy posible confundirse, asi que mucha atencion, de cualquier forma les pondré muchas imagenes para que vean si van haciendo todo correctamente.
La capa "cabeza" irá arriba de en la que esta el cuerpo, que llamaremos "cuerpo"; ahora ponemos la cabeza en la layer cabeza. Hasta ahora tendremos algo así:



Convertimos la cabeza en botón y le ponemos la instancia de "cabeza". Dependiendo el tiempo que quieras que tarde el enemigo en disparar y la velocidad de los fotogramas, es el número de fotogramas que pondremos en las capas de "cuerpo" y "cabeza", en mi caso agrego un fotograma clave en el frame número 50, creamos una capa nueva que llamaremos "disparo" , ahora en el frame 50 agregamos un keyframe y lo ponemos a disparar, el tiro puede ser de un frame, pero si lo deseas puedes hacerlo de varios fotogramas, yo lo hago de 20 frames.
En los cuales el enemigo dispara; tendrémos algo así:



Ahora en el frame donde el enemigo ya disparó y se supone ya debe disminuir nuestra vida, agregamos estas acciones:

Código :

//Declaramos que cuando el usuario ya pueda observar este frame, la
//vida irá avanzando al siguiente frame, y se verá que disminuye
_root.vida.nextFrame();

Podemos presionar Ctrl+Enter y ver cómo cada que el enemigo dispara la vida baja.

Y para que el enemigo vuelva a disparar si no fue eliminado, agregamos este código en el frame donde termina de disparar:

Código :

//Esto solo es para regresar al frame 1 y no seguir con la muerte
gotoAndPlay(1);

Entonces, hecho esto procederemos a crear la muerte del enemigo, por lo que en la capa cuerpo y cabeza creamos una muerte al gusto, yo la hago de 15 frames, en el último frame del enemigo ponemos:

Código :

//Para que el enemigo no se vuelva a reproducir
stop();

Y ya tendremos algo así:



Ahora vamos al primer frame y entramos a las acciones de la "cabeza" que es un botón y ponemos este código:

Código :

//El código se traduce:
//Al hacer click en la cabeza
//Reproducir la muerte del enemigo.
//NOTA: El número del frame a reproducir va a ser el frame
//donde inicia la muerte de tu enemigo
on(press){
gotoAndPlay(70)
}

Ya tenemos listo un pequeño juego de tiros el cual servirá de base para crear juegos como el S.W.A.T; solo agregamos mas botones en la parte de la cabeza y cuerpo para que se reproduzcan distintas muertes, y ponemos mas enemigos, un background y mas detalles.



Descargar archivo .fla

Con más calma y tiempo se logran cosas mejores, mas o menos así:



P.D. Lo más probable es que al llegar aquí ya te mataron en ambos ejemplos , asi que recarga la página para poder mirarlos.

Ustedes disculparan mi ignorancia, estoy seguro de que hay formas más simples o avanzadas de crear un juego de tiros con mejor AS o más avanzado pero mis bajos conocimientos no me lo permiten , así que decidí poner este tip con un AS que todos entiendan

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.