Como hacer un juego con flash. Parte 3

•  Otra de las técnicas que nos será muy útil es la carga y descarga de elementos existentes en la biblioteca. Esto lo haremos con la función addChild.

Recordemos que esta función añade un elemento (hijo) a la lista de visualización de un contenedor (padre). Si omitimos el objeto, lo añadimos a la película general.

Tiene la siguiente sintaxis:

miContenedor.addChild(objeto);

Como ya vimos, esto lo empleabamos para cargar agregar archivos externos. Pero ahora queremos cargar elementos que ya tengamos en la biblioteca. Para poder incluir un clip desde la biblioteca, antes deberemos crear una clase para poder acceder a él desde ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en la Biblioteca. Selecciona Propiedades → (Botón Avanzado). Aquí, marcamos la opción Exportar para SctionScript, y le damos el nombre de la clase en Clase:. Recuerda este nombre, porque es el que utilizaremos para crear los objetos.

Con esto, hemos creado la una clase (en la imagen, la clase miClip). Como no hemos asociado nada de código, esta clase se comportará exacatamente como un MovieClip, ya que es su clase base (caja de texto Clase base). Ahora, para agreagar estos elementos, sólo tenemos que crear un nuevo objeto de la clase, y agregarlo al contenedor:

var miObjetoClip:miClip = new miClip;
miContenedor.addChild(miObjetoClip);

Para eliminar clips insertados mediante addChild puedes utilizar removeChild() o removeChildAt(), que comentamos al hablar de los contenedores.

miContenedor.removeChild(miClip);

Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores de eventos.

Veamos ahora cómo interactuar con el ratón y el Escenario y sus elementos.

Empezaremos viendo una de las funciones más útiles para el ratón: arrastrar y colocar.

Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar objetos por el Escenario, como vimos en el primer ejercicio paso a paso de la unidad 18, en el cual usabamos estas dos propiedades.

La función startDrag permite varios parámetros:

miObjeto.startDrag(bloqueaCentro, rectángulo);

En bloqueaCentro podremnos pasarle un valor booleano (true o false) que indicará si el arrastre se realizará desde el centro del clip(true) o desde el punto donde hizo clic el usuario (false).

El otro parámetro, rectángulo, nos permite definir los límites de la zona donde podemos arrastrar. Esta opción es muy útil cuando queremos que el arrastre sólo se pueda realizar sobre una zona determinada, como por ejemplo las tizas de las barras de desplazamiento, que no se pueden arrastrar fuera de la zona rectangular que delimitan dichas barras.

Una propiedad muy útil que también te será de mucha ayuda es la de dropTarget. Te permitirá averiguar sobre qué objeto se ha soltado el objeto arrastrado:

miObjeto.addEventListener('mouseDown', arrastrar);
function arrastrar(event):void {
 miObjeto.startDrag();
}

miObjeto.addEventListener('moseUp', soltar);
function soltar(event):void {
 miObjeto.stopDrag();
 trace(miObjeto.dropTarget);
}

Este código devolverá al Panel Salida el tipo de objeto (podemos utilizar miObjeto.dropTarget.name si queremos saber el nombre de instancia) sobre el cual se ha soltado. Si no hay ningun objeto, devolverá NULL.

 Realiza el ejercicio paso a paso de Arrastre y Orientación de objetos para practicar conceptos que hemos visto hasta ahora.

 Otra cosa que nos será de gran ayuda es poder localizar la posición del ratón. De este modo podríamos hacer que los objetos se desplacen u orienten hacia el ratón

Para averiguar las coordenadas del ratón sólo tendrás que recurrir a las propiedades mouseX y mouseY:

var coordenadaX:Number = mouseX;
  var coordenadaY:Number = mouseY;
  

Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratón normal por uno de nuestro agrado.

Para ello tenemos que escribir muy pocas líneas:

Mouse.hide(); //Ocultamos el cursor verdadero
addEventListener(Event.ENTER_FRAME,cambiarCursor);
function cambiarCursor(event):void {
 texto.contador_txt.text="("+mouseX+", "+mouseY+")";
 texto.x = mouseX; //Asignamos las coordenadas
 texto.y = mouseY; //Al elemento de texto
 miCursor.x = mouseX; //Y al clip que hará de cursor
 miCursor.y = mouseY;
}

Comenzamos ocultando el cursor verdadero, con el método Mouse.hide();.

En la bliblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como cursor, y texto, otro clip en el que mostramos las coordenadas. Como queremos que ambos onjetos sigan al cursor real, en un evento repetitivo como enterFrame, les asignamos a ambos las coordenadas del ratón.

Podemos volver a visualizar el ratón, por ejemplo, porque cambiamos de fotograma, con el código:

Mouse.show();

Podemos añadir a nuestras películas interacción con las teclas pulsadas, el procedimiento es muy sencillo, basta con detectar los eventos que se producen al pulsar las teclas y saber qué tecla lo ha originado.

Cuando recogemos un evento de teclado, disponemos del método .keyCode, que nos indica la tecla que se ha pulsado. Dependiendo de la que sea, haremos una cosa u otra. Por ejemplo:

addEventListener(KeyboardEvent.KEY_DOWN,direccion);
 function direccion(tecla:KeyboardEvent):void{
  //Es importante especificar que es un vento del tipo KeyboardEvent
  //para poder emplear el método .keyCode.
  switch (tecla.keyCode){
    case Keyboard.RIGHT:
      //mover hacia la derecha
    break;
    case Keyboard.LEFT:
      //mover hacia la izquierda
    break;
  }
} 

Los códigos de las teclas son bastante sencillos, las flechas UP, DOWN, RIGHT y LEFT; la barra espaciadora SPACE; y las teclas especiales SHIFT, CONTROL, TAB, CAPSLOCK, ESCAPE, ENTER, BACKSPACE, INSERT, DELETEKEY, HOME, END, PGDN y PGUP. Siempre precedido por Keyboard.

Los eventos de teclado que podemos emplear son:

• KeyboardEvent.KEY_DOWN ("keyDown") - Cuando se pulsa una tecla.
• KeyboardEvent.KEY_UP ("keyDown") - Cuando se suelta.

Recordemos el ejemplo que vimos al principio del tema. Esta vez, lo vamos a cambiar para mover el objeto con las teclas en vez de con el ratón:

Nota: Si no responde al teclado, haz clic primero para que tome el foco.

El codigo que hemos incluido es el siguiente:

var izquierda:Boolean=false;
var derecha:Boolean=false;
miClip.gotoAndStop("parado");

//Detectamos el evento al pulsar tecla, y marcamos
//La dirección del movimiento
addEventListener(KeyboardEvent.KEY_DOWN,direccion);
function direccion(tecla:KeyboardEvent):void {
 switch (tecla.keyCode) { //Dependiendo de la tecla, indicamos
  case Keyboard.RIGHT :  //una dirección u otra
   derecha=true;
   break;
  case Keyboard.LEFT :
   izquierda=true;
   break;
 }
}

//En el evento onEnterFrame, comprobamos si están activas
//Las variables que indican la direción del movimeinto
miClip.addEventListener(Event.ENTER_FRAME, movimiento);
function movimiento(event):void {
 if (derecha) {
  miClip.gotoAndStop("derecha");
  if (miClip.x<490) {
   miClip.x=miClip.x+7;
  }
 } else if (izquierda) {
  miClip.gotoAndStop("izquierda");
  if (miClip.x>7) {
   miClip.x=miClip.x-7;
  }

 }
}
//Detectamos cuándo se suelta la tecla
addEventListener(KeyboardEvent.KEY_UP, parar);
function parar(event):void {
 derecha=false; //Y paramos el movimiento
 izquierda=false;
 miClip.gotoAndStop("parado");
}

Una de las cosas que más nos interesará realizar es el choque entre elementos en el Escenario, y ya no el choque físico en sí, sino la coincidencia de dos elementos en un mismo espacio.

Esto lo podremos evaluar y tratar con los métodos hitTestPoint(x, y) para detectar si una coordenada cae dentro del objeto, yhitTestObject(object) que nos indica si dos objetos se solapan (chocan).

Su uso tiene dos posibilidades, ambas muy sencillas. Puedes evaluar si en un punto en concreto se encuentra un objeto específico (muy útil para detectar los clics del ratón o donde se encuentra en cada momento):

miClip.addEventListener(MouseEvent.MOUSE_UP,miFuncion); 
 function miFuncion(event:MouseEvent):void{
    if (miClip.hitTestPoint(mouseX,mouseY) {
       //coincidencia
    }
 }

Este código evalúa la posición del ratón a cada clic, si las coordenadas introducidas en el método hitTestPoint coinciden con el área demiClip se produce colisión.

hitTestPoint admite un tercer parámetro booleano. Éste inidca si la colisión se calcula con respecto a al forma del elemento (true) a al rectángulo delimitador del objeto (false). La opción por defecto es esta última.

Cuando queremos evaluar si un objeto "choca" con otro, empleamos el método hitTestObject:

miClip.hitTestObject(miOtroClip);

En ambos casos, el valor devuelto es true, si hay colision, o false si no.

 En desplazamientos utilizaremos mucho esta opción para averiguar si el objeto que estamos moviendo choca con una pared u otro objeto.

Ten en cuenta que la posición que deberemos evaluar si hace colisión con la pared debe ser aquella que adoptaría el objeto después de desplazarse. Si lo desplazamos antes los objetos pueden quedar solapados, y eso, dependiendo del caso, puede no ser adecuado para nuestro diseño.

Esto complica un poco las cosas, pues deberemos calcular primero dónde estarán las corrdenadas del objeto tras moverlo y calcular la colisión antes de moverlo.

miPared.hitTestPoint(coorXfinal_Clip, coorYfinal_Clip);

Pero, ¿cómo conocemos las coordenadas de una forma?, ¿cómo averiguo el punto máximo que alcanza en la esquina abajo derecha?. Como siempre, Flash nos soluciona esto incorporando un método a los onjetos de visualización que nos devuleve sus medidas. El métodogetBounds.

Haz clic y utiliza las flechas para moverte.

Su sintaxis es la siguiente:

miClip.getBounds(objetoReferencia);

En objetoReferencia indicaremos el objeto cuyo sistema de coordenadas utilizaremos como punto de referencia. Normalmente escribiremos stage, para que las coordenadas dadas sean respecto a la película en general y no sobre un clip en particular.

El método nos devuleve un objeto Rectangule. Este tipo de objeto define un área rectangular, y nos permite conocer la posición de sus cuatro lados con las siguientes propiedades:

• .top : lado superior (sería lo mismo que y).
• .bottom : lado inferior (sería y + altura del objeto).
• .lef : lado izquierdo (sería lo mosmo que x).
• .right: lado derecho (sería x más el ancho).

• miClip.getBounds(stage).left;
  miClip.getBounds(stage).right;
  miClip.getBounds(stage).top;
  miClip.getBounds(stage).bottom;