Desarrollo de Juegos Flash usando herramientas Open Source

2008-12-19T10:56:00.001-08:00

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

2008-09-04T04:39:00.000-07:00

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) ...

2008-04-09T04:18:00.001-07:00

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) ...

2008-03-29T03:26:00.000-07:00

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) ...

2008-03-16T02:56:00.000-07:00

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...

2008-03-12T01:58:00.000-07:00

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.

6) ¿Qué es Flex?

2008-03-10T16:21:00.001-07:00

Vamos a poner un par de links que nos permitan saber algo más sobre Flex en español:

Imprescindible:

¿Qué es Flex?

Complementario:

Flex Básico

Por otra parte, nos queda pendiente el tema de cómo solucionar los dolores de cabeza que nos provocan lo acentos la ñ y demás delicias de nuestro idioma.

Muy simple:

Desde FlashDevelop, editando el archivo mxml correspondiente, hacemos File - Encoding - UTF-8 y ello permitirá el soporte a caracteres extendidos.

Si hacemos ello, podremos usar ahora ¡Hola Mundo! en nuestro ejemplo en lugar de usar -Hola Mundo!. Pueden probar también con acentos y va a ver que si el encoding está en 8 bits el programa no va a compilar.

En la próximo nos vamos a organizar para desarrollar el juego.

5) Hola Mundo ...

2008-03-07T03:16:00.000-08:00

Llegó la hora. Vamos a crear nuestro primer programa en Flex3, que no podía llamarse de otra forma que Hola Mundo.
Para eso vamos a hacer lo siguiente:

Iniciamos FlashDevelop
Hacemos Project, New Project
Ahora marcamos dentro de la lista de Action Script 3, Flex 3 Project
En Name escribimos HolaMundo
En location, con Browse elejimos una carpeta adecuada para nuestros proyectos. Por ejemplo, podemos hacer una carpeta nueva debajo de C:\Flex3 que se llame Proyectos con lo que nuestra entrada location quedará: C:\Flex3\Proyectos
Marcamos ahora el tilde en Create directory for project
Pulsamos OK
A la derecha veremos la ventana denominada Project Manager (si no se ve, podemos ir al menú y elegimos dicha opción).
Ahí nos aparecen 2 carpetas: bin y src. Debajo de src (a modo de rama dentro del árbol) tenemos Main.mxml (ya se hablará de mxml y xml brevemente más adelante) que es archivo en el cual vamos a escribir nuestro código, que de entrada se verá así:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>

Bueno, vamos a darle un poco de vida a nuestra primer aplicación en Flex agregando entre las marcas mx:Application nuestro código que será simplemente:

<mx:Label text="Hola Mundo!" />

Antes de seguir adelante, vamos a asegurarnos de no estar en modo debug. Para ello, si en la lista de selección que aparece en la barra de herramientas superior (bien a la derecha), si leemos Debug, cambiemos la opción por Release.
Ahora compilamos el programa pulsando F8
Si todo funcionó adecuadamente, el archivo HolaMundo.swf se habrá creado en la carpeta bin que aparece en el Project Manager
Para probar nuestro primer programa abrimos un explorador de windows en C:\Flex3\Proyectos\HolaMundo\bin y con botón derecho sobre HolaMundo.swf hacemos abrir con y elegimos nuestro Browser preferido (Internet Explorer, Firefox, etc.). Si nos aparece algún cartel de seguridad, deberán permitir ver la página.

¡Felicitaciones!, ya logramos nuestro primer programa. Un escalón pequeño, pero ABSOLUTAMENTE NECESARIO.Puedes ver el programa compilado y descargar el código fuente haciendo click aquí.
En nuestra próxima etapa veremos un poco los problemas que trae aparejado nuestro querido idioma Español y cómo solucionarlos.

4) Instalando el entorno (2da. Parte : FlashDevelop) ...

2008-03-06T09:34:00.001-08:00

FlashDevelop se puede descargar desde aquí.
Su instalación es simple, pero cuidado existe un bug que hace que no pueda instalarse de cualquier modo. Cuando llegues a la siguiente ventana, marca la opción Standalone Mode. Si la dejas sin marcar, nada va a funcionar. Salvando eso y que es Windows dependiente, el resto, son todas buenas noticias, resultando una muy interesante IDE para nuestros desarrollos.
Ahora solo resta configurar la carpeta dónde se instaló Flex3. Para eso, pulsamos la tecla F10, marcamos AS3Context en la lista de la izquierda (la segunda entrada) y en la lista de la derecha, donde dice Flex SDK Location escribimos la carpeta de instalación del compilador, en nuestro caso C:\Flex3.
Acá terminamos la instalación de nuestro entorno. Seguiremos con nuestro original "Hola Mundo" en la próxima.

3) Instalando el entorno (1ra. Parte : Flex3) ...

2008-03-06T09:08:00.000-08:00

Primero vamos a instalar Flex3. Para ello vamos a descargarlo de aquí.
Vamos a elegir la opción Open Source Flex SDK, sin embargo, tu puedes elegir la versión completa (no nos pensamos meter con AIR por ahora).
Luego lo instalaremos simplemente descomprimiendo el .zip en una carpeta C:\Flex3 (si lo instalas en otra carpeta, tendrás que recordarlo luego cuando hagamos referencias a la misma, así lo adaptas a tu instalación).
Ahora vamos a ver si quedó bien instalado, compilando alguna de las aplicaciones de demostración.

Abrimos una consola (Inicio - Ejecutar, Escribimos cmd y hacemos Aceptar).
Luego, en la consola nos movemos al disco de instalación de Flex3 haciendo c:
Nos movemos a la carpeta de flex3 haciendo cd c:\Flex3\samples\explorer
Allí se encuentra el archivo build.bat que ejecutaremos para probar si el entorno de compilación funciona. Si es así, se irán generando una serie de archivos swf que luego podrán servirnos de ejemplo para programar en Flex. Este proceso es m u y, p e r o, m u y leeeeeennnntooooo. Paciencia (o a comprar procesador nuevo y un par de Gigas de Ram).

Bien, hasta aquí comprobamos que nuestro compilador funciona, pero para verlo necesitamos Flash Player 9 debugger que puedes descargar de aquí, eligiendo el apropiado para tu navegador. Luego lo instalas.

Ahora, podrás hacer abrir la página C:\Flex3\samples\explorer\explorer.html

Si hasta acá todo anda, podemos quedarnos tranquilos que vamos por el buen camino. Ya falta menos para poder empezar a programar....

2) Prerequisitos ...

2008-03-06T08:16:00.001-08:00

Antes de referirnos a los pre-requisitos, vale la aclaración que lo que se verá acá es para entorno Windows. Sin embargo, el compilador Flex3, también es posible descargarlo para otras plataformas. El editor, también podrá ser otro elegido. Con lo cual, si tu eres uno de dichos usuarios, puedes volver por acá cuando termines de instalar y compilar tus primeros programas.

Bueno, ahora van los pre-requisitos:

Descarga e instala Java (será necesario para compilar las aplicaciones con Flex3).
Descarga e instala .NET 2.0 framework (necesario para poder luego instalar FlashDevelop v.3)

Sugerencias:

Ni lo intentes con menos de 512 Mb de Ram. Sufrirás ataques de aburrimiento insospechados.

1) Para empezar ...

2008-03-05T10:12:00.001-08:00

He tratado de hacer un juego en AS3 con Flex3 y FlashDevelop y me ha costado mucho encontrar algún tutorial o libro que me ayude.
Si es de Flex3 (compilador Open Source para programas Flash), en general están orientados a las aplicaciones comerciales haciendo uso de Web 2.0.
Si es de Juegos, me encuentro con referencias a los conocidos .fla, el uso del TimeLine y del Stage, cosas que casi nunca aparecen como en ayudas de Flex3.
Como supongo que no soy el único con ese inconveniente en la web es que se me ocurrió lanzar este Blog para que podamos ir armando un entorno de trabajo útil y si es posible, unas buenas librerías de classes.
Trataremos de facilitar los caminos que llevan a poder publicar un juego en MochiAdds u otras páginas que vayan surgiendo y de esa forma poder ganar algún dinero extra.