Gu

ía p

ráct

ica

Preparado por Fco. Rocco

Desarrollo de un juego de comparacionescon AS3 y paquetes

CREANDO UN JUEGO DE COINCIDENCIAS: arrastrar y soltar

Empezaremos con 8 elementos que forman nuestro

juego: 4 textos y 4 dibujos.Crearemos una clase para los 4 textos del escenario,

y la llamaremos txtBanderas.as. Recordemos que al escribirla con mayúsculanos referimos a una clase.

Comenzamos entonces escribiendo el siguiente código dentro de ella:

package { import.flash.display.movieClip; import.flash.events.MouseEvent;

public class txtBandera extends MovieClip { public function txtBandera ( ): void { this.addeventListener( MouseEvent.MOUSE_DOWN, arrastrarlo); this.addeventListener( MouseEvent.MOUSE_UP, soltarlo); } private function arrastrarlo (e: MousEvent) : void5 { this.startDrag ( ); private function soltarlo(e: MousEvent ) : void7 { this.stopDrag ( ); } }

Cometarios:

01: Lo 1ro es crear un paquete que contenga una clase publica la quellamaremos “txtBandera”03-04: Importamos las clases que ocuparemos06: Creamos propiedades para las clases, las que son variablespúblicas.Incluimos todos los métodos y propiedades de la clase MovieClipcon la palabra clave de definición extends.08: Agregamos los detectores de eventos dentro de una función constructoraP

OO

: A

rras

trar

y s

olt

ar 0102030405060708091011121314151617181920

para que las funcionalidades de arrastrar y soltar ocurran, es decir al hacerclck en el mouse y al soltarlo. Para ello creamos una función pública quealoje estos detectores.10: A esta clase (this) le agregamos un detector de eventos del tipoMouseEvent..MOUSE_DOWN, para que la función ocurra solamente cuandomantenemos el botón del mouse presionado. La función CLICK es cuandohacemos click y luego soltamos el botón. Sin embargo no es lo que queremos.11: A esta clase (this) le agregamos un detector de eventos del tipoMouseEvent..UP_DOWN, para que la función cuando soltemos el botón delmouse que se ha presionado.13: Definimos la funcionalidad de arrastrar que se activará en los textos delescenario, con la función privada “soltar”. Es privada porque los demás objetosno necesitan saber que es lo que pasa al arrastra y soltar. Declaramos lavariable “e” la que almacena los datos que envía el detector de eventos.15: Para arrastrar un objeto en el escenario ocupamos la funcion startDrag17: Definimos la funcionalidad de soltar que se activará en los textos delescenario, con otra función privada llamada “soltar”. Declaramos la variable“e” la que almacena los datos que envía el detector de eventos.19: Para soltar un objeto en el escenario ocupamos la función stopDrag.

Ahora que hemos escrito el código base para nuestro juego de comparación,asociamos el archivo .fla con el archivo .as. Sin embargo debemos tenerpresente que ActionScript nos pedirá un nombre único de clase al asociarcada movieclip en el escenario. Si no hacemos esto nos arrojará un error.

De modo que la manera correcta de vincular ambos archivos es:

PO

O:

Arr

astr

ar y

so

ltar

CREANDO UN JUEGO DE COINCIDENCIAS: detectando colisiones

Lo que debemos tener en mente es el target u objetivo que debemos darle acada texto, de manera que este coincida con su bandera correspondiente .Para esto necesitamos una variable pública para la clase txtBandera y así darleciertas propiedades. Creamos el archivo txtBandera.as con el siguiente código:

package { import.flash.display.MovieClip; import.flash.events.MouseEvent;

public class txtBandera extends MovieClip { public var _acertar:MovieClip; public function txtBandera ( ): void { this.addeventListener( MouseEvent.MOUSE_DOWN, arrastrarlo); this.addeventListener( MouseEvent.MOUSE_UP, soltarlo); } private function arrastrarlo (e: MousEvent) : void { this.startDrag ( ); private function soltarlo(e: MousEvent ) : void { this.stopDrag ( ); } }

Cometarios:

08: Declaramos una variable de nombre _acertar la que almacenará el objetivoactual al que estamos apuntando. Es una convención general que al crearuna variable pública que le de propiedades a una clase, ésta comiencecon guión bajo. Definimos el tipo de variable que será MovieClip, por estardirigida a alguna de las banderas.

En este punto creamos un 2do archivo .as que servirá como una clasedocumento para nuestro juego y lo llamaremos “Puntaje.as”. De manera quelinkeamos nuestro archivo .fla con la clase que recién crearemos:

010203040506070809101112131415161718192021

PO

O:

Co

lisi

on

es

El código para la nueva clase documento Puntaje es:

package{import flash.display.MovieClip;import flash.events.MouseEvent;

public class Puntaje extends MovieClip public function Puntaje():void

{ // acertar es la propiedad y Chile_mc el objetivo de txtChile_mc txtChile_mc._acertar = Chile_mc; txtEcuador_mc._acertar = Ecuador_mc; txtEmiratos_mc._acertar = Emiratos_mc; txtIndia_mc._acertar = India_mc;

txtChile_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtEcuador_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtEmiratos_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtIndia_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); }

private function resultado(e:MouseEvent):void { // mc1_mc.hitTestObject (mc2_mc) // Fórmula a ocupar: if (e.currentTarget.hitTestObject(e.currentTarget._acertar)) trace (” Aquí está el resultado...”); }

}}

010203040506070809101112131415161718192021222324252627282930P

OO

: C

oli

sio

nes

Comentarios:

01: Comenzamos creando un paquete de clases03-04: Importamos las clases que ocuparemos06: Creamos clase pública Puntaje ( mismo nombre que el archivo .as) queusará la clase MovieClip, debido a que la línea de tiempo principal esbásicamente un gran Movie Clip.08: Dentro de la clase pública Puntaje creamos la función pública constructoracon el mismo nombre. Esta función constructora almacena todos los datosnecesarios para que el juego sea funcional.11 al 14: Creamos un grupo de propiedades del tipo _acertar para cadabandera. Recordemos que en el archivo txtBandera.as, ya habíamos creadola variable _acertar, la que ahora será usada para cada bandera.16 al 19: A los textos, le agregamos detectores de eventos del tipoMouseEvent.MOUSE_UP y definimos el nombre de la función “resultado” querecibirá los datos enviados por ellos.22: Creamos la función privada “resultado” y declaramos la variable “e” quealmacena los datos del tipo MouseEvent enviados por el detector. Cerramoscon void para que no retorne valores25:La función a ejecutarse corresponde a la formula mc1_mc.hitTestObject(mc2_mc) la que retornará valores true o false. Si mc1_mc toca amc2_mc, el método retorna true; si no es así retorna false .Esta fórmulala colocaremos dentro de una declaración if, de modo que si el movieclip1toca al movieclip2, algo debe pasar. De manera que en lugar de mc1_mc colocamos el actual Movie Clip quegatilla al detector de eventos ( txtChile_mc, etc), y la manera de hacerlo esusando la propiedad currentTarget.Reemplazamos los elementos correspondientes y tenemos:currentTarget.hitTestObject (e. currentTarget._acertar) en donde: currentTarget corresponde a txtChile_mc que es el Movie Clip que se arrastrará y soltará. Propiedad hitTestObject prueba si un objeto a colisionado con otro. Cuando este Movie Clip esté tocando a Chile_mc (e. currentTarget._acertar), el detector se activará.26: Si el retorno es true, ejecute el trace ” Aquí está el resultado...”

PO

O:

Co

lisi

on

es

CREANDO UN JUEGO DE COINCIDENCIAS: respondiendo a las colisiones.

Lo que pretendemos en este capítulo, es hacer mas ineractivo nuestro juego,por lo que estudiaremos como aplicar la desaparición de un objeto cuandocolisione con otro. Para esto en la declaración if de nuestro arhivo Puntaje.as.Para lograr lo pretendido reemplazamos la función trace por el métodoremoveChild, y que su función es eliminar ciertos objetos definidos por nosotrosen nuestro ejercicio, queremos que desaparezcan txtChile_mc y Chile_mc porlo que nuestro código sería:

if (e.currentTarget.hitTestObject(e.currentTarget._acertar)) { removeChild (e.currentTarget); removeChild (e.currentTarget._acertar); }

Este pareciera el código correcto, sin embargo al correr la película,nos encontramos con el siguiente error:

1118: Conversión implícita de un valor con tipo estático Object a un tipoflash.display:DisplayObject posiblemente no relacionado.

El objeto removeChild es el DisplayObject y e.currentTarget es la instanciade la clase Object .La razón del error es que flash está esperando cierto tipode objeto pero obtiene otro, por lo que debemos definir más claramente eltipo de objeto que deseamos eliminar. Lo que haremos será convertir lainstancia en un Movie Clip:

if (e.currentTarget.hitTestObject(e.currentTarget._hitTarget)) { removeChild (MovieClip (e.currentTarget)); removeChild (e.currentTarget._hitTarget);

Ahora si probamos la película veremos que corre OK.Con un pequeño cambio en el tipo de easing usado, con el fin de mover elfondo, cada vez que pinchemos en el escenario:

0102030405

0102030405

PO

O:

Res

pu

esta

s a

coli

sio

nes

import fl.transitions.Tween;import fl.transitions.easing.*;

stage.addEventListener(MouseEvent.MOUSE_DOWN,animacion); //stage puede reemplazarse por Chile_mcfunction animacion(e:MouseEvent):void { new Tween (mapa_mc, "x", Regular.easeOut, stage.x,mouseX,1,true); new Tween (mapa_mc, "y", Regular.easeOut, stage.y,mouseY,1,true); }

CREANDO UN JUEGO DE COINCIDENCIAS: pantalla de felicitaciones.

En este capítulo, crearemos una pantalla que aparezca cada vez que hemoscompletado las 4 banderas, para felicitarnos por completar el juego. Lo primeroserá crear un 3er layer en nuestro archivo 04_Banderas.fla en el cual dibujamosun rectángulo y enseguida con F8 lo convertimos en movieclip. Al hacerlo nosaseguramos de configurar su exportación para ActionScript:

Echo esto, con Crtl + E , entramos al movieclip recién creadoy comenzamos su edición, para que finalmente luzca asi:

01020304050607080910

PO

O:

Pan

tall

a d

e fe

lici

taci

on

es

Despés de esto, volvemos a nuestro escenario principal y borramos el layer

recién creado que contiene la pantalla de felicitaciones, de modo que solo

dispongamos de ella a través del movieclip guardado en biblioteca. Vamos

ahora a nuestro archivo Puntaje.as al que agregaremos las siguientes lineas

de código:

PO

O:

Pan

tall

a d

e fe

lici

taci

on

es

01020304050607080910111213141516171819202122232425262728293031323334353637383940P

OO

: P

anta

lla

de

feli

cita

cio

nes

Comentarios:

09: Declaramos la variable pública “miPuntaje” de tipo numérica y la seteamospor defecto en su valor mínimo 0.30: Incrementamos el valor de “miPuntaje” en 1 cada vez que los removeChild de arriba se ejecuten.31: Hacemos la comparación de elementos eliminados en el escenario, ycuando sea igual a 4 se ejecuta la función dentro de los paréntesis { }32: Declaramos la variable “ganador” del tipo “Ganar”33-34: Centramos el Movie Clip en el escenario.35: Atachamos el Movie Clip de felicitaciones (el que resolvimos al comienzo)al escenario.

Al probar la película vemos que al finalizar el juego, se abre la pantalla defelicitaciones. OK.

De no haber coincidencia haremos que los textos vuelvan a su posiciónoriginal. Para esto , en la función privada “resultado” de nuestro clase

Puntaje.as, debemos agregar una declaración else

private function resultado(e:MouseEvent):void { if (e.currentTarget.hitTestObject(e.currentTarget._acertar)) { removeChild (e.currentTarget._acertar); miPuntaje++; var ganador:Ganar = new Ganar(); ganador.x = stage.stageWidth /2;= stage.stageHeight /2; addChild (ganador); } else { // función a ejecutar: que los textos regresen a su posiciónde origen si no coinciden con la bandera correspondiente. }

0102030405060708091011121314151617

PO

O:

Pan

tall

a d

e fe

lici

taci

on

es

Comentarios:

12: Si if retorna false, entonces ejecute la función dentro de else. Sin embargo,debemos tener a mano un par de variables que ayuden a ejecutar estasentencia else, por lo que debemos ir a la clase txtBandera.as y declararlas:

package { import.flash.display.MovieClip; import.flash.events.MouseEvent;

public class txtBandera extends MovieClip { public var _acertar:MovieClip; // Declaramos las variables públicas inicioX e inicioY las queserán usadas por la clase Puntaje.as public var _inicioX:Number; // y que almacenan los valores inicialesde las coordenadas x,y public var _inicioY:Number;

public function txtBandera ( ): void { this.addeventListener( MouseEvent.MOUSE_DOWN, arrastrarlo); this.addeventListener( MouseEvent.MOUSE_UP, soltarlo);

} private function arrastrarlo (e: MousEvent) : void { this.startDrag ( ); private function soltarlo(e: MousEvent ) : void { this.stopDrag ( ); } }

Otro aspecto a considerar es que estas variables recién declaradas, tambiénse necesitan en la función pública Puntaje.

El código luce asi:

01020304050607080910111213141516171819202122232425262728

PO

O:

Pan

tall

a d

e fe

lici

taci

on

es

package{import flash.display.MovieClip;import flash.events.MouseEvent;import Ganar;public class Puntaje extends MovieClip private var miPuntaje = 0; public function Puntaje():void { txtChile_mc._inicioX = txtChile_mc.x; txtChile_mc._inicioY = txtChile_mc.y; txtEcuador_mc._acertar = Ecuador_mc; txtEcuador_mc._inicioX = txtEcuador_mc.x; txtEcuador_mc._inicioY = txtEcuador_mc.y; txtEmiratos_mc._acertar = Emiratos_mc; txtEmiratos_mc._inicioX = txtEmiratos_mc.x; txtEmiratos_mc._inicioY = txtEmiratos_mc.y; txtIndia_mc._acertar = India_mc; txtIndia_mc._inicioX = txtIndia_mc.x; txtIndia_mc._inicioY = txtIndia_mc.y; txtChile_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtEcuador_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtEmiratos_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtIndia_mc.addEventListener(MouseEvent.MOUSE_UP, resultado);

} private function resultado(e:MouseEvent):void { if (e.currentTarget.hitTestObject(e.currentTarget._acertar)) { removeChild (e.currentTarget._acertar);

miPuntaje++;if (miPuntaje == 4){ var ganador:Ganar = new Ganar(); ganador.x = stage.stageWidth/2; ganador.y = stage.stageHeight/2; addChild(ganador);}

}

01020304050607080910111213141516171819202122232425262728293031323334353637383940414243P

OO

: P

anta

lla

de

feli

cita

cio

nes

else {

e.currentTarget.x = e.currentTarget._inicioX; e.currentTarget.y = e.currentTarget._inicioY;

} } }}

Comentarios:

Cuando el archivo se carga por 1ra vez, lo hace con los valores almacenadosen las variables numéricas declaradas en la clase txtBandera.as (_inicioX,_inicioY). Por eso, si las coordenadas (x, y) del texto al comenzar la cargafueran (5, 8), estos serán los valores a los que volverá si no hay coincidenciacon las banderas. De modo que:

19-20: Al correr el programa, los valores almacenados en las propiedadesinicioX e inicioY de txtChile_mc (etc) se igualan (o cargan) con el valorregistrado en las coordenadas x e y actual.46-47: Si if retorna false se hace uso de este valor almacenado, y el textovuelve a sus coordenadas originales.

CREANDO UN JUEGO DE COINCIDENCIAS: agregando sonido.

Finalmente agreguemos un sonido externo, el cual debe estar en la mismacarpeta que el resto de los archivos:

package

{import flash.display.MovieClip;import flash.events.MouseEvent;import Ganar;import flash.media.Sound;import flash.net.URLRequest;

public class Puntaje extends MovieClip private var miPuntaje = 0;

4445464748495051

0102030405060708091011P

OO

: A

reg

and

o s

on

ido

private var miSonido:Sound;

public function Puntaje():void { txtChile_mc._inicioX = txtChile_mc.x; txtChile_mc._inicioY = txtChile_mc.y; txtEcuador_mc._acertar = Ecuador_mc; txtEcuador_mc._inicioX = txtEcuador_mc.x; txtEcuador_mc._inicioY = txtEcuador_mc.y; txtEmiratos_mc._acertar = Emiratos_mc; txtEmiratos_mc._inicioX = txtEmiratos_mc.x; txtEmiratos_mc._inicioY = txtEmiratos_mc.y; txtIndia_mc._acertar = India_mc; txtIndia_mc._inicioX = txtIndia_mc.x; txtIndia_mc._inicioY = txtIndia_mc.y; txtChile_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtEcuador_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtEmiratos_mc.addEventListener(MouseEvent.MOUSE_UP, resultado); txtIndia_mc.addEventListener(MouseEvent.MOUSE_UP, resultado);

var solicitarSonido:URLRequest = new URLRequest (”blip.mp3”); miSonido = new Sound ( ); miSonido.load (solicitarSonido); private function resultado(e:MouseEvent):void { if (e.currentTarget.hitTestObject(e.currentTarget._acertar)) { removeChild (e.currentTarget._acertar);

miPuntaje++; miSonido.play ( );

if (miPuntaje == 4){ var ganador:Ganar = new Ganar(); ganador.x = stage.stageWidth/2; ganador.y = stage.stageHeight/2; addChild(ganador);}

} else {

e.currentTarget.x = e.currentTarget._inicioX; e.currentTarget.y = e.currentTarget._inicioY;

}

11121314151617181920212223242526272829303132333435363738394041424344454647484950515253P

OO

: A

reg

and

o s

on

ido

} }}

Comentarios:

07-08: Ubicaciones de carpetas donde se encuentarn las clases queocuparemos.31: Para que el sonido se manifieste, declaramos la variable “solicitarSonido”y almacenamos un objeto de sonido dentro de ella.Dentro de la función constructora, que es la que ejecuta las acciones, creamosel objeto de sonido:Para ocupar un archivo externo, debemos crear una instancia para la claseURLRequest. Esta clase es usada cada vez que debamos acceder a una URLexterna o archivo externo La manera de hacerlo es declarando la variable“solicitarSonido” del tipo URLRequest y creamos una nueva instancia u objetola que va dentro de los paréntesis.32: Creamos el objeto de sonido propiamente tal. En la línea 11 ya hemosalmacenado el sonido en la variable “miSonido”; ahora la seteamos para crearuna nueva instancia u objeto de sonido.33: En la variable recién seteada, ocupamos el método load, y dentro de losparéntesis, invocamos el objeto solicitado.40: Después de haber incrementado el valor del puntaje en 1, ubicamos lareproducción del sonido.

5455565758

PO

O:

Ag

reg

and

o s

on

ido

Gu

ía p

ráct

ica

Preparado por Fco. Rocco

Desarrollo de un juego de comparacionescon AS3 y paquetes