Está en la página 1de 23

www.monografias.

com

Desarrollo de juegos con Flash


Tanque
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

El escenario
La programacin
Movimiento del tanque
Creacin de enemigos y de balas
Disparos del tanque
Los temibles enemigos
Colisin de balas Vs. enemigos
Colisin de enemigos Vs. tanque
Marcador
Toques finales

Movimiento rotatorio de un objeto siguiendo al apuntador del ratn.


Movimiento diagonal segn ngulo dado.
Movimiento paulatino de un punto a otro.
Cambio de colores en objetos.
ActionScript
Funcin getTime()
Math.abs()
Objetos Array()
Funcin attachMovie()
Ciclo dowhile()
Mtodo startDrag()
Propiedad _currentFrame
Mtodo controlador onMouseUp()
TANQUE
Al igual que los otros juegos, este es una variacin 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 atacarn. El tanque ser visto desde arriba.

www.monografias.com

Aqu veremos:
Movimiento rotarorio de un objeto siguiendo al apuntador del ratn.
Movimiento diagonal segn 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 captulos anteriores describiremos al escenario y a los objetos grficos para
pasar a la programacin.

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 programacin (ActionScript),
La segunda las etiquetas (Etiquetas),
La tercera para el clip de pelcula 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:
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

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. Aada cinco capas ms con el botn respectivo y nmbrelas 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 sugtela con el apuntador del ratn y el botn izquierdo y
colquela en el lugar deseado.
Fin de nota
4. Seleccione el primer fotograma de la capa ActionScript y aada 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 dems fotogramas que aadiremos:
1

stop();

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 consumirn tiempo precioso en la carga si su juego
va a ser llamado desde Internet. Es mucho mejor utilizar imgenes vectoriales para el diseo de
su aplicacin. 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 ajstela con la herramienta de
Transformacin libre
8. En el espacio correspondiente escriba las instrucciones del juego con la Herramienta de
texto
9. Seleccione de las biliotecas comunes, un botn y arrstrelo al escenario. Abra el Panel
de acciones correspondiente al botn y capture el siguiente guin:
1
2
3

on(press){
gotoAndPlay("Juego");
}

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 botn que se muestra a continuacin:

www.monografias.com

Otros autores dejan espacio entre los diferentes fotogramas para que se puedan distinguir las
etiquetas y dar claridad a la aplicacin. Pruebe estas dos tcnicas para ver cul va ms con
usted.
Fin de nota
11. Ejecute la pelcula con las teclas [Ctrl] + [Enter]. El cdigo 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 (actvelo con [F9] si es necesario.
1

stop();

14. Seleccione el segundo fotograma de la lnea de tiempo de la capa Etiquetas y pulse la


tecla [F6] para crear un fotograma clave. Asgnele el nombre de Juego en el Inspector
de propiedades.
15. Seleccione el segundo fotograma de la lnea de tiempo de la capa Tanque y pulse la
tecla [F6] para crear un fotograma clave. An 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
imgenes del fotograma anterior se copian. No queremos eso, as que brrelas. Deber
tener el escenario negro.
Nota:
No se preocupe, sus imgenes siguen en el primer fotograma, Si no lo cree pulse sobre el mismo
y debern aparecer. Si no aparecen vuelva a abrir el archivo Tanque01.fla y repita los pasos.
Fin de nota

Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

18. Importe el archivo fondo2.jpg a la biblioteca de la pelcula. Arrstrela y colquela 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 rectngulo de aproximdamente 510 x 38 pixeles. Deber ser de un color
claro para que resalte sobre el fondo.
20. Arrastre tres componentes del tipo label y colquelos sobre la barra que acabamos de
crear en forma distribuida. Estos componentes nos servirn para mostrar los resultados
del juego. Modifque 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 pelcula con las teclas [Ctrl] + [Enter]. El cdigo lo puede obtener en el
archivo Tanque02.fla. Despus de pulsar el botn de la primera pantalla, deber tener
resultado similar a:

23. Seleccione el tercer fotograma de la lnea 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 instruccin:
1

stop();
25. Seleccione el tercer fotograma de la lnea 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 lnea de tiempo de la capa Fondo y agregue un
fotograma clave con la tecla [F6]. Se deber mostrar el fondo del fotograma nmero dos.
Seleccinelo y brrelo. Aparecer el escenario en negro.
28. Importe la imagen fondo3.gif al escenario y ajstela 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.
Tambin arrstre los elementos del fotograma dos para los resultados y distribyalos en
la pantalla para que queden similares a la siguiente imagen:

www.monografias.com

30. Ya que tenemos los tres fondos, tenemos que agruparlo en una carpeta dentro de la
biblioteca. Para ello pulse el botn 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 cdigo lo puede encontrar
en el archivo Tanque03.fla. Estamos listos para los elementos grficos.
Los objetos grficos:
Los clips de pelcula tambin 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 rectngulo verde de
aproximadamente 90x70 pixeles. Encima de l cree un rectngulo ms pequeo (de
30x25 pixeles) que representar la cabina del caon. Ahora dibuje un rectngulo delgado
para el can (aprox. 64x5 pixeles). Por ltimo dibuje las ruedas del tanque y pguelas a
un costado.
33. Seleccione todo el dibujo y convirtalo en un clip de pelcula 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 imaginacin parecer un tanque visto desde arriba).

36. En el Inspector de propiedades asgnele el nombre de instancia tanque.


Las esferas enemigas:
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

37. Para hacer las balas dibuje un crculo pequeo (14x14 pixeles) fuera del escenario.
Verifique que se encuentre en el segundo fotograma de la capa Enemigos. De
preferencia rellenelo con algn color degradado para que aparente ser una esfera.
38. Seleccione todo el dibujo y convirtalo en un clip de pelcula con la tecla [F8]. Nombre al
clip como enemigo.
39. En el Inspector de propiedades asgnele el nombre de instancia enemigo.
40. Ahora teclee dos veces sobre el objeto para entrar a su lnea de tiempo.
Nota:
Recuerde que en Flash es fcil perderse entre objetos, escenas, lineas de tiempo y pneles de
acciones. Para verificar en que lnea de tiempo se est trabajando, vea la parte superior de la
lnea de tiempo. En la siguiente imagen se est trabajando en la lnea de tiempo del objeto
enemigo.

Fin de nota
41. En la lnea de tiempo del objeto, aada una segunda capa. A la primera llmela
ActionScript. A la segunda llmela Explosion.
42. En el Panel de acciones de la capa ActionScript teclee la sentencia:
1

stop();
43. Seleccione con el apuntador del ratn 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 botn derecho del ratn. Seleccione la opcin de
Crear interpolacin de movimiento.
46. Seleccione el fotograma 5 de la misma capa y pulse el botn derecho del ratn.
Nuevamente seleccione la opcin de Crear interpolacin de movimiento.
47. Seleccione el fotograma 10. Seleccione la esfera y amplela con la herramienta de
transformacin libre a un tamao de 33 x 33 pixeles. En el Inspector de propiedades
seleccione el efecto de color Alfa y redzcalo a cero, es decir, la esfera crecer
paulatinamente y desaparecer.

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


1

stop();

www.monografias.com

49. Ahora capturaremos un sonido de explosin. 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 lnea de tiempo, aunque no escuchar
el efecto de la explosin. Su lnea de tiempo deber lucir igual a la siguiente imagen:

51. Regrese a la lnea de tiempo de la Escena1 seleccionandola en la pestaa o con la


flecha de la esquina superior izquierda de la imagen superior.
Las balas del tanque:
52. Cree fuera del escenario un crculo pequeo (4 x 4 pixeles). Convirtalo en clip de
pelcula seleccionndolo y pulsando la tecla [F6]. Lmelo 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, organcela creando las carpetas Sonidos, y Clips. Arrstre los
objetos indicados a cada una de ellas.
54. El cdigo 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
programacin para mover todo lo anterior.

La programacin
La lgica de programacin 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 trigonometra, pero no es para asustarse, si quiere puede saltarse la
explicacin y solo concentrarse en el uso de las frmulas.
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 cdigo
en el Panel de acciones.
1
2
3
4
5
6
7
8
9
10
11

/********** Objeto con los parmetros ************/


juego = {};
juego.maximoEnemigos = 10;
juego.maximoBalas = 20;
juego.balasNum = 150;
juego.vidasNum = 3;
juego.puntosNum = 0;
juego.enemigosMuertos = 0;
juego.totalPuntos = 0;
juego.enemigoNum = 0;
juego.balaNum = 1;
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

12
13
14

juego.nuevoEnemigo=getTimer()+1000;
juego.ancho = 550;
juego.alto = 400;

Primero creamos el objeto vaco [L2]. Los primeros cuatro parmetros maximoEnemigos,
maximoBalas, balasNum y vidasNum podra cambiar si quisiera hacer varios niveles dentro del
juego pero tendra que cambiar la creacin de este objeto al primer fotograma. Los siguientes
parmetros, puntosNum, enemigosMuertos, totalPuntos y enemigoNum nos servirn para el
marcador del juego. balasNum [L11] . nuevosEnemigos nos servir para disparar a nuestros
enemigos. Los dos ltimos parmetros sern las dimensiones del escenario.

Movimiento del tanque


El tanque se mover sobre su propio eje siguiendo el cursor del ratn (el cual lo ocultaremos).
Para ello
56. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente cdigo
en el Panel de acciones.
1
2
3

/*************** M O T O R **************/
_root.onEnterFrame = function (){
evaluaCursor();
}

Con esta rutina llamaremos a la funcin evaluaCursor() dependiendo la velocidad de la pelcula,


que en este caso es de 12 fotogramas por segundo.
Nota:
Como puede ver, aqu no utilizaremos un clip de pelcula para el motor del juego, sino que
almacenaremos las rutinas en el segundo fotograma de la capa ActionScript. Esta forma de
codificacin se considera ms limpia, sin embargo las dos funcionan bastante bien.
Fin de Nota
57. Seleccione el segundo fotograma de la lnea de tiempo de la capa ActionScript y
capture el siguiente cdigo en el Panel de acciones despus del cdigo de las
variables:
1
2
3
4
5
6
7

function evaluaCursor(){
dx = _xmouse - tanque._x;
dy = _ymouse - tanque._y;
radianes = Math.atan2(dy, dx);
grados = 360*radianes/(2*Math.PI);
tanque._rotation = grados;
}

Esta rutina evala la diferencia entre la posicin del tanque y la del apuntador del ratn [L2-3]. La
funcin 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
evala en grados, es decir, de 0 a 360 grados, por lo que es necesario pasar los radianes a
grados con la frmula de [L5]. Finalmente rotamos el objeto.
Nota:
Todas las funciones trigonomtricas en Flash manejan radianes, a excepcin de la propiedad
_rotation que acepta grados, es decir, un valor entre 0 y 360.
Fin de nota
58. .Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. Al mover el apuntador del ratn, el
tanque deber de girar. El cdigo hasta este punto deber encontrarse en el archivo
Tanque05.fla.

www.monografias.com

Puede observar que el caon del tanque sigue al cursor. Si usted decide ocultar el apuntador,
tendr que aadir una instruccin Mouse.hide().

Creacin de enemigos y de balas


En Flash podemos crear un clip de pelcula de varias formas: Duplicndolo, Llamndolo de la
bilioteca o creandolo en blanco. La manera ms 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. Tambin los crearemos con diferente color, y con diferente valor, segn sea el caso.
59. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente cdigo
en el Panel de acciones despus de la rutina para girar al can.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function creaEnemigosyBalas(maximoEnemigos, maximoBalas){


for(var i= 0; i<maximoEnemigos; i++){
duplicateMovieClip("enemigo","enemigo"+i,100+i);
var colorEnemigo = new Color("enemigo"+i);
var tipoEnemigo = random(5)+1;
var mc = _root["enemigo"+i];
mc._x = -10 * i;
mc._y = -10;
mc.estado = 0;
mc.valor= tipoEnemigo;
//Cambia color
if(tipoEnemigo==1){
//Amarillo
colorEnemigo.setTransform({gb:255});
} else if(tipoEnemigo==2) {
//Rosita
colorEnemigo.setTransform({rb:255, bb:255});
} else if(tipoEnemigo==3) {
//Azul
colorEnemigo.setTransform({bb:255});
} else if(tipoEnemigo==4) {
//Rojo
colorEnemigo.setTransform({rb:255});
}
}
for(var i= 0; i<maximoBalas; i++){
duplicateMovieClip("bala","bala"+i,200+i);
var mc = _root["bala"+i];
mc._x = -10 * i;
mc._y = -20;
mc.estado = 0;
}
}

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 valdrn 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.
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

60. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente cdigo


en el Panel de acciones despus de la declaracin de las variables:
1
2
3

/**************** Oculta el ratn ****************/


Mouse.hide();
creaEnemigosyBalas(juego.maximoEnemigos, juego.maximoBalas);

Observe que estamos pasando como parmetros dos de las variables almacenadas en el objeto
juego.
61. Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. Observe a los objetos en la parte
superior izquierda y fuera del escenario. El cdigo hasta este punto deber encontrarse
en el archivo Tanque06.fla.

Disparos del tanque


En esta funcin deberemos calcular el ngulo del can y activar a una bala disponible. Aqu no
se mover el objeto. Para que esto suceda necesitamos detectar cuando el jugador oprima el
botn del ratn, as que el primer paso ser detectarlo desde nuestro motor:
62. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente cdigo
en el Panel de acciones inmediatamente despus del comentario Motor:
1
2
3

_root.onMouseUp = function() {
_root.disparaTanque();
}

Nota:
Este cdigo puede funcionar en cualquier lugar del panel de acciones de la lnea de tiempo del
segundo fotograma de la capa ActionScript, pero en una buena prctica el mantener una
estructura lgica en el cdigo tal como:
/*** Declaracin de variables globales ***/
/*** Acciones ***/
/*** Motor ***/
/*** Funciones ***/
Usted puede tener la estructura que le parezca ms clara. Obviamente estas buenas prcticas
no lo son en la programacin orientada a objetos.
Fin de nota
El siguiente paso es escribir el cdigo en el fotograma correspondiente.
63. Seleccione el segundo fotograma de la capa ActionScript y capture el siguiente cdigo
en el Panel de acciones al final del cdigo:
1
2
3
4
5
6
7
8
9
10
11
12

11

function disparaTanque(){
for(var i= 0; i<juego.maximoBalas; i++){
var mc = _root["bala"+i];
if (mc.estado==0){
mc.estado = 1;
//Calcula el ngulo
mc._x = tanque._x + Math.cos(radianes)* 35;
mc._y = tanque._y + Math.sin(radianes)* 35;
mc.angulo = radianes;
//
break;
}

www.monografias.com

13
14

}
}

Observe que estamos barriendo todas las balas para ver cual est inactiva [L4], es decir, si el
jugador dispara una rfaga solo podr haber activas el nmero 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 direccin nos la dar el ngulo en radianes. Para la
posicin calculamos el centro del tanque ms el coseno en el eje de las exis multiplicado por el
largo del can en pixeles [L7]. Para el eje de las yes utilizaremos el seno con la misma lgica
[L8]. El ngulo en que se encuentra el caon 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 ms tarde a esta rutina para aadirle sonido, el contador del marcador y un poco
de lgica.
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 cdigo en
negritas en el Panel de acciones modificando la rutina Motor:
1
2
3
4
5

/*************** M O T O R **************/
_root.onEnterFrame = function (){
evaluaCursor();
mueveBalas();
}

Nota:
Este punto, asi como algunos porteriores pueden causarle alguna confusin, ya que aadiremos
cdigo a ciertas rutinas ya codificadas. En caso de confusin 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 cdigo en
negritas en el Panel de acciones despes de la ltima funcin:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function mueveBalas(){
var velocidadBala = 20;
for(var i=0; i<juego.maximoBalas; i++) {
var mc = _root["bala"+i];
//Evala solo a las balas activas
if(mc.estado==1){
var angulo = mc.angulo;
mc._x += Math.cos(angulo) * velocidadBala;
mc._y += Math.sin(angulo) * velocidadBala;
//Evala si sali el disparo del escenario
if(mc._x>juego.ancho or
mc._y>juego.largo) mc.estado = 0;
if(mc._x<0 or mc._y<0) mc.estado = 0;
}
}
}

Esta es una de las rutinas base en el juego, pues moveremos un bojeto desde un punto inicial
(dado al momento de la creacin del objeto bala) conociendo tan solo un ngulo en radianes.
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

Para calcular la coordenada en exis, utilizamos la funcin trigonomtrica coseno (Math.cos()), y


para el elemento en las yes la funcin seno (Math.sen()). Para no saturarlo recordando las clases
de trigonoma, puede dar como ciertas estas clusulas y leer ms tarde el anexo
correspondiente.
Observe que la velocidad la almacenamos en una variable que en realidad son los pixeles que
se desplazar la bala. Usted puede modificar este parmetro a su antojo o necesidad.
Nota:
Flash es un sistema basado en fotogramas y no en tiempo, es decir, para Flash el tiempo se
mide en fotogramas por segundo (fps), pero es ms encillo modificar la velocidad de los objetos
por medio de los pixeles que se desplazar. Sin embargo, esto tiene un lmite. Es recomendable
manejar una velocidad de 24 fps y no 12 fps como es el estndar. Usted deber practicar con
estas velocidades y ver cual es la mejor para sus aplicaciones.
Fin de nota
66. .Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. El cdigo hasta este punto deber
encontrarse en el archivo Tanque07.fla.
Hasta este punto usted tendr un tanque disparador. Ahora necesitamos aadir a los
contrincantes.

Los temibles enemigos


En este juego los enemigos son simples esferas que creamos en la funcin
creaEnemigosyBalas(), y se encuentran estacionados en la esquina superiro izquierda del
escenario (fuera de l). En dicha funcin les cambiamos el color y les dimos un valor segn el
mismo. El siguiente proceso es moverlos.
Para ello necesitamos aumentar nuestro arcenal de trucos para hacer juegos: Ya sabemos
mover un clip en forma diagonal dependiendo de un ngulo dado. Ahora moveremos un clip
conociendo el punto de partido y el de llegada. En la siguiente funcin ver que creamos al
enemigo fuera de la pantalla en forma aleatoria, y sabemos que todos deben de moverse al
centro del escenario, que es donde se encuentra nuestro tanque (en este caso es la coordenada
____, ____). As que:
67. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en
negritas en el Panel de acciones despes de la ltima funcin:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

13

/*************************************************/
function lanzaEnemigos() {
if(juego.nuevoEnemigo < getTimer()){
for(var i= 0; i<juego.maximoEnemigos; i++){
var mc = _root["enemigo"+i];
if(mc.estado==0){
lado = random(4)+1;
//Izquierda
if(lado==1){
x = -10;
y = random(juego.alto);
//Arriba
} else if(lado==2){
x = random(juego.ancho);
y = -10;
//Derecha
} else if(lado==3){
x = juego.ancho + random(10);
y = random(juego.alto);
//Abajo
} else {

www.monografias.com

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

x = random(juego.ancho);
y = juego.alto + random(10);
}
mc.n = 0;
mc._x = x;
mc._y = y;
mc.xInicio = mc._x;
mc.yInicio = mc._y;
mc.estado = 1;
juego.nuevoEnemigo = getTimer() + 1000 * random(3);
break;
}
}
}
}

En la [L3] estamos validando si ya es tiempo de lanzar a un nuevo enemigo. Utilizamos este


truco porque Flash es un sistema sincronizado con fotogramas, ms que por el reloj de la
computadora.
Al igual que nuestras balas, los objetos de los enemigos tendrn un parmetro que indican si
estn activos o en reposo [L6]. Lo primero es saber de cual lado ser creado el objeto. De forma
grfica el significado es:

Observe que estamos asignando esta coordenada inicial al objeto [L28,29]. Volvemos a calcular
aleatoriamente el tiempo en que se crear la siguiente esfera enemiga. [L31] y salimos del ciclo.
A esta funcin la llamaremos desde nuestra rutina MOTOR.
68. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en
negritas en el Panel de acciones modificando la rutina Motor:
1
2
3
4
5
6

/*************** M O T O R **************/
_root.onEnterFrame = function (){
evaluaCursor();
mueveBalas();
lanzaEnemigos();
}
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

Para mover a las esferas necesitaremos la siguiente funcin:


69. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en
negritas en el Panel de acciones despes de la ltima funcin:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*************************************************/
function mueveEnemigos(){
var xCentro = juego.ancho / 2;
var yCentro = juego.alto / 2;
for(var i = 0; i<juego.maximoEnemigos; i++) {
var mc = _root["enemigo"+i];
if(mc.estado == 1) {
mc.n+=mc.valor;
if(mc.n<=100){
mc._x = xCentro*mc.n/100 + mc.xInicio*(100-mc.n)/100;
mc._y = yCentro*mc.n/100 + mc.yInicio*(100-mc.n)/100;
}
}
}
}

Aqu volvemois a utilizar un poco de matemticas para mover a nuestro objeto. Primero
calculamos el centro del escenario [L3,4], y volvemos a barrer a nustros objetos enemigos
activos. Lo siguiente es calcular un porcentaje de la lnea entre el punto original y el centro.
Observe que a este porcentaje le estamos sumando la velocidad, es decir, la bala se mover
ms rpido si tiene mayor valor. Una explicacin detallada de la forma de calcular las
coordenadas la encontrar en el apndice correspondiente.
70. Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. El cdigo hasta este punto deber
encontrarse en el archivo Tanque08.fla.
Ahora tenemos a los enemigos que avanzan al centro del escenario y al tanque que dispara. Los
siguientes pasos sern detectar las colisiones de las balas contra los enemigos, y de los
enemigos contra el tanque, entre otras funciones, asi que vaya por un caf porque nos toca
analizar las colisiones.

Colisin de balas Vs. enemigos


Para esta deteccin barraremos tanto a los objetos balas como a cada uno de los enemigos
activos, pero primero debemos incluir el llamado de la rutina en nuestra funcin motor:
71. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en
negritas en el Panel de acciones modificando la rutina Motor:
1
2
3
4
5
6
7

/*************** M O T O R **************/
_root.onEnterFrame = function (){
evaluaCursor();
mueveBalas();
lanzaEnemigos();
colisionBalas();
}
72. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en
negritas en el Panel de acciones despes de la ltima funcin:

1
2

15

/*************************************************/
function colisionBalas(){

www.monografias.com

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

for(var i=0; i<juego.maximoBalas; i++) {


var mcBala = _root["bala"+i];
if(mcBala.estado==1){
for(var j=0; j<juego.maximoEnemigos; j++){
var mcEnemigo = _root["enemigo"+j];
if(mcEnemigo.estado==1){
var x1 = mcBala._x;
var y1 = mcBala._y;
var x2 = mcEnemigo._x;
var y2 = mcEnemigo._y;
if(Math.abs(x1-x2)<15 and Math.abs(y1-y2)<15){
mcEnemigo.gotoAndPlay(2);
mcEnemigo.estado = 0;
mcEnemigo.n = 0;
}
}
}
}
}
}

Como se mencion, tenemos dos ciclos anidados para revisar todas las balas activas contra
todos los enemigos activos. Verificamos las coordenadas de los clips y vemos si se encuentran
suficientemente cerca. En este caso disparamos la animacin de la explosin en los enemigos
y cambiamos su estado a cero, as como el porcentaje de avance.
73. Ejecute la pelcula con las teclas [Ctrl] + [Entrada].
Escuche que cada vez que explota uno de los enemigos se escuchar el sonido
correspondiente. Sin embargo ver que algunas veces el enemigo se queda en el escenario y
luego desaparece. Para quitar estos fantasmas necesitamos sustituir el stop dentro del objeto y
sustituirlo con nuevas corrdenadas:
74. Seleccione el objeto enemigo pulsando dos veces sobre l. En la Panel de acciones
del fotograma 10, de la capa ActionScript cambie el stop por estas instrucciones:
1
2

this._x = -15;
this._y = -15;

Lo que estamos haciendo es que al finalizar la explosin moveremos el objeto a una coordenada
fuera del escenario (negativa).
75. Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. El cdigo hasta este paso lo
encontrar en el archivo Tanque09.fla.
Nota:
El enemigo fantasma: Por su naturaleza de un sistema sincronizado por fotogramas, es posible
que si los objetos se mueven demasiado rpido es posible que Flash no detecte la colisin, ya
que es evaluado por fotogramas, y cuando pasa este fotograma el objeto avanz tan rpido que
la condicin en la nueva evaluacin ya no se present. Para ello puede subir el nmero de
fotogramas evaluados por segundo. Llame a la ventana de dilogo con las teclas [Ctrl]+[J] y
cambie a 24 los fps:

Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

Pero an este truco tiene un lmite. Usted tiene que encontrar su punto ptimo entre la velocidad
de evaluacin de su juego con la velocidad de sus objetos.
Fin de nota

Colisin de enemigos Vs. tanque


Ahora tenemos que detectar la otra colisin.
76. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en
negritas en el Panel de acciones modificando la rutina Motor:
1
2
3
4
5
6
7

/*************** M O T O R **************/
_root.onEnterFrame = function (){
evaluaCursor();
mueveBalas();
lanzaEnemigos();
colisionBalas();
colisionEnemigosTanque();
}
77. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones despes de la ltima funcin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

17

function colisionEnemigosTanque(){
for(var j=0; j<juego.maximoEnemigos; j++){
mcEnemigo = _root["enemigo"+j];
if(mcEnemigo.estado==1){
x1 = mcEnemigo._x;
y1 = mcEnemigo._y;
mcTanque = _root["tanque"]
x2 = mcTanque._x;
y2 = mcTanque._y;
if(Math.abs(x1-x2)<35 and Math.abs(y1-y2)<35){
mcEnemigo.estado = 0;
mcEnemigo.n = 0;
mcEnemigo.gotoAndPlay(2);
}
}
}
}

www.monografias.com

Para esta colisin barremos a los enemigos activos y verificamos si se encuentran


suficientemente cerca de nuestro tanque. De ser cierto, explotamos el objeto y lo regresamos a
estado cero. Bien se pudo incluir esta esta rutina en la de las otras colisiones, pero siempre hay
que escoger claridad y sencills a (a menos que lo paguemos con un pero desempeo del
juego).
78. Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. El cdigo hasta este paso lo
encontrar en el archivo Tanque10.fla.
Hasta este punto tendremos un juego casi listo. Nos falta aanidr el marcador, asi como
algunos efectos y complicar un poco la trama, por ejemplo, a cada 100 puntos le daremos 10
balas extras. Tambin falta algo muy importante: saber cuando finalizar el juego y como
reiniciarlo.

Marcador
Para este juego tendremos tres valores que mostrar como marcador: El nmero de vidas, el
nmero de balas y los puntos que vayamos acumulando. Esta informacin nos ser de utilidad
para determinar cuando se termina el juego (se gana o se pierde). Algunos criterios pueden ser:
1. Cuando se terminen las tres vidas se concluye el juego.
2. Cuando se terminan las balas, aunque se tengan vidas disponibles.
3. Si se llega a 100 puntos, se le asignarn 10 balas adicionales y se deja en cero el
marcador.
4. Se ctendr un contador total, el mismo que se ver enla pantalla final.
Usted puede idear cuantas reglas crea conveniente. Muchas de ellas son las que le dan sabor al
juego. As que iniciemos con la ms sencilla. Tendremos un contador de vidas y al terminarse, el
juego finaliza. Recuerde que este contador lo tenemos como un parmetro en el objeto juego. Lo
primeroser desplegar los tres marcadores:
79. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones despes de las variables creadas en el objeto juego:
1
2
3
4
5
6
7

/************** Modificamos marcador *************/


vidas.text = juego.vidasNum;
puntos.text = juego.puntosNum;
parque.text = juego.balasNum;
vidas.fontSize = 30;
puntos.fontSize = 30;
parque.fontSize = 30;

Aqu estamos vaciando los valores a los componentes creados desde un inicio. Tambin
modificamos el tamao de los mismos
El lugar donde deberemos insertar el cdigo para disminuir las vidas, ser ovbiamente, la rutina
de la colisin de los enemigos contra el tanque, as que deber agragar el siguiente cdigo:
80. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones en la rutina colisionEnemigosTanque(). No se confunda, teclee tan
solo las instrucciones que se encuentran en negritas [L13-14]:
1
2
3
4
5
6
7
8

function colisionEnemigosTanque(){
for(var j=0; j<juego.maximoEnemigos; j++){
mcEnemigo = _root["enemigo"+j];
if(mcEnemigo.estado==1){
x1 = mcEnemigo._x;
y1 = mcEnemigo._y;
mcTanque = _root["tanque"]
x2 = mcTanque._x;
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

9
10
11
12
13
14
15
16
17
18
19
20
21
22

y2 = mcTanque._y;
if(Math.abs(x1-x2)<35 and Math.abs(y1-y2)<35){
mcEnemigo.estado = 0;
mcEnemigo.gotoAndPlay(2);
//Disminuye vidas
juego.vidasNum--;
vidas.text = juego.vidasNum;
if(juego.vidasNum==0){
gotoAndPlay("Fin");
}
}
}
}
}

Observe que disminuimos las vidas, mostramos la informacin en el escenario y tomamos una
decisin [L16]. Si ya no hay vidas, nos movemos al tercer fotograma que se llama Fin, y termina
la batalla.
81. Ejecute la pelcula con las teclas [Ctrl] + [Entrada] y juegue un poco. Este marcador es
decreciente.
Ahora necesitamos saber cuantos puntos hemos obtenido. Para ello habr que sumar. El lugar
adecuado para ello es en la funcin colisionBalas().
82. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones en la rutina colisionEnemigosTanque(). No se confunda, teclee tan
solo las instrucciones que se encuentran en negritas [L16-24]:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

19

function colisionBalas(){
for(var i=0; i<juego.maximoBalas; i++) {
var mcBala = _root["bala"+i];
if(mcBala.estado==1){
for(var j=0; j<juego.maximoEnemigos; j++){
var mcEnemigo = _root["enemigo"+j];
if(mcEnemigo.estado==1){
var x1 = mcBala._x;
var y1 = mcBala._y;
var x2 = mcEnemigo._x;
var y2 = mcEnemigo._y;
if(Math.abs(x1-x2)<15 and Math.abs(y1-y2)<15){
mcEnemigo.gotoAndPlay(2);
mcEnemigo.estado = 0;
mcEnemigo.n = 0;
var valor = mcEnemigo.valor
juego.puntosNum += valor;
juego.totalPuntos += valor;
puntos.text = juego.puntosNum;
mcEnemigo.estado = 0;
if(juego.puntosNum>=100){
juego.puntosNum=0;
juego.balasNum += 20;
}
}
}
}

www.monografias.com

28
29
30

}
}
}

Aqu asignamos a una variable el valor del enemigo derribado y lo sumaremos a los dos
marcadores, el parcial y el total. Desplegamos el marcador parcial y asignaremos parque
(modificando el contador) de balas si se ha llegado a cien o ms. En esta rutina puede hacer
ms variaciones, como por ejemplo, sumar una vida al llegar a doscientos puntos.
El ltimo marcador es el del parque. El lugar adecuado para controlarlo es en la rutina que
dispara la bala, es decir, disparaTanque().
83. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones en la rutina colisionEnemigosTanque(). No se confunda, teclee tan
solo las instrucciones que se encuentran en negritas [L10-16]:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function disparaTanque(){
for(var i= 0; i<juego.maximoBalas; i++){
var mc = _root["bala"+i];
if (mc.estado==0){
mc.estado = 1;
//Calcula el ngulo
mc._x = tanque._x + Math.cos(radianes)* 55;
mc._y = tanque._y + Math.sin(radianes)* 55;
mc.angulo = radianes;
//Disminuye el contador
juego.balasNum--;
parque.text = juego.balasNum;
//
if(juego.balasNum==0){
gotoAndPlay("Fin");
}
//
break;
}
}
}

Disminuimos el contador de las balas y verificamos: si el contador es cero, el juego termina. En


esta rutina tambn puede inventar una super bomba, donde los enemigos de alrededor son
destruidos si presiona la barra espaciadora, pero tiene uncosto de 40 balas, por ejemplo. Ya
podemos probar nuevamente nuestro juego.
84. Ejecute la pelcula con las teclas [Ctrl] + [Entrada] y juegue un poco.
Observe que si termina el juego, los valores en los componentes se pierden. Para ello:
85. Seleccione el tercer fotograma de la capa ActionScript y capture el cdigo en el Panel
de acciones. Ojo: Es el fotograma de Fin.
1
2
3
4
5
6
7
8

/***********************************************
Fotograma final
***********************************************/
Mouse.show();
/************** Modificamos marcador *************/
vidas.text = juego.vidasNum;
puntos.text = juego.totalPuntos;
parque.text = juego.balasNum;
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

9
10
11
12
13
14

vidas.fontSize = 30;
puntos.fontSize = 30;
parque.fontSize = 30;
/*************************************************/
stop();
/*************************************************/

86. Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. El cdigo hasta este punto lo
encontrar en el archivo Tanque11.fla.
Note que al finalizar el juego los enemigos de la democracia siguen movindose. Para ello
necesitamos unos ltimos toques: quitarlos de la pantalla y darle sonido a los disparos.

Toques finales
Como toques finales detendremos el movimiento de los enemigos al terminar el juego,
aadiremos sonido al disparo de las balas y un fondo musical.
Para deterner y color fuera de la pantalla a los enemigos, escribiremos la siguiente funcin:
87. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones despus de la ltima funcin:
1
2
3
4
5
6
7
8
9
10

function detieneMovimiento(){
for(var i=0; i<juego.maximoEnemigos; i++){
var mc = _root["enemigo"+i];
trace(mc);
mc._x = -10 * i;
mc._y = -10;
mc.estado = 0;
mc.n = 0;
}
}

Usted puede acompletar la funcin para mover las balas, si lo cree conveniente. Otra opcin es
borrar los objetos. Ahora tiene que aadir el llamado de la funcin en el tercer fotograma:
88. Seleccione el tercer fotograma de la capa ActionScript y capture el cdigo en el Panel
de acciones. Ojo: Es el fotograma de Fin. Aada la lnea 13.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/***********************************************
Fotograma final
***********************************************/
Mouse.show();
/************** Modificamos marcador *************/
vidas.text = juego.vidasNum;
puntos.text = juego.totalPuntos;
parque.text = juego.balasNum;
vidas.fontSize = 30;
puntos.fontSize = 30;
parque.fontSize = 30;
/*************************************************/
detieneMovimiento();
stop();
/*************************************************/
89. Ejecute la pelcula con las teclas [Ctrl] + [Entrada].

21

www.monografias.com

Observar que las esferan salen de la pantalla y nuevamente inician el movimiento. Por qu?
Pues el motivo es el motor (la rutina motor) que continua funcionando. As que debemos indicarle
que el juego ha finalizado. Para ello podemos aadir una variable global en el objeto juego, algo
as como encendido y apagado. Otra forma es con los criterios que establecimos, y nos
ahorramos una variable, es decir si el contador de balas y de vidas son mayores de cero, el
juego continua. Si uno de ellos es igual que cero, el juego termin. La debilidad de este criterio
es que si cambiamos los criterio para finalizar el juego, tendramos que modificar esta lnea. Asi
qu:
90. Seleccione el segundo fotograma de la capa ActionScript y capture el cdigo en el
Panel de acciones. Modifique la rutina motor. [L5-7]
1
2
3
4
5
6
7
8
9
10
11

/*************** M O T O R **************/
_root.onEnterFrame = function (){
evaluaCursor();
mueveBalas();
if(juego.vidasNum>0 and juego.balasNum>0){
lanzaEnemigos();
}
mueveEnemigos();
colisionBalas();
colisionEnemigosTanque();
}

91. Ejecute la pelcula con las teclas [Ctrl] + [Entrada].


Ahora aadiremos un sonido al disparo del tanque. Para ello primero debemos importar el
sonido.
92. Seleccione la opcin 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 botn
derecho del ratn. Escoja la opcin de Exportar para ActionScript. Seleccione la
opcin de vinculacin 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 cdigo en el
Panel de acciones en la rutina disparaTanque(). No se confunda, teclee tan solo las
instrucciones que se encuentran en negritas [L14-16]:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function disparaTanque(){
for(var i= 0; i<juego.maximoBalas; i++){
var mc = _root["bala"+i];
if (mc.estado==0){
mc.estado = 1;
//Calcula el ngulo
mc._x = tanque._x + Math.cos(radianes)* 55;
mc._y = tanque._y + Math.sin(radianes)* 55;
mc.angulo = radianes;
//Disminuye el contador
juego.balasNum--;
parque.text = juego.balasNum;
//
var sonido = new Sound();
sonido.attachSound("disparo");
sonido.start();
//
Para ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

www.monografias.com

18
19
20
21
22
23
24
25

if(juego.balasNum==0){
gotoAndPlay("Fin");
}
//
break;
}
}
}

Observe que estamos llamando en cada disparo al objeto. Usted tiene que medir el desempeo
de su juego, dependiendo en el medio en que lo publicar.
96. Ejecute la pelcula con las teclas [Ctrl] + [Entrada] y juegue un poco.
97. Por ltimo, para reiniciar el juego, entre al botn del tercer fotograma, y capture en su
Panel de acciones el siguiente cdigo:
1
2
3

on(press){
gotoAndPlay("Inicio");
}
98. Ejecute la pelcula con las teclas [Ctrl] + [Entrada]. El cdigo final lo encontrar en el
archivo Tanque12.fla. Juegue un poco. Seguramente le surgirn muchas ideas.

Autor:
Arce
fj_arce@yahoo.com.mx

23

También podría gustarte