Desarrollo de juegos con Flash

Movimiento rotatorio de un objeto siguiendo al apuntador del ratón.

Movimiento diagonal según ángulo dado.

Movimiento paulatino de un punto a otro.

Cambio de colores en objetos.

ActionScript

Función getTime()

Math.abs()

Objetos Array()

Función attachMovie()

Ciclo do…while()

Método startDrag()

Propiedad _currentFrame

Método controlador onMouseUp()

TANQUE

Al igual que los otros juegos, este es una variación de los anteriores, pero con algunos elementos nuevos. La idea es que un tanque, colocado al centro y sin que se desplace, dispará contra objetivos (simples esferas) que a su vez lo atacarán. El tanque será visto desde arriba.

Aquí veremos:

• Movimiento rotarorio de un objeto siguiendo al apuntador del ratón.

• Movimiento diagonal según ángulo dado. Del objeto que disparó hacia fuera del escenario.

• Movimiento paulatino de un punto a otro: de fuera del escenario al centro.

• Un sencillo marcador

• Cambio de colores en objetos.

Al igual que los capítulos anteriores describiremos al escenario y a los objetos gráficos para pasar a la programación.

El escenario

Al igual que el juego anterior, tendremos tres fotogramas clave:

• El primero para las indicaciones, (Inicio)

• El segundo para el juego en sí (Juego)

• El tercero para el resultado (Fin).

Las capas que utilizaremos son:

• La primera para la programación (ActionScript),

• La segunda las etiquetas (Etiquetas),

• La tercera para el clip de película del tanque, (Tanque)

• La cuarta para los enemigos y las balas del tanque, (Enemigos).

• La quinta servirá para el marcador (Resultados)

• La sexta servivrá para los fondos (Fondos).

Así que:

• 1. Abra un documento Flash en blanco. Verifique que las dimensiones sean 550 pixeles de ancho por 400 pixeles de alto. El fondo del mismo debe de ser negro.

• 2. Pulse dos veces sobre el nombre de la capa para cambiar su nombre a ActionScript.

• 3. Añada cinco capas más con el botón respectivo y nómbrelas Etiquetas, Tanque, Enemigos, Resultados y Fondos.

Nota:

Algunas veces las capas que se insertan no se encuentran en el lugar que deseamos. Si desea cambiar su orden, tan solo "sugétela" con el apuntador del ratón y el botón izquierdo y colóquela en el lugar deseado.

Fin de nota

• 4. Seleccione el primer fotograma de la capa ActionScript y añada un fotograma clave con la tecla [F6].

• 5. Si no está abierto el Panel de acciones, ábralo con la tecla [F9] (posiblemente tenga que pulsar nuevamente esta tecla para abrir el panel). En él capture la sentencia para no avanzar a los demás fotogramas que añadiremos:

• 6. Seleccione el primer fotograma de la capa Fondos.
  Importe la imagen fondo1.gif a la biblioteca (esta imagen fue desarrollada
  por John Taylor y está disponible en www.flashkit.com). La misma
  fue optimizada para web con Fireworks de Macromedia ©.

Nota:

Recuerde que cada imagen del tipo bitmap consumirán tiempo precioso en la carga si su juego va a ser llamado desde Internet. Es mucho mejor utilizar imágenes vectoriales para el diseño de su aplicación. Así que pienselo dos veces antes de adormar a su juego de esta forma.

Fin de nota

• 7. Arrastre la imagen de la biblioteca al escenario y ajústela con la herramienta de Transformación libre

• 8. En el espacio correspondiente escriba las instrucciones del juego con la Herramienta de texto

• 9. Seleccione de las biliotecas comunes, un botón y arrástrelo al escenario. Abra el Panel de acciones correspondiente al botón y capture el siguiente guión:

• 10. Seleccione el primer fotograma de la capa Etiquetas y nombre este primer fotograma como Inicio en el Inspector de propiedades.

Nota:

Puede cambiar el ancho de los fotogramas con el botón que se muestra a continuación:

Otros autores dejan espacio entre los diferentes fotogramas para que se puedan distinguir las etiquetas y dar claridad a la aplicación. Pruebe estas dos técnicas para ver cuál va más con usted.

Fin de nota

• 11. Ejecute la película con las teclas [Ctrl] + [Enter]. El código lo puede obtener en el archivo Tanque01.fla. Deberá tener una pantalla similar a:

• 12. Ahora seleccione el segundo fotograma de la capa ActionScript y pulse la tecla [F6] para crear un fotograma clave.

• 13. Teclee la siguiente sentencia en el Panel de acciones (actívelo con [F9] si es necesario.

• 14. Seleccione el segundo fotograma de la línea de tiempo de la capa Etiquetas y pulse la tecla [F6] para crear un fotograma clave. Asígnele el nombre de Juego en el Inspector de propiedades.

• 15. Seleccione el segundo fotograma de la línea de tiempo de la capa Tanque y pulse la tecla [F6] para crear un fotograma clave. Aún no haremos nada sobre la misma.

• 16. Repita las mismas acciones que en el punto anterior para las capas Tanque, Enemigos, Resultados y Fondo.

• 17. Observe que al crear el fotograma clave en el segundo fotograma de la capa Fondo las imágenes del fotograma anterior se copian. No queremos eso, así que bórrelas. Deberá tener el escenario negro.

Nota:

No se preocupe, sus imágenes siguen en el primer fotograma, Si no lo cree pulse sobre el mismo y deberán aparecer. Si no aparecen vuelva a abrir el archivo Tanque01.fla y repita los pasos.

Fin de nota

• 18. Importe el archivo fondo2.jpg a la biblioteca
  de la película. Arrástrela y colóquela de tal manera
  que abarque todo el escenario. La imagen fue realizada por el sitio www.evolution-e.com
  y se encuentra disponible en www.flashkit.com. Fue optimizada para web con
  Fireworks de Macromedia ©.

• 19. Seleccione el segundo fotograma de la capa Resultados y dibuje con la herramienta respectiva un rectángulo de aproximádamente 510 x 38 pixeles. Deberá ser de un color claro para que resalte sobre el fondo.

• 20. Arrastre tres componentes del tipo label y colóquelos sobre la barra que acabamos de crear en forma distribuida. Estos componentes nos servirán para mostrar los resultados del juego. Modifíque las dimensiones a 45 x 35 pixeles de cada componente.

• 21. Con la herramienta de texto coloque las siguientes leyendas a lado de los componentes: Vidas, Puntos Obtenidos y Parque disponible.

• 22. Ejecute la película con las teclas [Ctrl] + [Enter]. El código lo puede obtener en el archivo Tanque02.fla. Después de pulsar el botón de la primera pantalla, deberá tener resultado similar a:

• 23. Seleccione el tercer fotograma de la línea de tiempo de la capa ActionScript y agregue un fotograma clave con la tecla [F6].

• 24. En el Panel de acciones de este fotograma capture la instrucción:

• 25. Seleccione el tercer fotograma de la línea de tiempo de la capa Etiquetas y agregue un fotograma clave con la tecla [F6].

• 26. En el Inspector de propiedades asigne la etiqueta al fotograma como Fin.

• 27. Seleccione el tercer fotograma de la línea de tiempo de la capa Fondo y agregue un fotograma clave con la tecla [F6]. Se deberá mostrar el fondo del fotograma número dos. Selecciónelo y bórrelo. Aparecerá el escenario en negro.

• 28. Importe la imagen fondo3.gif al escenario
  y ajústela al mismo. Esta imagen fue desarrollada por Dowman. Su
  sitio http://www.f22fighter.com tiene excelentes juegos desarrollados en
  Flash. La imagen fue bajada de www.flashkit.com. En ella veremos los resultados
  del juego y regresaremos a la primer pantalla.

• 29. Con la herramienta de texto de las indicaciones para regresar a volver a jugar el juego. También arrástre los elementos del fotograma dos para los resultados y distribúyalos en la pantalla para que queden similares a la siguiente imagen:

• 30. Ya que tenemos los tres fondos, tenemos que agruparlo en una carpeta dentro de la biblioteca. Para ello pulse el botón de la parte inferior de la biblioteca. Nombre a la carpeta como Graficos y arrastre los archivos de los fondos a la misma.

• 31. Hasta este punto ya tenemos los fondos de los escenarios. El código lo puede encontrar en el archivo Tanque03.fla. Estamos listos para los elementos gráficos.

Los objetos gráficos:

Los clips de película también son pocos:

• El tanque:

• 32. El tanque: Seleccione el segundo fotograma de la capa Tanque y cree un fotograma clave con la tecla [F6]. Con la herramienta correspondiente dibuje un rectángulo verde de aproximadamente 90×70 pixeles. Encima de él cree un rectángulo más pequeño (de 30×25 pixeles) que representará la cabina del cañon. Ahora dibuje un rectángulo delgado para el cañón (aprox. 64×5 pixeles). Por último dibuje las ruedas del tanque y péguelas a un costado.

• 33. Seleccione todo el dibujo y conviértalo en un clip de película con la tecla [F8]. Nombre al clip como tanque.

• 34. Seleccione el objeto y nombre a la instancia como tanque en el Inspector de propiedades.

• 35. Ubique al tanque en el centro del escenario. Deberá tener una imagen similar a la siguiente (con un poco de imaginación parecerá un tanque visto desde arriba).

• 36. En el Inspector de propiedades asígnele el nombre de instancia tanque.

• Las esferas enemigas:

• 37. Para hacer las balas dibuje un círculo pequeño (14×14 pixeles) fuera del escenario. Verifique que se encuentre en el segundo fotograma de la capa Enemigos. De preferencia rellenelo con algún color degradado para que aparente ser una esfera.

• 38. Seleccione todo el dibujo y conviértalo en un clip de película con la tecla [F8]. Nombre al clip como enemigo.

• 39. En el Inspector de propiedades asígnele el nombre de instancia enemigo.

• 40. Ahora teclee dos veces sobre el objeto para entrar a su línea de tiempo.

Nota:

Recuerde que en Flash es fácil perderse entre objetos, escenas, lineas de tiempo y páneles de acciones. Para verificar en que línea de tiempo se está trabajando, vea la parte superior de la línea de tiempo. En la siguiente imagen se está trabajando en la línea de tiempo del objeto enemigo.

Fin de nota

• 41. En la línea de tiempo del objeto, añada una segunda capa. A la primera llámela ActionScript. A la segunda llámela Explosion.

• 42. En el Panel de acciones de la capa ActionScript teclee la sentencia:

• 43. Seleccione con el apuntador del ratón el segundo fotograma de la capa ActionScript y cree un fotograma clave con la tecla [F6].

• 44. Seleccione ahora el fotograma 10 de la misma capa y pulse nuevamente la tecla [F6] para crear otro fotograma clave.

• 45. Seleccione el fotograma 10 y pulse el botón derecho del ratón. Seleccione la opción de Crear interpolación de movimiento.

• 46. Seleccione el fotograma 5 de la misma capa y pulse el botón derecho del ratón. Nuevamente seleccione la opción de Crear interpolación de movimiento.

• 47. Seleccione el fotograma 10. Seleccione la esfera y amplíela con la herramienta de transformación libre a un tamaño de 33 x 33 pixeles. En el Inspector de propiedades seleccione el efecto de color Alfa y redúzcalo a cero, es decir, la esfera crecerá paulatinamente y desaparecerá.

• 48. En el Panel de acciones del fotograma 10 capture la sentencia:

• 49. Ahora capturaremos un sonido de explosión. En la capa con ese nombre, en el segundo fotograma, cree un fotograma clave con la tecla [F6].

• 50. Puede probar su clip arrastrando la cabeza de la línea de tiempo, aunque no escuchará el efecto de la explosión. Su línea de tiempo deberá lucir igual a la siguiente imagen:

• 51. Regrese a la línea de tiempo de la Escena1 seleccionandola en la pestaña o con la flecha de la esquina superior izquierda de la imagen superior.

• Las balas del tanque:

• 52. Cree fuera del escenario un círculo pequeño (4 x 4 pixeles). Conviértalo en clip de película seleccionándolo y pulsando la tecla [F6]. Lámelo bala. En el Inpsector de propiedades asigne el mismo nombre de instancia.

• 53. Como puede observar, la biblioteca poco a poco comienza a llenarse. Para evitarse futuros problemas, organícela creando las carpetas Sonidos, y Clips. Arrástre los objetos indicados a cada una de ellas.

• 54. El código de estos últimos pasos los encontrará en el archivo Tanque04.fla.

Hasta este punto tenemos los fondos, los objetos y la estructura del juego. Ahora iniciaremos la programación para mover todo lo anterior.

La programación

La lógica de programación es muy similar a la de los juegos anteriores. Tendremos un objeto movido por el usuario (el tanque) y objetos contrarios que se mueven hacia él. En escencia es el mismo juego de StarGate. Sin embargo los movimientos son completamente diferentes ya utilizaremos un poco de trigonometría, pero no es para asustarse, si quiere puede saltarse la explicación y solo concentrarse en el uso de las fórmulas.

Las variables:

En este juego almacenaremos las variables globales en un objeto que se llamará juego. Recuerde que en Flash todo es un objeto. Incluso cuando usted llama a una variable con _root está llamando a una variable que es una propiedad del objeto global con ese nombre.

• 55. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente código en el Panel de acciones.

Primero creamos el objeto vacío [L2]. Los primeros cuatro parámetros maximoEnemigos, maximoBalas, balasNum y vidasNum podría cambiar si quisiera hacer varios niveles dentro del juego pero tendría que cambiar la creación de este objeto al primer fotograma. Los siguientes parámetros, puntosNum, enemigosMuertos, totalPuntos y enemigoNum nos servirán para el marcador del juego. balasNum [L11] . nuevosEnemigos nos servirá para disparar a nuestros enemigos. Los dos últimos parámetros serán las dimensiones del escenario.

Movimiento del tanque

El tanque se moverá sobre su propio eje siguiendo el cursor del ratón (el cual lo ocultaremos). Para ello

• 56. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente código en el Panel de acciones.

Con esta rutina llamaremos a la función evaluaCursor() dependiendo la velocidad de la película, que en este caso es de 12 fotogramas por segundo.

Nota:

Como puede ver, aquí no utilizaremos un clip de película para el motor del juego, sino que almacenaremos las rutinas en el segundo fotograma de la capa ActionScript. Esta forma de codificación se considera más limpia, sin embargo las dos funcionan bastante bien.

Fin de Nota

• 57. Seleccione el segundo fotograma de la línea de tiempo de la capa ActionScript y capture el siguiente código en el Panel de acciones después del código de las variables:

Esta rutina evalúa la diferencia entre la posición del tanque y la del apuntador del ratón [L2-3]. La función arcotangente nos regresará el ángulo entre estas dos distancias en radianes. La forma de rotar a un objeto, como usted debe saber, es por medio de la propiedad _rotation, que se evalúa en grados, es decir, de 0 a 360 grados, por lo que es necesario pasar los radianes a grados con la fórmula de [L5]. Finalmente rotamos el objeto.

Nota:

Todas las funciones trigonométricas en Flash manejan radianes, a excepción de la propiedad _rotation que acepta grados, es decir, un valor entre 0 y 360.

Fin de nota

• 58. .Ejecute la película con las teclas [Ctrl] + [Entrada]. Al mover el apuntador del ratón, el tanque deberá de girar. El código hasta este punto deberá encontrarse en el archivo Tanque05.fla.

Puede observar que el cañon del tanque sigue al cursor. Si usted decide ocultar el apuntador, tendrá que añadir una instrucción Mouse.hide().

Creación de enemigos y de balas

En Flash podemos crear un clip de película de varias formas: Duplicándolo, Llamándolo de la bilioteca o creandolo en blanco. La manera más sencilla es duplicarlo, pero deberá el clip existir en el escenario. Es por eso que se encuentran los clips de balas y enemigos. Nuestra siguiente rutina los duplicará tantas veces como la propiedad correspondiente juego.maximoEnemigos y juego.maximoBalas.

Una forma de no mostrarlos en la pantalla es crearlos fuera del escenario. Algunas veces se crean "invisibles" (como la bala de la nave del juego anterior). Aquí lo haremos de la primera forma. También los crearemos con diferente color, y con diferente valor, según sea el caso.

• 59. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente código en el Panel de acciones después de la rutina para girar al cañón.

Observe que estamos creando a los objetos fuera del escenario con las coordenadas negativas [L7-8]. El color se marca al azar (del 1 al 5), y su valor está dado por su color, es decir, las diferentes esferas valdrán entre 1 a 5 puntos. Ya creados los elementos, ahora tendremos que "ponerlos en juego". Debemos de llamar a esta rutina antes de que inicie los disparos.

• 60. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente código en el Panel de acciones después de la declaración de las variables:

Observe que estamos pasando como parámetros dos de las variables almacenadas en el objeto juego.

• 61. Ejecute la película con las teclas [Ctrl] + [Entrada]. Observe a los objetos en la parte superior izquierda y fuera del escenario. El código hasta este punto deberá encontrarse en el archivo Tanque06.fla.

Disparos del tanque

En esta función deberemos calcular el ángulo del cañón y activar a una bala disponible. Aquí no se moverá el objeto. Para que esto suceda necesitamos detectar cuando el jugador oprima el botón del ratón, así que el primer paso será detectarlo desde nuestro "motor":

• 62. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente código en el Panel de acciones inmediatamente después del comentario Motor:

Nota:

Este código puede funcionar en cualquier lugar del panel de acciones de la línea de tiempo del segundo fotograma de la capa ActionScript, pero en una buena práctica el mantener una estructura lógica en el código tal como:

/*** Declaración de variables globales ***/

/*** Acciones ***/

/*** Motor ***/

/*** Funciones ***/

Usted puede tener la estructura que le parezca más clara. Obviamente estas "buenas prácticas" no lo son en la programación orientada a objetos.

Fin de nota

El siguiente paso es escribir el código en el fotograma correspondiente.

• 63. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente código en el Panel de acciones al final del código:

Observe que estamos barriendo todas las balas para ver cual está inactiva [L4], es decir, si el jugador dispara una ráfaga solo podrá haber activas el número que usted almacene en la variable (20 son suficientes). Activamos la bala cambiando su estado a uno. Ahora debemos calcular el punto de partida de la bala. Su dirección nos la dará el ángulo en radianes. Para la posición calculamos el centro del tanque más el coseno en el eje de las exis multiplicado por el largo del cañón en pixeles [L7]. Para el eje de las yes utilizaremos el seno con la misma lógica [L8]. El ángulo en que se encuentra el cañon del tanque lo almacenamos en el objeto (así nos evitamos usar un arreglo) [L9]. Por último salimos del ciclo, de lo contrario se activaran todas las balas.

Regresaremos más tarde a esta rutina para añadirle sonido, el contador del marcador y un poco de lógica.

Ahora codificaremos la rutina que "mueve" a la bala. Como usted debió de suponer, la llamaremos desde nuestra rutina "Motor".

• 64. Seleccione el segundo fotograma de la capa ActionScript y capture el código en negritas en el Panel de acciones modificando la rutina "Motor":

Nota:

Este punto, asi como algunos porteriores pueden causarle alguna confusión, ya que añadiremos código a ciertas rutinas ya codificadas. En caso de confusión abra los archivos que vienen en el CD:

Fin de nota.

Para relizar la rutina que mueve a las balas, siga estos pasos:

• 65. Seleccione el segundo fotograma de la capa ActionScript y capture el código en negritas en el Panel de acciones despúes de la última función:

• 91. Ejecute la película con las teclas [Ctrl] + [Entrada].

Ahora añadiremos un sonido al disparo del tanque. Para ello primero debemos importar el sonido.

• 92. Seleccione la opción Archivo > Importar > Importar a biblioteca. En el directorio del tanque en el CD deberá haber un archivo WAV que se llama disparo.wav.

• 93. Seleccione el archivo en la biblioteca (si no está abierta pulse [F11]) y pulse el botón derecho del ratón. Escoja la opción de Exportar para ActionScript. Seleccione la opción de vinculación y nombre a este archivo como disparo.

• 94. Nuevamente seleccione el sonido y arrastre el objeto a la carpeta llamada Sonidos.

• 95. Seleccione el segundo fotograma de la capa ActionScript y capture el código en el Panel de acciones en la rutina disparaTanque(). No se confunda, teclee tan solo las instrucciones que se encuentran en negritas [L14-16]:

Observe que estamos llamando en cada disparo al objeto. Usted tiene que medir el desempeño de su juego, dependiendo en el medio en que lo publicará.

• 96. Ejecute la película con las teclas [Ctrl] + [Entrada] y juegue un poco.

• 97. Por último, para reiniciar el juego, entre al botón del tercer fotograma, y capture en su Panel de acciones el siguiente código:

• 98. Ejecute la película con las teclas [Ctrl] + [Entrada]. El código final lo encontrará en el archivo Tanque12.fla. Juegue un poco. Seguramente le surgirán muchas ideas.

Autor:

Arce