blocketpc.comSpanish Mobile and Devices Adobe User Group

Raúl JiménezTwitters: @elecash

@teleport@BlocketPc

Mail: elecash@gmail.com

Aplicaciones móviles a 60fps

Teleport.io es un proyecto personal que acabo de lanzar a crowdfunding.

Ayúdame a difundirlo a través de Facebook, Twitter y Google+ y si crees que lo merece... ¡contribuye!

http://www.teleport.iohttp://www.indiegogo.com/teleporthttps://twitter.com/teleporthttp://www.facebook.com/TeleportApphttps://vimeo.com/teleportio

Ayúdame con Teleport.io

HTML5 HA VENIDO PARA QUEDARSE

Adobe <3 HTML5

¿Por qué usar Flash?

- Juegos y apps: Windows, Mac OS, Android, iOS, PlayBook, BB10, etc... (Machinarium)

- Juegos browser AAA: Unreal Engine y Unity to Flash

- Video: progressive download, streaming, P2P

- Igual que antes existía el “Pixel-Perfect”, ahora existen las “Smooth Apps”

El “nuevo” Flash

- Quiero que mi app vuele ¿cómo lo hago?

- Deben correr a 60fps o cercano

- No han de presentar lags (pérdidas de fps) en ningún momento

- Deben ser agradables de usar, que den ganas de tocarla

Smooth Apps

- Adobe donó Flex a Apache y desde entonces no hay un framework de componentes oficial

- Flex Hero no funciona demasiado bien en dispositivos, es demasiado pesado

- AIR y Flash en móviles pueden funcionar a 30fps fácilmente, pero más es complicado

- Podemos desarrollar aplicaciones aceleradas por GPU gracias al 3D y el direct mode

El problema

- Las APIs 3D de Flash son increíblemente veloces

- Existen frameworks de desarrollo de videojuegos 3D y 2D acelerados por GPU

- Pero desarrollar 3D es muy complejo y yo quiero desarrollar aplicaciones!! No juegos!! >:-(

- Tranquilidad, tranquilidad... existen soluciones :D

AS3 y el 3D

- Starling: Framework de desarrollo de videojuegos 2D

http://gamua.com/starling/

- Feathers: Framework y componentes desarrollados sobre Starling

http://feathersui.com/

- Mad Components: Framework de componenteshttp://code.google.com/p/mad-components/

Soluciones en el mercado

- Desarrollar 3D es muy complejo, Starling facilita el desarrollo emulando la API de Flash

- Por ejemplo: flash.display.Sprite pasa a ser starling.display.Sprite

- En el 3D no hay vectores, sólo texturas, así que cambia la forma en que hacemos las cosas

- Hay ventajas y desventajas

Starling: ¿Cómo funciona?

- Subir texturas a la GPU es un proceso muy intensivo

- Debemos ahorrar en subidas a la GPU reutilizando texturas una vez están subidas y empaquetando texturas en una imagen

- No hay API drawing, pero podemos pintar sobre un Sprite de Flash y luego convertirlo en un Bitmap que lo subimos a la GPU

Ejemplo TexturePacker y BMFont

Starling: Las texturas y sus cosas

- Instancia Starling y ya puedes comenzar a usar la API

Starling: Crear una aplicación Starling

Starling.handleLostContext = true;Starling.multitouchEnabled = true;

const MainType:Class = getDefinitionByName("com.blocketpc.MyApp") as Class;

this._starling = new Starling(MainType, this.stage);this._starling.start();

- Al igual que Starling es un proyecto de código abierto

- Se instancia sobre starling.display.Sprite

- Componentes: Screen, Button, Check, List, ProgressBar, Radio, ScrollBar, etc...

- Sistema de inyección de dependencias

- Sistema de temas

- Y mucho más... :)

FeathersUI: Introducción

- ScreenNavigator controla las vistas que son componentes Screen

FeathersUI: Sistema de pantallas

navigator = new ScreenNavigator();addChild(navigator);

var events:Object = {onSelectSession: SESSION_DETAIL_SCREEN};var data:Object = {

dataProvider: XML(dataProvider.section.sessions),originalDPI: originalThemeDPI

};

item = new ScreenNavigatorItem(SessionsScreen, events, data);

navigator.addScreen(SESSIONS_SCREEN, item);navigator.showScreen(SESSIONS_SCREEN);

- Se pueden ejecutar transiciones entre nuestras vistas de ScreenNavigator

FeathersUI: Transiciones entre pantallas

transitionManager = new ScreenSlidingStackTransitionManager(navigator);

transitionManager.duration = 0.4;transitionManager.ease = Cubic.easeOut;

navigator.showScreen(“myScreen”);

Ejemplo:http://feathersui.com/examples/layout-explorer/

- Feathers cuenta con un potente sistema de temas con el que poder personalizar nuestros componentes

FeathersUI: Temas

const isDesktop:Boolean = Mouse.supportsCursor;theme = new MinimalTheme(stage, !isDesktop);const originalThemeDPI:int = theme.originalDPI;

Lista de temas:https://github.com/joshtynjala/feathers-examples/

Teleport Skin:Teleport Demo

- Feathers tiene componentes para prácticamente todo lo que necesitas en un móvil o un Pc

FeathersUI: Componentes

emailButton = new Button();emailButton.onRelease.add(onEmailButton);container.addChild(emailButton);

Demo:http://feathersui.com/examples/components-explorer/

ALGUNOS EJEMPLOS

Aplicación iPad educacionalDonuts Maniac

- Si tu aplicación tiene muchas texturas deberías descartar Starling y Feathers.. por ahora (Workers)

- El control del texto es complejo y FeathersUI ahora no tiene un componente de texto multilínea

- Trabajar con texturas puede resultar tedioso al principio

- Crear un tema es complejo aunque muy potente

FeathersUI: Problemas

- La velocidad a la que se mueve todo, esos 60fps deseados por las “Smooth Apps”

- Escalado automático por DPI

- Componentes muy sólidos y estables en un proyecto que tiene constantes actualizaciones

- Soporte por parte de Adobe al proyecto de Starling y puede que a FeathersUI igual que han hecho con Away3D

FeathersUI: Ventajas

- Reutiliza todas las texturas que puedas con Object Pooling

- Utiliza flatten() para cachear el contenido estático

- Los hijos y eventos se limpian automáticamente al hacer un removeChild

- Simula los eventos de Touch con simulateMultitouch (Ejemplo SimulateMultitouch)

FeathersUI: Consejos 1/3

starling = new Starling();starling.simulateMultitouch = true;

- Las Release Builds pueden duplicar tus fps en comparación a cuando haces un debug

- Utiliza los ActionScript Workers para procesos muy intensivos (Flash Player 11.4 y AIR 3.4)

- Estudia acerca de Native Extensions, lo vas a necesitar en Android/iOS (In-App Purchase, Notifications, etc...)

- Infórmate sobre las Starling Extensionshttp://wiki.starling-framework.org/extensions/start

FeathersUI: Consejos 2/3

- Lee el manual que escribió Thibault Imbert sobre Starling (Gratis!!)

http://shop.oreilly.com/product/0636920024217.do

- Mira los videotutoriales de Hemanth Sharma disponibles gratis en su web

http://www.hsharma.com/tutorials/

- En Active Tuts+ también encontraréis buena información

http://active.tutsplus.com/tutorials/effects/starling-particle...

- Visita los foros de Starling y Feathershttp://forum.starling-framework.org/http://forum.starling-framework.org/forum/feathers

FeathersUI: Consejos 3/3

GRACIAS A TODOS

¿PREGUNTAS?