Diapositivas de la charla "Aplicaciones móviles a 60fps" de Talleres Subflash 2012.

1. Aplicaciones móviles a 60fps
blocketpc.com
Spanish Mobile and Devices Adobe User Group
Raúl Jiménez
Twitters: @elecash
@BlocketPc
Mails: elecash@gmail.com
info@blocketpc.com

2. Españoles...
FLASH HA
MUERTO
(bueno en realidad sólo en el navegador, y a decir verdad, sólo en móviles, pero da igual, mola un montón)

3. Chan! Chan! Chaaaaaaaaaan!!

4. No, pero casi...
FLASH HA
MUERTO
(bueno en realidad sólo en el navegador, y a
decir verdad, sólo en móviles, pero da igual,
mola un montón)

5. La realidad
- Adobe ha cambiado nuestro rol como programadores
AS3
- Ahora hay que programar juegos para dispositivos y
video
- Sigue habiendo una gran necesidad de aplicaciones
- Igual que antes existía el “Pixel-Perfect”, ahora existen
las “Smooth Apps”

6. Smooth Apps
- 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

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

8. AS3 y el 3D
- 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

9. Soluciones en el mercado
- Starling: Framework de desarrollo de videojuegos 2D
http://gamua.com/starling/
- Foxhole: Framework y componentes desarrollados
sobre Starling
https://github.com/joshtynjala/foxhole-starling/
- Mad Components: Framework de componentes
http://code.google.com/p/mad-components/

10. Starling: ¿Cómo funciona?
- 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

11. Starling: Las texturas y sus cosas
- 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

12. Starling: Crear una aplicación Starling
- Instancia Starling y ya puedes comenzar a usar la API
Starling.handleLostContext = true;
Starling.multitouchEnabled = true;
const MainType:Class =
getDefinitionByName("com.blocketpc.subflash.Subfla
shApp") as Class;
this._starling = new Starling(MainType,
this.stage);
this._starling.start();

13. Foxhole: Introducción
- 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... :)

14. Foxhole: Sistema de pantallas
- ScreenNavigator controla las vistas que son
componentes Screen
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);

15. Foxhole: Transiciones entre pantallas
- Se pueden ejecutar transiciones entre nuestras vistas
de ScreenNavigator
transitionManager = new
ScreenSlidingStackTransitionManager(navigator);
transitionManager.duration = 0.4;
transitionManager.ease = Cubic.easeOut;
navigator.showScreen(“myScreen”);
Ejemplo:
http://flashtoolbox.com/foxhole-starling/examples/layout-explorer/

16. Foxhole: Temas
- Foxhole cuenta con un potente sistema de temas con el
que poder personalizar nuestros componentes
const isDesktop:Boolean = Mouse.supportsCursor;
theme = new MinimalTheme(stage, !isDesktop);
const originalThemeDPI:int = theme.originalDPI;
Tema 1:
http://flashtoolbox.com/foxhole-starling/examples/layout-explorer/
Tema 2:
http://flashtoolbox.com/foxhole-starling/examples/kitchen-sink/

17. Foxhole: Componentes
- Foxhole tiene componentes para prácticamente todo lo
que necesitas en un móvil o un Pc
emailButton = new Button();
emailButton.onRelease.add(onEmailButton);
container.addChild(emailButton);
Componentes:
http://flashtoolbox.com/foxhole-starling/examples/kitchen-sink/

18. Foxhole: Creación de componentes
- Siempre puedes hacerte tus componentes si no hay
alguno disponible
description = new TextArea();
description.text = this.data.description;
container.addChild(description);
Ejemplo TouchableImage

19. EJEMPLO DE UNA
APLICACIÓN
SUBFLASH

20. Foxhole: Problemas
- Si tu aplicación tiene muchas texturas deberías
descartar Starling y Foxhole.. por ahora (Workers)
- El control del texto es complejo y Foxhole 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

21. Foxhole: Ventajas
- 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 Foxhole igual que han hecho con Away3D

22. Foxhole: Consejos 1/3
- Reutiliza todas las texturas que puedas con Object
Pooling (Ejemplo AssetLibrary)
- 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)
starling = new Starling();
starling.simulateMultitouch = true;

23. Foxhole: Consejos 2/3
- 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 Extensions
http://wiki.starling-framework.org/extensions/start

24. Foxhole: Consejos 3/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 regularmente los foros de Starling y Foxhole
http://forum.starling-framework.org/
http://forum.starling-framework.org/forum/foxhole

25. GRACIAS A TODOS
¿PREGUNTAS?