Uneweb Instituto: Cómo crear juegos interactivos con Flash

Juegos Interactivos

En este tema veremos los elementos básicos que necesitaras a la hora de crear juegos con Flash: el movimiento, los choques, la rotación, creación aleatoria de elementos, etc.

A medida que avancemos en el tema iremos haciendo referencia a este juego que hemos creado como ejemplo. Pero, primero empezaremos por lo básico.

Manejando elementos

Cuando trabajemos con objetos necesitaremos acceder a algunas características básicas, como por ejemplo su anchura y altura o su posición en el Escenario.

Podemos modificar el tamaño del objeto utilizando las propiedades width, height, scaleX e scaleY.

Las dos primeras (width y height) modificarán o devolverán la anchura y altura, respectivamente, en píxeles del objeto referenciado, por tanto, podemos cambiar el tamaño de un clip escribiendo lo siguiente:

1 2	`miClip.width` `=` `100;` `miClip.height` `=` `200`

Las propiedades scaleX e scaleY cambian el tamaño, pero de forma porcentual, donde 1.0 equivale al 100%. Podemos utilizar estas propiedades para hacer un clip el doble de grande que era, por ejemplo:

1 2	`miClip.scaleX` `=` `2;` `miClip.scaleY` `=` `2;`

Hará que su visualización sea del doble (200%).

También podemos averiguar o modificar la posición de un objeto, basta con trabajar con sus propiedades x e y:

1

2

3

4

5

miClip.x = 50;

miClip.y = 150;

var posicionDeClipHorizontal:Number = miClip.x;

var posicionDeClipVertical:Number = miClip.y;

Recuerda que estas propiedades trabajan con píxeles.

De esta forma podemos mover el objeto de una forma muy fácil, por ejemplo para hacer que se desplace hacia la derecha del Escenario deberás escribir:

1	`miClip.x` `= miClip.x` `+` `1;`

Utilizando estas propiedades y combinándola con las características de los Movieclips podemos recrear de forma más natural el movimiento.

Veamos este ejemplo:

Aquí hemos creado un clip de película con tres posiciones, parado, izquierda y derecha:

Así, podemos llamar mediante la instrucción gotoAndStop() a uno de los fotogramas del clip para que se muestre dicha posición y dé más realismo al movimiento.

El código que hemos incluido en la película es el siguiente:

var izquierda:Boolean = false;

var derecha:Boolean = false;

miClip.gotoAndStop("parado");

miClip.x = 10;

miClip.addEventListener(MouseEvent.CLICK,iniciarMovimiento);

function iniciarMovimiento(event:MouseEvent):void{

    if (miClip.x <= 10) {

        miClip.gotoAndStop("derecha");

        derecha = true;

    }

    if (miClip.x >= 495) {

        miClip.gotoAndStop("izquierda");

        izquierda = true;

    }

}

miClip.addEventListener(Event.ENTER_FRAME,desplazar)

function desplazar(event):void{

  if (derecha) {

    if (miClip.x < 495) {

      miClip.x = miClip.x + 6;

    } else {

     miClip.gotoAndStop("parado");

     derecha = false;

    }

  }

  if (izquierda) {

    if (miClip.x > 10) {

      miClip.x = miClip.x - 6;

    } else {

      miClip.gotoAndStop("parado");

      izquierda = false;

    }

  }

}

Observa cómo hemos utilizado aquí el evento ENTER_FRAME. Nos valemos de ella para crear el movimiento, de esta forma hacemos que la coordenada x del objeto se incremente cada vez que entre en el fotograma de nuevo. Veremos esta función con más detalle a lo largo del tema.

Nota: Recuerda que el evento ENTER_FRAME se produce de forma continua y constante, normalmente varias veces por segundo.

Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el objeto debe desplazarse. En el evento ENTER_FRAME chequeamos estas variables y si están a truecomenzamos el movimiento hasta la posición que queramos.

A medida que vayamos avanzando en el tema veremos más funciones y métodos que nos permitirán acciones más versátiles y ajustadas a nuestras necesidades.

Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la propiedad rotation.

Esta propiedad actúa sobre el objeto rotándolo tantos grados como especifiques respecto a su posición original. Por ejemplo:

1	`miClip.rotation` `=` `90;`

Esta línea hará que el objeto rote 90 grados en el sentido de las agujas del reloj. Para rotar un objeto hacia el lado contrario basta con añadirle un signo menos (-) antes del ángulo:

1	`miClip.rotation` `= -90;`

Para devolver al objeto a su posición original sólo tendrás que escribir la siguiente línea:

1	`miClip.rotation` `=` `0;`

Así la rotación que actúa sobre el objeto es nula y se muestra en su posición original.

Recuerda que para que las rotaciones parezcan reales deberás posicionar el objeto dentro del clip en el centro absoluto, para que así la referencia del clip se encuentre en la posición adecuada.

Observa la diferencia entre estos dos clips: