Esta asociación se llama INVENTAD, Industria Nacional del Videojuego, Entretenimiento y Artes Digitales, y aunque ya la habíamos presentado en el Ciclo de Charlas, hasta ahora solamente tenía la forma de una lista de correos. Como lista de correos creo que fue un éxito al albergar muy buenas discusiones acerca del modelo de negocios en Venezuela, piratería y, en general, lo que está haciendo la gente. Desde la primera reunión se decidió dejar como página principal la lista y, mientras tanto, ir desarrollando una página que pudiera albergar mejor estas discusiones.

Esta página está ahora activa en http://www.inventad.org/, junto con los foros de discusión en http://www.inventad.org/foros/. Queremos que esta página se convierta en la referencia de los desarrolladores de videojuegos en Venezuela, y un punto donde los estudiantes puedan satisfacer su curiosidad acerca del proceso de hacer juegos, y qué pueden hacer mientras estudian. El registro a los foros es gratuito, así que si estás interesado puedes registrarte y presentarte por allá.

pyTower es un framework hecho en Python para hacer juegos del género Tower Defense. No es un juego como tal, sino un conjunto de rutinas para armar el juego, lo cual me pareció una aproximación bien interesante para aquellos que quieran armar un juego de este tipo rápidamente.

Si alguien lo descarga y lo usa le agradezco que comparta sus experiencias por acá.

Edmundito me pasó esta librería para hacer juegos en Python llamada cocos2d, una alternativa para el venerable PyGame con el que ya hemos hecho un tutorial en este blog. Aparte de los chistes fáciles que se pueden hacer a partir de la instrucción “import cocos” para comenzar a echar código no puedo sino sugerirles a los que usan Python que le echen un vistazo a esta librería que ya comienza a utilizarse para algunos juegos.

Siguiendo con la idea de esta serie de artículos, vamos a hacer el programa más pequeño posible en ActionScript 3 (AS3) que muestre el fundamento de la programación en este lenguaje. Considero que AS3 es una forma de programar para SWF muy superior a AS2.  Una nota aparte, creo que no hay que despreciar a AS2, pues lo seguiremos viendo durante mucho tiempo en la forma de Flash Lite u otro tipo de contenido.

Este artículo requiere tener algunas nociones de programación. Manejar ActionScript 2 es opcional.

En el artículo anterior les expliqué cómo se establecía un ambiente de desarrollo con FlashDevelop y el SDK gratuito de Flex. Una buena noticia que no había anunciado en aquel entonces es que también es posible montar este mismo ambiente en Linux: el SDK viene de caja para funcionar con Linux, y FlashDevelop está disponible para este sistema operativo. Así que no hay excusas para desarrollar para el pingüino .

Manos a la obra

Vamos a hacer un simple SWF que muestre un cuadro de texto. Lo primero que haremos en FlashDevelop será crear un proyecto nuevo en el que irá nuestro código. Hacemos click en Create New Project para esto.

Pondremos el nombre del proyecto, que lo titularemos “HolaMundo”. La ubicación del proyecto dependerá mucho de la configuración de tu máquina, pero yo recomiendo tener una carpeta con todos los proyectos.

Puede que parezca que hacer un proyecto sea demasiado para un simple HolaMundo. Además que en Flash es simplemente cuestión de crear un .fla. Pero el hecho es que este tipo de organización ayuda mucho en el futuro. Yo en el pasado ya he tenido muchos casos de proyectos en Flash qeu vuelvo a abrir y tengo un amasijo de imágenes y .fla en distintas revisiones. Créeme que soy responsable al afirmar que esto te va a ayudar. Palabra de programador.

Una vez creado el proyecto veremos que ya FlashDevelop había abierto un archivo nuevo. Vamos a darle nombre de una vez a este archivo guardándolo. En este archivo lo guardaremos específicamente con el nombre de “HolaMundo.as”. Tiene importancia y luego veremos por qué.

Dentro de HolaMundo.es escribiremos el siguiente código:

package {
    import flash.display.MovieClip;
    import flash.text.TextField;
    public class HolaMundo extends MovieClip {
        public function HolaMundo() {
            var c : String = "Hola Mundo"
            agregarTexto(c);
        }
        private function agregarTexto(cadena:String) : void {
            var textField:TextField = new TextField();
            textField.text = cadena;
            textField.x = 10;
            textField.y = 10;
            stage.addChild(textField);
        }
    }
}

Ahora abriremos las propiedades del proyecto haciendo click secundario sobre el proyecto HolaMundo (AS3), y seleccionado la opción Properties… en el menú desplegable. En la primera pestaña llamada Output, tendremos especial cuidado de nombrar el archivo de salida en la opción Output File.

Cerraremos el cuadro presionando OK. Ahora probaremos la película abriendo el menú Project -> Test Movie.

Si sale una ventana pidiéndote abrir la configuración del contexto de AS3, significa que no le has indicado a FlashDevelop dónde está el compilador de Flex. Vuelve al artículo anterior para asegurarte que lo has hecho bien.

Si todo va bien, vas a ver en una nueva pestaña la película que hemos creado, un SWF con un cuadro de texto que dice “Hola Mundo”:

¿Qué hemos hecho?

Con el modelo de ActionScript 3, ahora tenemos un MovieClip base (en Flash CS3 se llama Document Class). Este MovieClip es una clase que define un montón de cosas que nos permiten reproducir animaciones como las que hacíamos en Flash. En este caso lo usaremos como contenedores para mostrar gráficos en pantalla.

En este ejemplo sólo he creado un objeto de tipo cuadro de texto (TextField), le he puesto contenido, y le he asignado una posición. Un TextField es uno de los tantos tipos de objetos gráficos que se pueden incluir en una película. Me incliné por él debido a que es simple de utilizar y demuestra rápidamente el punto de crear objetos gráficos y agregarlos al MovieClip. Veremos en otro artículo que la adición de otros objetos gráficos es muy similar.

Queda entonces explicar qué significa el objeto stage dentro del código. El MovieClip base está unido a un objeto gráfico especial que representa la ventana donde se reproduce el SWF. Este objeto es el Stage, y la ventaja de definirlo así consiste en que el stage es accesible desde cualquier punto de la jerarquía de MovieClips. Esta jerarquía la expliqué en un artículo sobre Display Lists hace algún tiempo.

En un próximo artículo haremos algo un poco más complicado, creando formas y figuras y animándolas a través de código.

En este artículo explicaremos cómo hacer juegos con Flash/Flex/ActionScript y FlashDevelop en Windows sin costo monetario y completamente legal. La proliferación de herramientas que producen películas SWF ha permitido que se puedan utilizar sin mayor costo que el esfuerzo de instalar y levantar el ambiente de desarrollo. Foto por AGoK.

En la primera parte explicaremos cómo hemos llegado hasta acá, en la segunda parte explicaremos qué software utilizaremos para montar un ambiente gratuito de desarrollo en ActionScript, y en la tercera parte explicaremos paso a paso cómo montarlo.

¿Cómo es eso de desarrollar SWFs gratis?

La herramienta Flash ha pasado a lo largo de estos años de ser una alternativa para hacer animaciones en páginas web a un importante movimiento dentro de Internet para hacer aplicaciones tan o más atractivas que las aplicaciones de escritorio y con una funcionalidad similar o superior.

Macromedia, ahora parte de Adobe, supo desde hace ya varias versiones de Flash que debía orientar tanto la herramienta como su lenguaje de programación, ActionScript, hacia la creación de estas aplicaciones, lo que implicaba la mejora del flujo de trabajo para los programadores de oficio. La culminación de este esfuerzo son dos productos: ActionScript 3, y Flex.

ActionScript 3 (AS3) es más que una actualización de la versión anterior. Programar AS3 implica pensar las cosas de manera un tanto distinta de AS2, de manera mucho más explícita y con conceptos más simples de manejar. Por otra parte, Flex ha traído una nueva forma de producir películas en formato SWF (el formato al que exporta Flash), al tener el programador un mayor protagonismo para hacer aplicaciones.

¿Qué necesitamos para hacer un ambiente gratuito de desarrollo en Actionscript?

Para hacer este ambiente necesitamos específicamente dos programas: el SDK de Flex y FlashDevelop. Ambos se consiguen de manera gratuita.

Flex es un programa que, como Flash, produce archivos SWF, pero en vez de tener una interfaz gráfica, se tiene una librería de componentes y un lenguaje de programación basado en XML que permite crear aplicaciones de manera muy rápida y efectiva.

Flex específicamente es un compilador de ActionScript 3 cuyo producto es un SWF. Flex también trae una librería muy poderosa de componentes que permiten hacer muy rápidamente aplicaciones para Internet en Flash y con el atractivo de las aplicaciones hechas en Flash, además de otro compilador que convierte un formato de archivo XML llamado MXML en ActionScript (y de ahí a SWF). Estos dos compiladores más la librería conforman el SDK de Flex, y están disponibles gratuitamente en la página correspondiente de Adobe: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

Ahora, lo importante es la parte del compilador y ActionScript 3: con Flex es posible crear proyectos de cero (sin necesidad de la librería de componentes), lo cual permite hacer juegos muy pequeños sin necesidad de Flash (aunque podría necesitarse en caso de que se quieran usar dibujos vectoriales).

Lo único que faltaría es un IDE para programar. Flex Builder es la alternativa comercial y sin duda una de las mejores, pero el programa es pag. Al estar basado en Eclipse es realmente lo mejor para programar. Una tremenda alternativa que no se queda atrás, gratuita, y la que usaremos en este post, es FlashDevelop (http://www.flashdevelop.org/community/).

¿Cómo hacemos, paso a paso, para montar este ambiente?

1. Descargar el SDK de Flex en la página Flex 3 SDK Downloads. Lo más recomendable es ir a la parte de Stable Builds, y descargar el primer enlace debajo de la columna Adobe Flex SDK. Si estás preocupado por desarrollar únicamente con herramientas libres, puedes descargar el correspondiente a Open Source Flex SDK. El primer enlace describe con detalle la diferencia entre ambos paquetes, siendo que sólo trae código licenciado bajo la Licencia Pública de Mozilla. Si no sabes de que estoy hablando ahora, no te preocupes, simplemente descarga el primero y estarás bien.
2. Descargar FlashDevelop. Entra a la sección de Releases, y descarga la última versión. Las versiones Final son las más recomendables, pero en este post trabajaré con la versión FlashDevelop 3.0.0 Beta7.
3. Descomprimir el SDK de Flex con tu descompresor favorito. Para este artículo crearemos un directorio en C:\flex, y allí adentro descomprimiremos el contenido de lo que descargamos en el paso 1.
4. Instalar FlashDevelop. Es un instalador común y corriente de Windows. Creará unos atajos de inicio.
5. Ejecutar FlashDevelop. Al llegar a la pantalla inicial iremos a Tools -> Program Settings…. En la nueva ventana Settings nos vamos a la sección AS3Context y cambiamos la ubicación de la instalación del SDK de Flex en Flex SDK Location. Colocamos el mismo directorio donde descomprimimos el archivo del paso 3, en este caso C:\flex.
   

   Configuración de Flash Develop

6. Estamos listos. Podemos crear un proyecto nuevo en Project -> New Project. En la nueva ventana New Project escogemos un Default Project en la sección ActionScript 3, un directorio, y hacemos click en OK.
   

   Vista de Proyecto de FlashDevelop

7. En Project -> Test Movie podemos probar la película que genera este proyecto por defecto. Veremos una pantalla en blanco solamente, pero eso significa que a partir de ahora podremos desarrollar en ActionScript sin ningún problema.

En siguientes entregas veremos cómo se desarrollan aplicaciones con este método. La literatura recomenda por ahora es la relacionada con el Document Class de Flash y cómo trabajar con él.

Hace ya bastante tiempo que salió ActionScript 3 (AS3) y los programas que lo utilizan, como Flash CS3 y Flex 3. Hasta hace poco no había tenido el chance de revisarlos un poco, y experimentar con una técnica que voy a utilizar dentro de poco. Para aquellos que conocen ActionScript 2 (AS2), su versión 3 es un campo de minas totalmente distinto .

AS 3 cambia el concepto de dibujar cosas en la pantalla y colocar clips. El sistema de AS3 es más explícito, al crear el concepto de Display List. El Display List es una lista que se recorre cada vez que se dibuja un frame (o fotograma) en la pantalla. El recorrido de esta lista asemeja el recorrido de un árbol, en el que en el tope se encuentra la película principal, también conocido como el Stage. La lista la conforman objetos que se pueden dibujar. Algunos de ellos contienen sus propias listas de dibujo que son recorridas cuando se dibuja un frame.

Por ser una estructura muy similar a la de un árbol, los objetos se agregan y se eliminan en lo que llamaremos contenedores. Entonces, el proceso para crear y agregar MovieClips se simplifica:

1. Se crea una película con una llamada a new MovieClip(); y se asignan las propiedades que tenga.
2. Se agrega esta película al contenedor, como otro MovieClip o al Stage si no hay nada más en la pantalla. Esto se hace con la función addChild() en el contenedor, o addChildAt() si se quiere hacer en un lugar específico.

¿Cuál es la ventaja de esta aproximación a los gráficos con respecto a AS2? Que es más fácil de comprender. El concepto de “profundidad” (depth) que había en AS2 no se utiliza aquí: el orden en el que se dibujan los objetos está determinado por el orden en el que están insertados en su respectivo contenedor.

AS 3 tiene un enfoque mucho más estricto que su versión anterior con respecto a la orientación de objetos. La programación en AS 3 es 100% orientada a objetos, cosa que gustará mucho a aquellos que ya programan en lenguajes como Java. Ellos van a encontrar que ActionScript 3 va a tener una forma muy similar de programación. En futuros artículos iremos complementando esta información.

Para saber más acerca de los Display Lists, consultar los Livedocs de Adobe concernientes a los Core Display Classes.

* Foto por Kyle May

A partir de estos días estaré aprendiendo a utilizar Bitmaps en Flash. A diferencia de la programación usual en Flash, ej. dibujos vectoriales, la programación con bitmaps tiene sus particularidades. La idea es hacer cosas con un estilo pixel art. Lo retro es bonito. Estoy comenzando a leer, y conseguí una serie de 2 partes extremadamente básica para manipular Bitmaps en Flash, pero necesarias si no se conoce mucho del tema: Jugando con Pixels (I), y Jugando con Pixels (II). Sirve también la documentación Livedocs de Adobe: Las clases Bitmap y BitmapData.

Adobe acaba de lanzar el proyecto Open Screen. Aparentemente hay mucha emoción por esta noticia, e incluso salen algunas medias verdades como que Flash Player será abierto, y demás. No ayuda a la comprensión de la noticia el hecho de que esa página esté llena de un montón de palabrería corporativa, en vez de responder ciertas preguntas con un Sí o un No. Me tomo la molestia de explicar algunos puntos de esta noticia, y el alcance que puedan tener para la comunidad que desarrolla con Flash.

La clave del proyecto Open Screen está en las 4 cosas que hará Adobe para apoyar el proyecto (tal como lo especifica en el FAQ del proyecto):

• Remover las restricciones del uso de las especififcaciones SWF y FLV/F4V.
• Publicar las APIs de la capa de port de dispositivos de Adobe Flash Player.
• Publicar el protocolo Adobe Flash Cast y el protocolo AMF para servicio de datos robusto.
• Remover los cargos de licencia, haciendo gratis los próximos releases para dispositivos de Adobe Flash Player y Adobe AIR.

Las especificaciones SWF y FLV/F4V

Como bien lo dice el FAQ, Adobe está publicando las especificaciones del formato SWF desde 1998. El problema es que esta publicación estaba sujeta a la restricción de que sólo se podían publicar programas que “escribieran” SWF; es decir, no era posible publicar programas que reprodujeran SWF (y que por ende compitieran con Flash Player). Bajo estas restricciones programas como swfmill y mtasc fueron publicados.

Esta restricción a partir de hoy ha sido levantada, por lo que de ahora en adelante será permitido publicar reproductores del formato SWF. Supongo que proyectos como Gnash, un reproducto GNU de SWF, se beneficiarán de esta noticia.

Con respecto al formato FLV, es un formato de archivo para medios como audio y video, el cual soporta H.264 y HE-AAC, y varios tipos de codecs para video. F4V es la versión con protección de derechos de autor de FLV. Aunque no conozco mucho sobre este formato, supongo que a partir de ahora veremos más codificadores para FLV que Sorenson.

Las especificaciones de SWF y de FLV se encuentran en sus respectivas páginas: SWF Technology Center, y FLV/F4V Technology Center.

Device porting layer APIs para Adobe Flash Player y la remoción de los cargos de licencia

El verdadero objetivo de todo este proyecto es entrar en el campo de los dispositivos portátiles, un campo muy competido, y sus contendores principales son las plataformas Java y BREW. El esfuerzo inicial de Macromedia (ahora Adobe) es Flash Player Lite, basado en Flash Player 4.

La publicación de un API para facilitar el port de Adobe Flash Player, junto con su precio gratuito para licencia, facilitará y masificará la implementación de esta plataforma en los celulares. Los fabricantes tendrán la última palabra en este asunto, pero Flash tiene la ventaja de que la barrera de aprendizaje es baja, el público desarrollador principalmente compuesto de diseñadores gráficos, y que SWF es un formato fundamentalmente vectorial (resolviendo el problema de las diferencias de resolución de los dispositivos). Yo creo que veremos más de esta plataforma en el futuro.

Protocolos Adobe Flash Cast y AMF

AMF es el protocolo de Adobe para hacer llamadas remotas (RPC) a servidores web. El proyecto Red5 ya es un esfuerzo maduro en relacionar los objetos en ActionScript y los objetos en Java de un servidor. Adobe recientemente lanzó el proyecto BlazeDS para ocupar este espacio que tenía vacío. BlazeDS es un conjunto de librerías que facilita el intercambio de información entre una aplicación en SWF y un contenedor Java de aplicaciones web (tal como Red5). BlazeDS tiene código abierto, y se puede descargar en su página oficial.

Por su parte, el protocolo AMF como tal ya está publicado en la página correspondiente.

Desconozco si Adobe Flash Cast tiene que ver con RTMP (Real Time Messaging Protocol), el protocolo propietario de Adobe para transmitir streams de audio y video. De ser así, esto será un grandísimo beneficio para Red5, que ha tenido que sobrevivir hasta ahora haciendo ingeniería inversa del protocolo.

El protocolo Adobe Flash Cast todavía no ha sido publicado. Ya habrá tiempo de analizar esta iniciativa cuando publiquen este protocolo. (Y qué demonios querrán decir con todo esto )

Conclusiones

En fin, el anuncio del proyecto Open Screen es un gran avance de Adobe en el dominio de Flash en el mercado web, y al mismo tiempo un acercamiento a la comunidad de desarrolladores que ciertamente ha contribuído con este dominio. Es un gran anuncio, eso sí, para aquellos interesados en software libre que utilice estos formatos.

Hacer juegos multiplayer en Flash ciertamente requiere algo más que el editor de Flash, pues los compilados que se publican no poseen las capacidades necesarias para fungir de servidores. En otras palabras, no es posible hacer conexiones y obtener datos utilizando solamente los SWFs que saca Flash, debido a obvias restricciones de seguridad. En términos simples, no quieres estar recibiendo alegremente conexiones de otras partes del mundo mientras usas Flash en una página.

Los SWF que publica Flash no pueden conectarse a las computadoras de otras personas. Necesitamos un servidor que haga esta tarea.

Luego, la solución indicada es tener un servidor al que todos los SWFs se puedan conectar y desconectar. Inicialmente, Macromedia (ahora Adobe) lanzó el Flash Communication Server, luego rebautizado como Flash Media Server. Este servidor tiene excelentes características para desarrollar una aplicación multiusuario, ya que utiliza una versión del lenguaje Actionscript para el servidor. Ahora, estamos hablando de que una licencia cuesta varios miles de dólares.

Es entonces cuando podemos ver otras alternativas más económicas e igualmente útiles. La primera y más popular es el proyecto Open Source llamado Red5. Red5 es funcionalmente un clon de Flash Media Server, y está basado en Java. Requiere el ambiente de ejecución de Java (el JDK) para poder correr. Esto tiene varias implicaciones: es necesario saber bastante de Java para poder aprender los conceptos de Red5 y poder programar aplicaciones en este servidor. La otra implicación es que se requiere de una compañía de hosting que ofrezca hospedar aplicaciones en Java, cosa que sabemos no es tan común como los planes con ASP o PHP.

Con respecto al primer punto, sin embargo, Red5 ha resuelto el problema en parte ofreciendo maneras de interpretar varios lenguajes para hacer las aplicaciones. Javascript, Ruby y Python son algunos de estos lenguajes, por lo que se puede aprovechar el conocimiento que ya se tienen de estos y no tener que aprender Java.

Con respecto a la documentación, está todavía en desarrollo, y aunque hay muy buen material que viene con el servidor, hace falta organizarse, leerlo y digerirlo varias veces.

Otra alternativa, ya comercial, es SmartFoxServer. Esta gente provee un servidor también basado en Java, pero la programación se concentra principalmente en los clientes, de acuerdo a lo leído en la documentación. Tiene también soporte para programar en Actionscript para el servidor. Su versión PRO, que es la que trae la mayor cantidad de características, tiene una licencia ilimitada por un costo mucho menor al Flash Media Server, y además ofrecen las versiones BASIC y LITE, siendo la BASIC mucho más económica y la LITE completamente gratuita. SmartFoxServer se publicita principalmente a través de la página gotoAndPlay(), en donde hay una variedad de juegos creados con su servidor, tutoriales, y un foro de soporte. En fin, no me parece una solución descabellada.

Probablemente hayan otros servidores por allí, pero al menos sé que Red5 está comenzando a formar una comunidad de gente, y es una alternativa totalmente factible para hacer aplicaciones multiusuario.