Taller subflash 2012

download Taller subflash 2012

If you can't read please download the document

description

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

Transcript of Taller subflash 2012

2. Espaoles...FLASH HA MUERTO(bueno en realidad slo en el navegador, y a decir verdad, slo en mviles, pero da igual, mola un montn) 3. Chan! Chan! Chaaaaaaaaaan!! 4. No, pero casi...FLASH HA MUERTO(bueno en realidad slo en el navegador, y adecir verdad, slo en mviles, pero da igual,mola un montn) 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 exista el Pixel-Perfect, ahora existenlas Smooth Apps 6. Smooth Apps- Deben correr a 60fps o cercano- No han de presentar lags (prdidas de fps) en ningnmomento- Deben ser agradables de usar, que den ganas detocarla 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 mviles pueden funcionar a 30fpsfcilmente, pero ms es complicado- Podemos desarrollar aplicaciones aceleradas por GPUgracias al 3D y el direct mode 8. AS3 y el 3D- Las APIs 3D de Flash son increblemente 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. 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. Starling: Cmo 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, slo texturas, as que cambiala 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 reutilizandotexturas una vez estn 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. Starling: Crear una aplicacin 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: Introduccin- Al igual que Starling es un proyecto de cdigo abierto- Se instancia sobre starling.display.Sprite- Componentes: Screen, Button, Check, List,ProgressBar, Radio, ScrollBar, etc...- Sistema de inyeccin de dependencias- Sistema de temas- Y mucho ms... :) 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. Foxhole: Transiciones entre pantallas- Se pueden ejecutar transiciones entre nuestras vistasde ScreenNavigatortransitionManager = newScreenSlidingStackTransitionManager(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 elque poder personalizar nuestros componentesconst 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 prcticamente todo loque necesitas en un mvil o un PcemailButton = new Button();emailButton.onRelease.add(onEmailButton);container.addChild(emailButton);Componentes:http://flashtoolbox.com/foxhole-starling/examples/kitchen-sink/ 18. Foxhole: Creacin 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. EJEMPLO DE UNAAPLICACINSUBFLASH 20. Foxhole: Problemas- Si tu aplicacin tiene muchas texturas deberasdescartar Starling y Foxhole.. por ahora (Workers)- El control del texto es complejo y Foxhole ahora notiene un componente de texto multilnea- 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 60fpsdeseados por las Smooth Apps- Escalado automtico por DPI- Componentes muy slidos 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. Foxhole: Consejos 1/3- Reutiliza todas las texturas que puedas con ObjectPooling (Ejemplo AssetLibrary)- Utiliza flatten() para cachear el contenido esttico- Los hijos y eventos se limpian automticamente alhacer 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 encomparacin 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...)- Infrmate sobre las Starling Extensionshttp://wiki.starling-framework.org/extensions/start 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+ tambin encontraris buenainformacinhttp://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. GRACIAS A TODOS PREGUNTAS?