StageXL 1.0

Después de más de 4 años de desarrollo y disponible desde las primeras versiones beta de Dart, estamos orgullosos de anunciar el lanzamiento de StageXL 1.0. StageXL es un motor de renderizado 2D rápido y universal para juegos y aplicaciones en la web. Este artículo habla sobre las características y aplicaciones más importantes de esta librería.

Hace varios años se hizo evidente que Adobe Flash sería reemplazado por las capacidades de HTML5. Las plataformas de streaming de video reemplazaron sus reproductores Flash con reproductores HTML5 y la red de Google AdWords prohibió recientemente todos los anuncios display basados en Flash. El último gran refugio de las aplicaciones Flash en la web son los juegos. Incluso hoy la mayoría de los juegos en facebook están construidos con Flash.

Los desarrolladores de juegos no tenían otra opción que usar Flash para juegos en el pasado. Las capacidades del DOM no eran adecuadas para juegos e incluso después de la introducción del elemento canvas había que lidiar con problemas de rendimiento, problemas de compatibilidad y, por último pero no menos importante, JavaScript (un lenguaje nacido en el infierno si le preguntas a ciertos desarrolladores de Flash/ActionScript). Las cosas mejoraron con la introducción de librerías como CreateJS o PixiJS que proporcionan una API y una experiencia de desarrollo similares a Flash. También el auge de lenguajes como TypeScript, Haxe o CoffeeScript redujo el dolor.

Como ex desarrollador de juegos en Flash/ActionScript yo mismo, experimenté de primera mano todo lo mencionado arriba. Pero una vez que entré en contacto con las versiones tempranas de Dart quedó claro que era un sucesor digno de ActionScript. Dart se ve y se siente muy similar a ActionScript y al mismo tiempo es un lenguaje mucho más moderno que evita una sintaxis inflada. Pero Flash es mucho más que el lenguaje. Flash proporciona un motor de renderizado basado en árbol de visualización, un motor de sonido, gráficos vectoriales, renderizado de texto y mucho más. Esta fue la base de StageXL — esta nueva librería debería proporcionar las funcionalidades de Flash en combinación con Dart y HTML5. Los desarrolladores deberían poder usar Dart y StageXL para escribir sus juegos de la misma manera que lo hacían con Flash antes. Para hacerlo aún más fácil, la API de StageXL es casi idéntica a la de Flash.

Los desarrolladores de Flash deberían estar familiarizados con código de StageXL como este:

**Sprite** createContainer(**BitmapData** bitmapData) {
  var bitmap = new **Bitmap**(bitmapData);
  var sprite = new **Sprite**();
  bitmap.**x** = -bitmapData.**width** / 2;
  bitmap.**y** = -bitmapData.**height** / 2;
  sprite.**addChild**(bitmap);
  sprite.**alpha** = 0.5;
  return sprite;
}

StageXL - Comparación de ActionScript con Dart *Venir de ActionScript y aprender Dart es fácil. Ambos lenguajes están basados en clases, herencia simple, orientados a objetos…*www.stagexl.org

La API de StageXL cubre una amplia gama de funcionalidades. El propósito principal de la librería es un motor de renderizado rápido y fácil de usar, pero necesitas más que eso para escribir un juego o aplicación.

Gráficos: Un árbol de visualización se construye a partir de nodos que extienden la clase base abstracta DisplayObject. La posición de un nodo en el árbol define si el objeto de visualización está delante o detrás de otro objeto. Para crear ramas en el árbol, se usa una segunda clase base abstracta llamada DisplayObjectContainer. Puedes construir objetos de visualización personalizados extendiendo una de esas dos clases base, o puedes usar una de las clases integradas como Sprite, Bitmap, TextField o Shape. Todas estas clases son iguales que en Flash y conceptos similares se usan también en otros motores de renderizado.

Interacción: La clase EventDispatcher proporciona las capacidades para despachar eventos y suscribir listeners a ciertos eventos. Todos los objetos de visualización extienden la clase EventDispatcher y por lo tanto son capaces de despachar eventos. Esos eventos pueden ser eventos personalizados despachados por tu lógica de juego, o eventos de interacción de ratón, táctil y teclado despachados por el runtime de StageXL. Dado que todos los objetos de visualización viven dentro del árbol de visualización, un evento se propaga por todos los nodos desde el nodo raíz hasta el nodo objetivo y de vuelta (fases de captura, objetivo y propagación de un evento).

Audio: Cada juego necesita efectos de sonido adecuados. StageXL proporciona la infraestructura para cargar y reproducir muestras de audio sin mucha complicación. La clase Sound representa una muestra de audio que se cargó en memoria. Llamar al método play en la clase Sound comenzará a reproducir la muestra de audio y devolverá una instancia de la clase SoundChannel para tener control sobre la reproducción. Puedes reproducir múltiples instancias del mismo Sound concurrentemente, por ejemplo reproducir múltiples instancias de un sonido de explosión.

Recursos: StageXL facilita la carga de imágenes, archivos de audio y otros recursos desde el servidor. Dado que la carga de dichos archivos es una operación asíncrona, se proporciona una API basada en Future. Cargar una imagen es tan fácil como esperar la finalización del Future devuelto por el método BitmapData.load. Lo mismo es cierto para el Future devuelto por los métodos Sound.load o TextureAtlas.load. Para hacer aún más conveniente cargar muchos recursos diferentes a la vez, se puede usar la clase ResourceManager. Esta clase carga todos los recursos especificados y proporciona fácil acceso a ellos una vez que el proceso de carga ha terminado. El ResourceManager se puede considerar como el reemplazo de los recursos embebidos en Flash.

Animación: StageXL también contiene un framework para animaciones llamado Juggler. El framework Juggler fue introducido por el motor de renderizado Starling bien conocido entre los desarrolladores de Flash. El Juggler se usa para controlar los llamados Animatables basándose en el tiempo que ha pasado entre dos frames de renderizado. Uno de esos Animatables es la clase Tween, que se usa para animar la posición, la rotación, el escalado o la translucidez de cualquier objeto de visualización. El Juggler también proporciona Streams basados en tiempo para controlar valores en tu lógica de juego. Se pueden encontrar más detalles en la documentación de Juggler.

El motor de renderizado de StageXL está construido sobre WebGL para obtener el mejor rendimiento y flexibilidad. Por supuesto el desarrollador no necesita saber nada sobre WebGL para usar StageXL. Aún así, vale la pena señalar que los objetos de visualización son renderizados por programas shader de WebGL ya sea usando un shader por defecto o un shader más avanzado para efectos de filtro como BlurFilter, DropShadowFilter, ColorMatrixFilter y otros. En casos de uso más avanzados los desarrolladores pueden usar filtros personalizados implementando su propio código de programa shader de WebGL.

Para lograr el mejor rendimiento de renderizado posible es esencial usar los llamados atlas de texturas. Todos tus assets de imagen se combinan en una gran imagen que se sube a la memoria de la GPU. Por ello StageXL soporta los formatos de atlas de texturas más comunes listos para usar. Usa tu generador de atlas de texturas favorito (recomendamos encarecidamente TexturePacker) para generar el atlas de texturas, el resto lo maneja StageXL internamente. Como extra especial StageXL soporta funcionalidades avanzadas de atlas de texturas como mallas de sprites poligonales y el algoritmo de empaquetado de polígonos.

El motor de sonido de StageXL está construido sobre el API de WebAudio. De manera similar a WebGL, el desarrollador no necesita saber nada sobre este API. Para reproducir muestras de audio solo necesitas usar las clases Sound y SoundChannel que hacen todo el trabajo pesado por ti. Un problema común al reproducir audio en diferentes navegadores es la falta de soporte para ciertos códecs de audio. Probablemente codificas tus muestras de audio como archivos mp3, pero no está garantizado que mp3 sea soportado en todas las plataformas. Lo mismo es cierto si codificas tus muestras de audio con cualquier otro formato de archivo. StageXL resuelve este problema cargando automáticamente el formato de audio correcto basándose en las capacidades del navegador.

Otros motores de renderizado 2D para JavaScript a menudo afirman ser los más rápidos y flexibles. Por supuesto esta afirmación depende en gran medida del benchmark o del caso de uso y es muy difícil de verificar. Durante el diseño y desarrollo de StageXL comparamos constantemente su rendimiento y flexibilidad con otros motores. Al final ambos factores de calidad igualan o incluso superan a otros motores que afirman ser los mejores. Una de las grandes ventajas de StageXL en este sentido es el uso del lenguaje de programación Dart. El lenguaje no solo permite un diseño de API muy limpio, sino que también proporciona un compilador a JavaScript sobresaliente que optimiza ciertos patrones de una manera que prácticamente no puedes implementar a mano en JavaScript. El JavaScript compilado no necesita verse bonito, solo necesita ejecutarse rápido. El compilador hace inlining de funciones, eliminación de código muerto, plegado de constantes, inferencia de tipos y otras optimizaciones. El compilador también es consciente de cómo debe verse el JavaScript para que se ejecute rápido en los motores de JavaScript modernos. Esto es muy diferente a otros lenguajes como TypeScript donde el código no se compila a JavaScript sino que solo se transpila a JavaScript. Por último pero no menos importante, no necesitarás cambiar ni una sola línea de código para compilar a JavaScript nativo ES5 y ES6.

StageXL BunnyMark *¡Renderiza tantos conejos como sea posible!*www.stagexl.org

Tomó más de 4 años llegar a la versión 1.0 de StageXL. La razón de tanto tiempo es que siempre hay algo que mejorar o añadir y nunca piensas que el proyecto está terminado. Esto también es cierto para la versión 1.0 y se añadirán nuevas funcionalidades de forma regular en el futuro. Los comentarios de la comunidad son muy valiosos y las peticiones de funcionalidades siempre son bienvenidas — los reportes de bugs también, hasta cierto punto ;)

Probablemente la característica más grande que vemos en el horizonte es el soporte para Flutter. Serías capaz de escribir juegos móviles en Dart y StageXL para Android e iOS. Las primeras versiones de Flutter parecen muy prometedoras, desafortunadamente la plataforma aún no expone las APIs de OpenGL que necesitas para construir StageXL sobre ella. Estaremos atentos al desarrollo y esperamos que no pase mucho tiempo antes de ver StageXL en dispositivos móviles.

Flutter: ¿La mejor experiencia de desarrollo móvil? *Desarrollar para móvil acaba de volverse mucho más divertido con el flujo de desarrollo en vivo de Flutter. En el corazón de este nuevo flujo…*news.dartlang.org

La librería StageXL proporciona todo lo que necesitas para renderizar gráficos, reproducir audio, cargar archivos de recursos, hacer animaciones y mucho más. Pero hay otras funcionalidades que podrías necesitar para tu juego o aplicación. Por lo tanto StageXL se puede extender con funcionalidades más especializadas que están disponibles en paquetes adicionales. Las siguientes extensiones están disponibles en GitHub así como en Pub.

StageXL_Spine: Spine está dedicado a la animación esquelética 2D, proporcionando un flujo de trabajo eficiente tanto para crear animaciones increíbles como para integrarlas en tus juegos. Spine proporciona numerosas herramientas para dar forma y refinar tus animaciones 2D. Dobla y deforma imágenes con mesh skinning/weights, ajusta el tiempo con el dopesheet, visualiza el movimiento con ghosting, posiciona tus personajes con cinemática inversa, crea efectos pseudo 3D y mucho más. (demo)

StageXL_DragonBones: DragonBones es una solución de animación esquelética 2D de código abierto muy popular entre los desarrolladores de Flash y Starling. El editor está disponible para Mac y Windows y no requiere Adobe Flash. DragonBones puede no tener tantas funcionalidades como Spine, pero proporciona suficiente para la mayoría de los casos de uso. (demo)

StageXL_GAF: GAF significa Generic Animation Format. GAF está diseñado para almacenar animaciones de Flash en un formato abierto multiplataforma para su posterior reproducción. GAF permite a los artistas y animadores usar Adobe Flash para crear animaciones complejas y usar esas animaciones sin problemas en StageXL. (demo)

StageXL_BitmapFont: Las fuentes bitmap se crean con herramientas especializadas o incluso se diseñan en PhotoShop para renderizar textos con aspecto llamativo. Los glifos se almacenan en una textura para renderizar textos de manera muy eficiente en tiempo de ejecución. La librería de fuentes bitmap de StageXL también soporta funcionalidades como distance fields para bordes nítidos al escalar o rotar el texto. (demo)

StageXL: StageXL en Github Ejemplos de StageXL en Github Referencia del API de StageXL Foro de StageXL

Runtimes: Runtime de StageXL Spine Runtime de StageXL DragonBones Runtime de StageXL GAF Fuentes Bitmap de StageXL

Games: Memoria (fuente) Escape (portado desde Flash) (fuente) Supersonic (portado desde Flash) (fuente)

Benchmarks: Bunny Mark Starling

Proyectos de la comunidad: Conversor de Flash/ActionScript a StageXL/Dart Framework Rockdot (UI y más)