Signals and Slots con Boost (C++)

boost

Una de las herramientas más útiles que tengo a la hora de comunicar eventos que ocurren en una clase a otros sitios es el patrón de Observador, que en ActionScript 3 se manifiesta con el sólido sistema de eventos que forma parte de la librería básica de este lenguaje.

Lamentablemente, el sistema de eventos es prácticamente único dentro de AS3. Portear código basado en eventos a otras plataformas que no tengan esto incorporado no es sencillo. Así que una manera que he encontrado de trabajar más naturalmente ha sido los AS3 Signals, de Robert Penner, o su homólogo en Javascript, por Miller Medeiros. Basado en el sistema de Signals and Slots de la librería QT, se definen los signals como miembros públicos que se colocan dentro de un objeto. Otros objetos se suscriben a estas señales con una función de llamada de vuelta, que es llamada cuando la señal se emite. A estas funciones se les conoce como slots.

Esto es muy parecido a como funciona el sistema de eventos, pero a diferencia del de ActionScript 3, no requiere un sistema central que maneje los eventos. Cada señal mantiene registro de las funciones a las que debe llamar.

En C++ he conseguido que la implementación de signals con Boost, llamada signals2, es igualmente de útil y flexible que sus símiles en AS3 y JavaScript. Además de esto, la librería es thread-safe y se comporta bien con muchas plataformas, por lo que el código resultante es bastante porteable.

Boost es un compendio de librerías extremadamente grande, y que apenas estoy comenzando a explorar. El objetivo de este artículo es simplemente explorar lo que se puede hacer con signals2 para facilitar la comunicación entre clases. No está de más decir que necesitas comprender medianamente bien C++ para entender el tutorial. Sigue leyendo Signals and Slots con Boost (C++)

Herramientas para empacar y desempacar sprites

lcd
Voting Day emplea este spritesheet.

Una de las técnicas modernas más comunes en el desarrollo de videojuegos 2D es empacar los sprites en un solo archivo.

Empacar sprites es una excelente técnica para reducir el tamaño de los archivos gráficos (cada archivo incluye sus propios metadatos que sumados aumentan el tamaño del juego), mejorar el desempeño a la hora de la carga (sólo hay que cargar un archivo), y a la hora de emplear la tarjeta gráfica (como en el caso de OpenGL) mejora muchísimo el desempeño, ya que la tarjeta no tiene que cambiar constantemente de textura en memoria, que es una operación costosa, sino que se limita a usar una textura, cambiando las coordenadas de la misma para dibujar.

Para empacar los sprites hace falta tener el archivo gráfico con todos los sprites juntos, y un archivo de texto que describa los sprites que están adentro, junto con las coordenadas que definen a cada uno. Uno de los formatos de texto más populares para el archivo es el formato .plist, o Property List, realizado por Apple, basado en XML y leído por cocos2d.

En teoría podríamos hacer el spritesheet a mano, copiando cada archivo, pegándolo en el archivo grande, y luego creando a mano el archivo de texto con los datos. Pero afortunadamente no hay que hacer eso, ya que existe software que lo hace automáticamente.

screenshot_shoebox3

 

texturepacker

Anteriormente hablé de un empacador de sprites, ShoeBox (para Adobe AIR), el cual es gratuito y parece que tiene lo necesario para trabajar los spritesheets. Digo parece porque el que yo uso es TexturePacker (Windows/Mac), que es comercial y existe desde antes de la aparición del primero. Otro empacador bien conocido (comercial también) es Zwoptex (Mac).

ryu

Por otro lado, hay veces en las que uno puede descargarse un spritesheet sin la información de las coordenadas (ejemplo, si vas a un archivo de sprites como GSArchives.net), o por algún accidente se pierde esa información. En estos casos viene bien tener una aplicación que dado un spritesheet te pueda generar los sprites en archivos separados. En este caso cae muy bien la aplicación Alferd Spritesheet Unpacker (Windows), que es gratuita. Aunque tiene sus defectos de interfaz gráfica, la herramienta hace lo que dice hacer, por lo que a veces salva vidas (en mi caso, lo ha hecho).

Estoy haciendo un tutorial de cocos2d-html5. Debido a la situación del país en los últimos días, el ritmo del tutorial bajó, pero sigo pendiente de escribir y publicar nuevas entregasi.

El framework Starling para AS3 alcanza su versión 1.0

La librería Starling para ActionScript 3 ha alcanzado su versión 1.0. Esta librería es interesante porque es un sustituto para el Display List de Flash que corre sobre el GPU.

¿Qué significa todo esto? Hasta ahora el sistema de dibujo en Flash Player ha empleado el CPU para dibujar. Una serie de optimizaciones brutales permite que el dibujo sea muy efectivo, pero a veces simplemente el CPU no lo logra. La más reciente versión número 11 de Flash Player introdujo al GPU como una alternativa para dibujar cosas en pantalla, aunque la forma de hacerlo implica usar unas librerías ligeramente distintas al proverbial Display List.

Starling permite emplear exactamente los mismos métodos para agregar elementos de dibujo de DisplayList (addChild, swapChildren, etc.), pero empleando el GPU. Aparte de eso, el API es consistente para su uso en Flash para dispositivos móviles, como iOS y Android.

No he tenido chance de probar esta librería a fondo, pero promete abrir un camino completamente nuevo en el desarrollo de juegos para Flash. Descarguen la versión 1.0 y completen el tutorial.

Presentación de INVENTAD

Desde hace varios meses entre varios desarrolladores hemos tenido conversaciones acerca de qué hacer para crecer como industria y atraer a estudiantes universitarios al desarrollo de videojuegos. Entre todos decidimos crear una asociación que nos permitiese seguir adelante con la organización de eventos y demás actividades para ese fin.

inventad

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: Un framework en Python para hacer juegos tipo Tower Defense

logo_web

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

Tutorial para comenzar a utilizar XNA 3.0

Les dejo con un tutorial de XNA de Oh my bug! que describe cómo instalar y comenzar a utilizar la popular librería para hacer juegos en PC y Xbox360. También les recomiendo el blog, tiene muy buenos artículos, incluyendo uno sobre cómo utilizar el WiiMote en C#.

Creando juegos en Python con Cocos2d

irobot

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.

Encontronazos con ActionScript 3: Creando un hola mundo

Este artículo es la parte 3 de 6 de la serie Encontronazos con ActionScript 3

0-presentacion

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.
Sigue leyendo Encontronazos con ActionScript 3: Creando un hola mundo

Encontronazos con ActionScript 3: Cómo hacer juegos con Flash/Flex/ActionScript y FlashDevelop gratis

Este artículo es la parte 2 de 6 de la serie Encontronazos con ActionScript 3

Free Beer

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

Encontronazos con ActionScript 3: El sistema de dibujo y los Display Objects

Este artículo es la parte 2 de 6 de la serie Encontronazos con ActionScript 3

Oops! - Part II by Kyle May

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