A partir de la versión 5 Flash contiene las funcionalidades adecuadas para usarlo para la elaboración de juegos. Funciones como hitTest() lo hacen bastante confortable implementar las funciones básicas de juegos. Al siguiente vamos a desarrollar las funciones básicas de juegos a través del pequeño pero muy representable y conocido juego Breakout.
La finalidad del juego es mantener unas pelotas dentro de una cierta área a través de una barra controlada por teclado. Dependiente cuantas pelotas se mantiene cuanto tiempo dentro de esta área se consigue ciertos puntajes.
Los elementos básicos del juego sonEmpezamos con el fondo del juego que podemos desarrollar en el Photoshop y importarlo a Flash. Para empezar rápido con los funciones importantes de juegos lo dibujamos con la herramienta del cuadrado al layer interfaz y lo grabamos.
El primer pase es crear una barra y añadirlo un script que lo hace controlable por teclado. Elija INSERTAR - NUEVO SIMBOLO. Dale el nombre "barra" y elija la opción PELICULA. Crea tres layers, llama el primero "acciones" y añade el siguiente script al primer frame:
Con este acción creamos una variable cual determine con que velocidad el jugador pueda mover la barra.
Ahora llama al segundo layer "grafica" y dibuja una barra (o importa un archivo grafico dibujado en un programa grafico) centrada sobre el cruz que índice el medio.
El layer tres llamamos "colisión" a cual insertamos una película en forma de línea exactamente con la misma anchura que la barra. Como el layer "grafica" esta encima del layer "colisión" no se puede ver esta línea. Ahora la damos el nombre de instancia "hit".
Volvemos a la película principal y movemos la barra de la librería al layer "barra".El próximo paso es la programación del controlador. Desde la versión 5 Flash contiene funciones para usar fácilmente el teclado.
Para controlar la barra con el teclado añadimos el siguiente script a la barra:
Las acciones serán ejecutadas cuando la película esta ejecutado y una imagen será visible. Con los primeros dos bifurcaciones condicionales determinamos si la tecla flecha izquierda o flecha derecha esta apretada. En este caso cambiamos la posición de la barra hacia este dirección por el valor de la variable speed.
Con las siguientes dos bifurcaciones condicionales comprobamos si la barra sale de la película, en este caso lo movemos al otro lado de la película, cual equivale a la posición 0 o a la anchura de la película.
Ahora venía el momento de comprobar el funcionamiento de nuestros inventos. Elegimos COMPROBAR MOVIE del menú CONTROLADOR o más rápido apretamos CTRL+ENTER.Ahora hemos llegado al segundo parte del juego. Vamos a aprender como crear un objeto que se mueve autónomo. Producimos una pelota que se choque contra los muros y la barra y reacciona adecuada.
También para la pelota hace falta crear una propia secuencia de película. Elegimos NUEVO SIMBOLO del menú INSERTAR y lo llamamos "pelota". Creamos dos layers cual llamamos "acciones" y "pelota". En el layer acciones escribimos el siguiente ActionScript:
Como a la barra, también damos una velocidad a la pelota, pero como se debe mover en dos dimensiones le damos una velocidad X y una Y. El señal menos ponemos para que al principio las bolas se mueven hacia arriba. El stop() es necesario para que se para en el primer frame porque vamos a añadir otro script al segundo frame.
Añadimos un segundo frame con apretar el F7 y escribimos el siguiente script:
La variable balls cuenta cuantos pelotas están en el juego y en este caso se disminuya por uno. El stop() otra vez para la película en el segundo frame.
Ahora dibujamos una pelota con la herramienta del circulo al frame 1 en el layer "pelota". La cruz del centro tiene que estar posicionada en la esquina izquierda arriba.
Ahora volvemos a la ventana principal y posicionamos la pelota en cualquier lugar acogiéndolo de la librería. Le damos el nombre de instancia "ball".Ahora llegamos a un parte un poco delicado. Hay que determinar las coordinadas X y Y del espacio del juego. Para eso abrimos en el menú VENTANA la opción INFO. En este ventana info se ve las coordinadas X y Y.
Posicionamos la pelota en el muro izquierda justamente como chocaría contra el muro - la altura no importa. Leemos la coordinada X, en mi caso es 19.
Lo mismo hacemos con el muro derecho (372) y el muro arriba (20). Como ultimo paso lo pones la pelota abajo de la barra y cogemos el valor Y (269).
Con estos valores podemos comprobar si la pelota choque contra el muro izquierda o derecha (valores X de 19 y 372), contra el muro arriba (valor Y 20) o sale del espacio del juego (valor Y 269).
El script adecuado añadimos directamente a la pelota:
Las secuencias del random solo están ejecutadas una vez cuando la película esta cargada. Los valores X deben estar entre los valores X que medimos (19 y 372) y los valores Y entre los valores Y que medimos (20 y 269). Así calculamos las valores iniciales de la pelota.
Al siguiente añadimos las velocidades de la pelota - cada vez añadido conseguimos un movimiento en las dos direcciones X y Y.
La función hitTest() es muy importante para los juegos. Así comprobamos si un objeto choquea contra otra - en nuestro caso si las pelotas choquean contra los muros o la barra. En caso de un choque invertimos la dirección de la pelota a 180 grados, es decir que invertimos el valor que añadimos al movimiento.
Si una pelota sale al lado de la barra fuera del juego, es decir hacia abajo vamos al siguiente frame en cual la pelota desaparece.
Apretando CTRL+ENTER comprobamos si hasta aquí funciona nuestro juego.Ahora hace falta añadir algunos scripts que ponen el juego en marcha. Con el siguiente script elegimos cuantas pelotas están en el juego:
Con la función duplicateMovieClip() copiamos las pelotas tantas veces que hemos decidido en la variable balls, es decir 4.
Hace falta crear otro frame en el layer acciones y escribir simplemente una acción para la película:
Ahora es el momento de comprobar las funciones del juego hasta este punto. Apreté CTRL+ENTER y juega un ratito.
Como ultimo creamos unas funcionalidades para enseñar el tiempo del juego y la cantidad de pelotas que están en el juego.
No podemos usar la función getTimer() porque mide el tiempo que ha pasado desde el principio de la película. Si ahora metemos por ejemplo explicaciones como funciona el juego y otras cosas antes de empezar el juego de verdad recibimos un tiempo que no es equivalente con el tiempo que realmente estamos jugando. Así solo vamos a emular el tiempo.
Vamos al layer "controlador" y creamos una nueva película llamada "controlador" con las layers "acciones" y En el layer acciones metemos el siguiente script:
Este script esta emulando las secundas que estamos jugando. Termina cuando han pasado 60 secundas y también cuando todas las pelotas están fuera del juego.
Como pusimos al principio en las definiciones que utilizamos 20 frames cada secundo hace falta incluir otra acción en el frame 20 del controlador:
Así conseguimos que cada 20 frames que equivale a 1 secundo se repiten las acciones en el frame uno.
Para enseñar al jugador el tiempo que ha pasado desde el inicio tenemos que crear un campo de texto. Crea un campo de texto dinámico y pon "time" al valor variable. Ahora debe contar el tiempo que estas jugando.Para dar al jugador la posibilidad de repetir el juego si pierde todas las pelotas o el limite de tiempo se acaben vamos a crear un segundo interfaz con el texto "game over" en el segundo frame del layer texto.
Añadimos también un botón llamado "otro juego?" cual contiene un script para volver al inicio del juego:
Y aquí esta el resultado:
Parece que hemos llegado al final y podemos aprovechar el tiempo para hacer unos jueguitos con nuestro Breakout. Al siguiente unas propuestas para mejorar el juego:
A nivel de programación: