AS3 en acción : www.playa12.com

Les quería contar que en la web jugar un 12 (playa12.com) van a poder encontrar aplicadas muchas de las cuestiones que traté de explicar en las distintas entradas del blog. Un saludo desde acá y si los puedo ayudar en algo, pregunten. Trataré de hacerme tiempo para contestar. Saludos para todos.

Capítulo 10) Volvimos....(el semáforo se puso en verde)

Bueno, acá les dejo un componente llamado Semaforo. Lo necesitaba para un desarrollo que estoy haciendo y me pareció que les podría llegar a interesarles.

Lo pueden ver aquí como siempre con los fuentes.

De paso, le quería mostrar un ejemplo de uso de enumerados que es algo que en lo que Flex no se muestra muy amigable, pero con este ejemplo se les puede simplificar la tarea de transplantarlo a sus necesidades. Todo esto lo van a encontrar en la clase public final class LuzEncendida

¿Qué más?

Una clase LuzDeSemaforo.as: les permitirá aprender a hacer un uso muy simple de la propiedad graphics en este caso de un Box. BeginFill, DrawCircle y EndFill son usados para que se dibujen los circulos de colores y con el Alpha, cambiaremos la intensidad de la luz. Todo eso en la función pintar().
Las propiedades agregadas al Box del cual hereda son brillante (Boolean), colorDeLuz (int) y radio(int). Muy simple, pero que reune varias de las funcionlides básicas a la hora de pintar "a mano".

Un componente Semaforo.mxml: hereda de un Canvas (apropiado para aprender a usar la property autolayout en false. Embebe una imagen en tonos de grises con forma de semáforo (si no saben embeber imágenes, les puede ser util) y, como es obvio, las 3 luces (una LuzDeSemaforo por cada color). Si se preguntan como coloque las x e y de las mismas para que coincidan: prueba y error. Lo mismo con el radio. En el codigo declarado en la seccion Script (SemaforoCode.as), aparecerá la property luzActiva (que es un String pero que la vamos a usar restringida al enumerado) y la funcion apagarLuces() (tan simple como necesaria).

Una aplicación Main.mxml: para ver todo lo anterior, de paso para los que no tienen los TabBar muy presentes, pueden ver como se usa. Fijensé que los labels del TabBar salen del Array colores definido con el mismo enumerado que tienen las luces. Al TabBar, de paso, lo usamos para manejar las luces de Semaforo que obviamente incluimos. Pueden ver que la escala en x y en y está duplicada ( scaleX="2" scaleY="2" ), esto lo puse porque me ayudó a elegir los x e y de las luces, pero ya que estaba lo dejé por si no jugaron con esto todavía.

Cuando lo tenga incluido en el juego, les muestro el semaforo en funcionamiento real.

Bueno, será hasta la próxima, espero sus comentarios.

Hasta Siempre.

Respuesta a Comentario sobre cómo ganar más dinero desarrollando juegos en Flash

Ruber Eaglenest ha escrito elogiosos comentarios que quería agradecer. Además de ello, un par de preguntas que respondo a continuación:

Yo quiero aprender Flash, pero a la vez que me sirva de forma profesional,

Trabajar con herramientas OpenSource no significa que no sea profesional. Eso lo va a determinar tu forma de trabajar y no la herramienta que uses. Sin embargo, con herramientas "profesionales" puedes ahorrate algunos dolores de cabaza (no muchos).

¿Encuentras que realizar juegos flash en plan montaje de películas es más tedioso que de forma OO como en Flex?

En mi caso particular, no tengo ni idea de cómo se programa en plan de montaje de películas. Por ello, esta pregunta se la tiene que hacer cada uno. Igualmente, desde el punto de vista filosófico ( y creo que si Adobe apunta al cambio de paradigma de programación es por algo), el software OO, seguramente va a ser más utilizable y mantenible.

¿Alguna recomendación sobre qué servirá más de cara a ganar dinero?

Con que sepas que aunque el software que desarrolles sea muuuuy utilizable y mantenible, no te va a asegurar que entre más dinero, sino que lo "podrías" llegar a ahorrar a largo plazo (en forma de tiempo).

Si el software parte de una buena idea y el resultado final es el adecuado, y lográs alcanzar la difusión del mismo, lograrás ganar más dinero.

(Gracias por hacerme reencontrar con el blog al que le he dedicado varias horas, pero que lamentablemente me está costando hacerlo ultimamente, sin embargo, les cuento que estoy haciendo algunos experimentos que trataré de publicar apenas pueda).

10) Entradas 2da Parte (Teclado - Clase KeyManager) ...

Ya hemos definido a nuestra clase, ahora llevaremos a cabo su implementación, en este caso, es muy simple seguir el código, así que ahí va directamente:

/**
* ...
* @author Wal
* @version 0.9
* @since 2008-04-02
* @link http://www.tenemos.info
*/
package MisClases {
// importamos el soporte de eventos y de los componentes 
// principales de Flex 
import flash.events.*;
import mx.core.*;
// definimos la clase KeyManager
public class KeyManager extends UIComponent {
 // definimos y publicamos las propiedades que indican 
 // los estados de cada tecla
 public var up: Boolean = false;
 public var down: Boolean = false;
 public var left: Boolean = false;
 public var right: Boolean = false;
 public var space: Boolean = false;
 public var zKey: Boolean = false;
 public var xKey: Boolean = false;
 public var cKey: Boolean = false;
 // en el constructor, nos "colgamos" de los eventos 
 // KEY_UP y KEY_DOWN del
 // contenedor recibido como parámetro (aParent) 
 // asociándolos a las funciones
 // de la clase keyDown y keyUp respectivamente
 public function KeyManager(aParent:UIComponent) {
  aParent.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
  aParent.addEventListener(KeyboardEvent.KEY_UP, keyUp);
 }
 // definimos los casos del evento KEY_DOWN del contenedor
 private function keyDown(event:KeyboardEvent):void {
  switch (event.keyCode) {
   case 37 :
    left = true;
    break;
   case 38 :
    up = true;
    break;
   case 39 :
    right = true;
    break;
   case 40 :
    down = true;
    break;
   case 32 :
    space = true;
    break;
   case 90 :
    zKey = true;
    break;
   case 88 :
    xKey = true;
    break;
   case 67 :
    cKey = true;
  }
 }
 // definimos los casos del evento KEY_UP del contenedor
 private function keyUp(event:KeyboardEvent):void {
  switch (event.keyCode) {
   case 37 :
    left = false;
    break;
   case 38 :
    up = false;
    break;
   case 39 :
    right = false;
    break;
   case 40 :
    down = false;
    break;
   case 32 :
    space = false;
    break;
   case 90 :
    zKey = false;
    break;
   case 88 :
    xKey = false;
    break;
   case 67 :
    cKey = false;  
  }
 }
}
}
/** Fin de la clase KeyManager **/

Luego veremos cómo utilizar esta clase en un programa de prueba. Sin embargo, ya pueden ir observando las posibilidades y limitaciones que tiene esta clase. Supongamos que queremos utilizarla en un juego donde tenemos un actor que se va desplazando por la pantalla. En este caso, no tendremos ningún inconveniente en utilizarla, hasta podremos tomar distintas decisiones si hay más de una tecla pulsada (por ejemplo, girar en diagonal). Sin embargo, seguramente aplicar esta clase a un juego tipo Simon (seguir las 4 luces de colores en una secuencia), no sería lo más apropiado. En éste último caso, conviene hacer uso de los eventos (podría ser KEY_UP o KEY_DOWN indistintamente en forma directa.

9) Entradas 2da Parte (Teclado - Definiciones) ...

Vamos a empezar creando una nueva clase en FlashDevelop. Para ello, luego de crear un nuevo proyecto del tipo Flex3 que llamaremos EventosDelTeclado. Si tenemos abiertos archivos de otros proyectos, conviene que hagamos File-Close All para limpiar el escritorio.
Ahora vamos a agregarle una carpeta. Para ello, en la vista del proyeto (View-Project), hacemos botón derecho del mouse sobre la carpeta src, luego Add-New Folder ... y escribimos MisClases (este será el nombre de nuestro package de clases).
Ahora agregamos una clase haciendo botón derecho sobre misClases Add-New Class ... y elegimos KeyManager.as. Verás que ya quedó armado el esqueleto de tu nueva clase. Para los que saben java, verán que todo se ve bastante similar.
Listo, ya tenemos nuestra clase lista para incluirle todo el código.
Pero... todavía no definimos qué queremos hacer con los objetos de nuestra clase, por eso definiremos los objetivos:
Necesitamos un objeto al que pueda interrogar en cualquier momento y me diga en que estado están ciertas teclas que consideramos importantes de acuerdo al siguiente detalle:

• Cada tecla será una propiedad del objeto que definiremos como verdadera si está presionada y falsa si no lo está (tipo Boolean con default false).
• Los eventos del teclado serán para un contenedor determinado (que lo podemos llamar Parent), que podrá ser cualquier UIComponent.
• Como lo que nos interesa por ahora es hacer juegos, lo que queremos es tener disponible el estado de las siguientes teclas: Arriba - Abajo - Derecha - Izquierda - Espacio - Z - X - C (estas tres últimas sin importar si son mayúsculas o minúsculas).

Bueno, ya tenemos definida nuestra clase. Luego seguiremos con la implementación.

8) Entradas 1ra Parte (Mouse) ...

Vamos a ver entonces, a modo de ejemplo los eventos del mouse que presentamos a continuación:

• mouseDown
• mouseUp
• mouseOver
• mouseOut
  
• mouseMove
• click
• doubleClick

Para ver el ejemplo, deberás hacer click aquí.

Para ello, creamos dentro de una ventana que nos permite incluir el título (titleWindow) en la barra superior. Dentro de la ventana, construimos un VBox (vertical Box) que hace que todo lo que se incluya se ordene verticalmente.

El Box rojo permite mostrar cómo se detectan en él los eventos mouseDown y mouseUp.

El Box azul permite mostrar cómo se detectan en él los eventos mouseOver y mouseOut.

El Box fucsia permite mostrar cómo se detecta en él el evento mouseMove, y de paso lo aprovechamos para usar las propiedades localX y localY que tiene el evento para indicar la posición del cursor dentro del Box.

El Box amarillo permite mostrar cómo se detecta en él un simple click.

El Box verde claro permite mostrar cómo se detecta en él un doubleClick.

En estos últimos 2 casos, Incluimos el archivo con código as3 que nos va a permitir importar el código para usar la función show del objeto Alert (objeto que se instancia una sola vez en forma automática, vendría a ser como global para todo el programa).

Para que se compile el archivo MainCode.as y usarlo desde Main.mxml, se agregó la siguiente línea de código:

<mx:Script source="MainCode.as"/>

El contenido de MainCode.as en este caso, simplemente es:

// importamos librerías necesarias
import mx.controls.Alert;

Esto es todo respecto del mouse, imprescindible para muchos tipos de juegos, aunque si lo tuyo son los arcades tradicionales, en la próxima entrega sabrás algo más sobre los eventos del teclado y las clases en as3.

7) Hay que organizarse...

Bueno, llegó el momento de empezar a programar nuestros juegos.

Pero... no nos apresuremos. Cuanto más organizados empecemos, mejor será el resultado (y más rápido).

A mi me gusta ver al software como un sistema con sus Entradas que Procesamos y convertimos en Salidas.

En las próximas entregas analizaremos las entradas, que podrán utilizarse en los distintos tipos de juegos, a saber:

• De selección por click del Mouse (por ejemplo, de memoria tipo memo-test)
  
• De arrastrar y soltar con el Mouse (por ejemplo, vistiendo al personaje)
• De movimiento del personaje con Teclado (por ejemplo, cualquier arcade)
• De movimiento de la paleta con Teclado (por ejemplo, el viejo pong)

Claro que nuestor juego contará con varios de ellos y nos prepararemos para utilizarlos.