Comunidad de diseño web y desarrollo en internet

Crear un juego estilo Duck Hunt en Flash Lite 1.1

Recién se ha abierto el foro de Teléfonos celulares y dispositivos móviles en Cristalab, dedicado como ya se mencionó, al diseño, la programación y la creación de experiencias interactivas en teléfonos, PDAs (las pocas que aun existen), dispositivos únicos (Nintendo Wii, Chumby, La100rra) y en general cualquier aparato portátil y conectado a internet.

En este tip utilizaremos la fuerza de Flash Lite 1.1 para crear un juego al estilo de Duck Hunt, dando a conocer algunos puntos básicos sobre Flash Lite y utilizando una versión de ActionScript que talvez algunos ni siquiera hayan visto.

Primeramente abrimos Flash y creamos un nuevo documento para móviles.


Notamos que al hacerlo se abrirá Adobe Device Central donde podremos elegir el dispositivo al cual está dirigida nuestra aplicación.

Una vez elegido nos presentará el escenario como lo hace normalmente.

Importando elementos gráficos.



Una vez con nuestro escenario listo comenzaremos por importar los elementos gráficos que utilizaremos, es muy recomendable optimizar al máximo las imágenes y gráficos para que el archivo sea más ligero y se ejecute fluidamente.

Seleccionamos File > Import > Import to library y añadimos todo lo necesario.


Creando un listener para eventos del teclado.



Con esto podemos ir diseñando la pantalla principal, donde añadiremos el primer elemento interactivo, se trata de un Button que hará la función de listener, detectará cuando presionamos una tecla y se encargará de realizar la acción correspondiente.
El botón puede contener cualquier cosa, en ese caso he utilizado letras y lo he colocado en la parte inferior del area visible, pero también puede ser un elemento en pantalla.

Selecionando el botón abrimos el panel de acciones y escribimos:

Código :

on (keyPress "<Enter>")
{
gotoAndStop ("Game");
}

Flash Lite toma como Enter la tecla principal de las teclas de navegación, es decir con la que abres una aplicación, juego, foto etc.
Esto hará que cuando el usuario presione la tecla Enter la linea del tiempo vaya al frame etiquetado como Game.

Creado el escenario de juego.



Ahora como imaginarás, debemos crear un frame llamado "Game", es recomendable que tengas distribuido en capas todo el contenido asi podrás ubicar mejor los elementos.

Una vez con nuestra capa y el nombre del fotograma acomodamos los gráficos para crear el escenario.

Analizaremos los elementos en pantalla:

  • Mira: Un MovieClip que servirá para apuntar a los patos, lo nombramos aim.
  • Fondo: Es solamente el fondo, no necesita nombre de instancia.
  • Panel Score: Con un campo de texto dinamico para marcar los puntos, lo nombramos score (Flash lite 1.1 no permite nombres de instancias en campos de texto, por lo que el nombre lo colocamos en Variable).
  • Panel Misses: Es un contador de fallos, añade un pequeño pato blanco cada que dejas escapar a un objetivo, hablaremos de su código mas adelante.
  • KeyCatcher: La misma instacia de la pantalla principal, solamente cambiaremos el código.
  • Pato: Un MovieClip nombrado duck0 con otro MovieClip en su interior nombrado duck el cual tiene una interpolación de movimiento (no existe EnterFrame en Flash Lite 1.1 pot lo que el movimiento es una animación).


Añadiendo el código.



Comenzaremos con los paneles Score y Misses.
En nuestra capa de codigo, en el mismo numero de frame de "Game" escribimos lo siguiente:

Código :

/* Score and Misses, el valor que obtenga la variable "score" será el mostrado por el campo de texto "score" */

score = 0; // Este valor aumentará en multiplos de 50 cada que acertemos a un pato
misses = 0; //Este valor cambiará cuando la animación de duck0.duck llegue a su final y NO sea asesinado

/* Escondemos los iconos de los patos en el panel Misses, serán activados en el panel de acciones de duck0.duck en el último frame */

missDuck1._visible = false;
missDuck2._visible = false;
missDuck3._visible = false;
missDuck4._visible = false;
missDuck5._visible = false;


Seguimos con el pato.

Primeramente creamos nuestra animación dentro de duck, un movimiento de alas. Y despues creamos la interpolaición de movimiento atravezando el escenario.

El pato cambiara su visibilidad al ser golpeado, la cual será restablecida junto con su posición "Y" al llegar al final del escenario en la animación.

En el ultimo frame escribimos:

Código :

/* Cambiamos la posicion Y del pato */

_root.duck0._y = random (200) + 30;

/* Si el pato aún se ve llegando a este fram, entonces no ha sido golpeado, por lo tanto es miss */

if (_root.duck0._visible == true)
{
_root.misses++; //Aumentamos la variable misses
}

else
{
_root.duck0._visible = true; //Si en cambio el pato llegó como invisible, entonces lo hacemos visible
}

//Checamos los patos fallados y revelamos los iconos

if(_root.misses == 1)
{
_root.missDuck1._visible = true;
}

if(_root.misses == 2)
{
_root.missDuck2._visible = true;
}

if(_root.misses == 3)
{
_root.missDuck3._visible = true;
}

if(_root.misses == 4)
{
_root.missDuck4._visible = true;
}

if(_root.misses == 4)
{
_root.missDuck4._visible = true;
}

if(_root.misses == 5)
{
_root.missDuck5._visible = true;
}


KeyCatcher.

Con el keyCatcher seleccionado abrimos el panel de acciones y escribimos:

Código :

/* Checamos si se presionan las teclas, con cada tecla checamos los patos fallados ya que flash lite 1.1 no tiene una función para detectar si se presiona cualquier tecla */

on (keyPress "")
{
aim._x -= 10;

if (_root.misses >= 5)
{
gotoAndStop ("GameOver");
}
}
on (keyPress "")
{
aim._x += 10;

if (_root.misses >= 5)
{
gotoAndStop ("GameOver");
}
}
on (keyPress "")
{
aim._y -= 10;

if (_root.misses >= 5)
{
gotoAndStop ("GameOver");
}
}
on (keyPress "")
{
aim._y += 10;

if (_root.misses >= 5)
{
gotoAndStop ("GameOver");
}
}
on (keyPress "")
{
/* Calculamos la posición del pato y de la mira para saber si colisionan al presionar Enter*/

distanceX = aim._x - duck0.duck._x;
distanceY = aim._y - duck0._y;

/* Los valores numericos fueron obtenidos por medio de prueba y error presionando enter cuando el pato y la mira colisionan, fueron obtenidos por medio de un trace(distanceX) o distanceY segun sea el caso */

if (distanceX < -63 and distanceX > -163 and distanceY > -19 and distanceY < 27)
{
duck0._visible = false; //Si colisionan escondemos el pato
score += 50; //Aumentamos el score
}

if (_root.misses >= 5) //Si has fallado 5 veces, has perdido
{
gotoAndStop ("GameOver");
}
}


Creando la pantalla de game over.



Creamos una serie de frames de las capas y lo nombramos "GameOver", en la capa de código escribimos:

Código :

/* Pasamos el score que se tenia al perder y lo asignamos a la variable yourScore, que es un campo de texto dinamico */

yourScore = score;

En nuestro frame de keyCatcher copiamos otra instancia del mismo y escribimos:

Código :

on (keyPress "<Enter>")
{
gotoAndStop ("Game");
}

O podemos copiar el primer keyCatcher de la pantalla principal, ya que contienen el mismo código.

Por ultimo diseñamos la pantalla, no olvides añadir el campo yourScore.


Aqui está el juego funcionando, ha sido probado en un Nokia N93i y en un Nokia 6131, aunque en este último corre un poco mas lento.
Presiona Enter para comenzar, cuando la mira y el pato colisionen presiona Enter para "disparar".


Descargalo para tu móvil.
(Option+Click en Safari, click derecho, guardar enlace como..., en Firefox).

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate