Aplicaciones móviles a 60fpsblocketpc.comSpanish Mobile and Devices Adobe User GroupRaúl JiménezTwitters: @elecash        ...
Españoles...          FLASH HA           MUERTO(bueno en realidad sólo en el navegador, y a decir verdad, sólo en móviles,...
Chan! Chan! Chaaaaaaaaaan!!
No, pero casi...          FLASH HA           MUERTO(bueno en realidad sólo en el navegador, y adecir verdad, sólo en móvil...
La realidad- Adobe ha cambiado nuestro rol como programadoresAS3- Ahora hay que programar juegos para dispositivos yvideo-...
Smooth Apps- Deben correr a 60fps o cercano- No han de presentar lags (pérdidas de fps) en ningúnmomento- Deben ser agrada...
El problema- Adobe donó Flex a Apache y desde entonces no hay unframework de componentes oficial- Flex Hero no funciona de...
AS3 y el 3D- Las APIs 3D de Flash son increíblemente veloces- Existen frameworks de desarrollo de videojuegos 3D y2D acele...
Soluciones en el mercado- Starling: Framework de desarrollo de videojuegos 2Dhttp://gamua.com/starling/- Foxhole: Framewor...
Starling: ¿Cómo funciona?- Desarrollar 3D es muy complejo, Starling facilita eldesarrollo emulando la API de Flash- Por ej...
Starling: Las texturas y sus cosas- Subir texturas a la GPU es un proceso muy intensivo- Debemos ahorrar en subidas a la G...
Starling: Crear una aplicación Starling- Instancia Starling y ya puedes comenzar a usar la API Starling.handleLostContext ...
Foxhole: Introducción- Al igual que Starling es un proyecto de código abierto- Se instancia sobre starling.display.Sprite-...
Foxhole: Sistema de pantallas- ScreenNavigator controla las vistas que soncomponentes Screen navigator = new ScreenNavigat...
Foxhole: Transiciones entre pantallas- Se pueden ejecutar transiciones entre nuestras vistasde ScreenNavigator  transition...
Foxhole: Temas- Foxhole cuenta con un potente sistema de temas con elque poder personalizar nuestros componentes  const is...
Foxhole: Componentes- Foxhole tiene componentes para prácticamente todo loque necesitas en un móvil o un Pc  emailButton =...
Foxhole: Creación de componentes- Siempre puedes hacerte tus componentes si no hayalguno disponible description = new Text...
EJEMPLO DE UNA  APLICACIÓN  SUBFLASH
Foxhole: Problemas- Si tu aplicación tiene muchas texturas deberíasdescartar Starling y Foxhole.. por ahora (Workers)- El ...
Foxhole: Ventajas- La velocidad a la que se mueve todo, esos 60fpsdeseados por las “Smooth Apps”- Escalado automático por ...
Foxhole: Consejos 1/3- Reutiliza todas las texturas que puedas con ObjectPooling (Ejemplo AssetLibrary)- Utiliza flatten()...
Foxhole: Consejos 2/3- Las Release Builds pueden duplicar tus fps encomparación a cuando haces un debug- Utiliza los Actio...
Foxhole: Consejos 3/3- Lee el manual que escribió Thibault Imbert sobreStarling (Gratis!!)http://shop.oreilly.com/product/...
GRACIAS A TODOS ¿PREGUNTAS?
Upcoming SlideShare
Loading in...5
×

Taller subflash 2012

3,127

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,127
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Taller subflash 2012

  1. 1. Aplicaciones móviles a 60fpsblocketpc.comSpanish Mobile and Devices Adobe User GroupRaúl JiménezTwitters: @elecash @BlocketPcMails: elecash@gmail.com info@blocketpc.com
  2. 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. 3. Chan! Chan! Chaaaaaaaaaan!!
  4. 4. No, pero casi... FLASH HA MUERTO(bueno en realidad sólo en el navegador, y adecir verdad, sólo en móviles, pero da igual, mola un montón)
  5. 5. La realidad- Adobe ha cambiado nuestro rol como programadoresAS3- Ahora hay que programar juegos para dispositivos yvideo- Sigue habiendo una gran necesidad de aplicaciones- Igual que antes existía el “Pixel-Perfect”, ahora existenlas “Smooth Apps”
  6. 6. Smooth Apps- Deben correr a 60fps o cercano- No han de presentar lags (pérdidas de fps) en ningúnmomento- Deben ser agradables de usar, que den ganas detocarla
  7. 7. El problema- Adobe donó Flex a Apache y desde entonces no hay unframework de componentes oficial- Flex Hero no funciona demasiado bien en dispositivos,es demasiado pesado- AIR y Flash en móviles pueden funcionar a 30fpsfácilmente, pero más es complicado- Podemos desarrollar aplicaciones aceleradas por GPUgracias al 3D y el direct mode
  8. 8. AS3 y el 3D- Las APIs 3D de Flash son increíblemente veloces- Existen frameworks de desarrollo de videojuegos 3D y2D acelerados por GPU- Pero desarrollar 3D es muy complejo y yo quierodesarrollar aplicaciones!! No juegos!! >:-(- Tranquilidad, tranquilidad... existen soluciones :D
  9. 9. Soluciones en el mercado- Starling: Framework de desarrollo de videojuegos 2Dhttp://gamua.com/starling/- Foxhole: Framework y componentes desarrolladossobre Starlinghttps://github.com/joshtynjala/foxhole-starling/- Mad Components: Framework de componenteshttp://code.google.com/p/mad-components/
  10. 10. Starling: ¿Cómo funciona?- Desarrollar 3D es muy complejo, Starling facilita eldesarrollo emulando la API de Flash- Por ejemplo: flash.display.Sprite pasa a serstarling.display.Sprite- En el 3D no hay vectores, sólo texturas, así que cambiala forma en que hacemos las cosas- Hay ventajas y desventajas
  11. 11. Starling: Las texturas y sus cosas- Subir texturas a la GPU es un proceso muy intensivo- Debemos ahorrar en subidas a la GPU reutilizandotexturas una vez están subidas y empaquetando texturasen una imagen- No hay API drawing, pero podemos pintar sobre unSprite de Flash y luego convertirlo en un Bitmap que losubimos a la GPUEjemplo TexturePacker y BMFont
  12. 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. 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. 14. Foxhole: Sistema de pantallas- ScreenNavigator controla las vistas que soncomponentes 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. 15. Foxhole: Transiciones entre pantallas- Se pueden ejecutar transiciones entre nuestras vistasde 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. 16. Foxhole: Temas- Foxhole cuenta con un potente sistema de temas con elque 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. 17. Foxhole: Componentes- Foxhole tiene componentes para prácticamente todo loque 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. 18. Foxhole: Creación de componentes- Siempre puedes hacerte tus componentes si no hayalguno disponible description = new TextArea(); description.text = this.data.description; container.addChild(description);Ejemplo TouchableImage
  19. 19. EJEMPLO DE UNA APLICACIÓN SUBFLASH
  20. 20. Foxhole: Problemas- Si tu aplicación tiene muchas texturas deberíasdescartar Starling y Foxhole.. por ahora (Workers)- El control del texto es complejo y Foxhole ahora notiene un componente de texto multilínea- Trabajar con texturas puede resultar tedioso al principio- Crear un tema es complejo aunque muy potente
  21. 21. Foxhole: Ventajas- La velocidad a la que se mueve todo, esos 60fpsdeseados por las “Smooth Apps”- Escalado automático por DPI- Componentes muy sólidos y estables en un proyectoque tiene constantes actualizaciones- Soporte por parte de Adobe al proyecto de Starling ypuede que a Foxhole igual que han hecho con Away3D
  22. 22. Foxhole: Consejos 1/3- Reutiliza todas las texturas que puedas con ObjectPooling (Ejemplo AssetLibrary)- Utiliza flatten() para cachear el contenido estático- Los hijos y eventos se limpian automáticamente alhacer un removeChild- Simula los eventos de Touch con simulateMultitouch(Ejemplo SimulateMultitouch) starling = new Starling(); starling.simulateMultitouch = true;
  23. 23. Foxhole: Consejos 2/3- Las Release Builds pueden duplicar tus fps encomparación a cuando haces un debug- Utiliza los ActionScript Workers para procesos muyintensivos (Flash Player 11.4 y AIR 3.4)- Estudia acerca de Native Extensions, lo vas a necesitaren Android/iOS (In-App Purchase, Notifications, etc...)- Infórmate sobre las Starling Extensionshttp://wiki.starling-framework.org/extensions/start
  24. 24. Foxhole: Consejos 3/3- Lee el manual que escribió Thibault Imbert sobreStarling (Gratis!!)http://shop.oreilly.com/product/0636920024217.do- Mira los videotutoriales de Hemanth Sharmadisponibles gratis en su webhttp://www.hsharma.com/tutorials/- En Active Tuts+ también encontraréis buenainformaciónhttp://active.tutsplus.com/tutorials/effects/starling-particle...- Visita regularmente los foros de Starling y Foxholehttp://forum.starling-framework.org/http://forum.starling-framework.org/forum/foxhole
  25. 25. GRACIAS A TODOS ¿PREGUNTAS?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×