Going Mobile with AIR+Starling
Download as PPTX, PDF1 like3,405 views
This document provides an overview and lessons learned from real world projects using Adobe AIR and the Starling framework for mobile development. It discusses how AIR allows for faster development across iOS and Android using existing AS3 skills. The state of the AIR ecosystem in 2013 is examined, highlighting mature libraries like Starling, Feathers and Away3D. Tips are provided around tool selection, common issues like touch handling and textures, and best practices for composition, layout and deployment. Real examples demonstrate list rendering and scrolling techniques. Resources for continuing education with Starling are also listed.
![Textures
Sample Code
private var _textures:Dictionary;
..
public function getTexture(name:String):Texture
{
|if (_textures[name] == undefined)
{|
|
var data:Object = _loadedAssets[name];|
|
if (data is Bitmap)|
|_textures[name] = |
Texture.fromBitmap(data as Bitmap, false, false);
|}|
return _textures[name];
}
public function disposeTexture(name:String):void
{
if (_textures[name]) {
Texture(_textures[name]).dispose();
|textures[name] = |
null
|;|](https://image.slidesharecdn.com/goingmobilewithairstarling-131016125954-phpapp01/85/Going-Mobile-with-AIR-Starling-28-320.jpg)
![QA
&
[ Ask me anything ]](https://image.slidesharecdn.com/goingmobilewithairstarling-131016125954-phpapp01/85/Going-Mobile-with-AIR-Starling-36-320.jpg)
Going Mobile with AIR+Starling
- 1. Going Mobile with AIR + Starling Lessons from Real World projects Presented by Amos Laber
- 2. About Me Amos Laber Game Developer, Coder, Architect Background in C++, Console games, 3D Engines. Later: Flex, AS3, Casual and 2D Games. Blog: www.flexwiz.net
- 3. Content and Scope The state of AIR as a mobile ecosystem (2013) Practical use of Starling, Feathers and ANE Tips, Common Problems and Practices
- 4. Demo
- 5. AIR vs. Native Trivial: Need iOS and Anrdoid at the same time AIR = Shorter timelines (Rapid development) Leverage existing knowledge and code - Faster to implement Personal preference: AS3 over Java or Obj-C Captive Runtime: App is same as native
- 6. The AIR Ecosystem AIR 3.5 (FP 11.5) made a big shift from enterprise into mobile (without Flex). A new generation of AS3 frameworks has reached maturity Adobe Gaming SDK: Starling, Feathers, Away3D Also Flare3D, Citrus, Nape, DragonBones New Tools: ASC2, Scout, FlashBuilder 4.7
- 7. Production Goals Get stuff done fast. But no cutting corners! Spend time on the game (creative), not on boilerplate code. UI Elements tend to be the #1 time consuming - try to minimize and simplify them.
- 8. Choosing Tools Code and Art Toolchain Glyph Designer
- 10. Extensions (ANEs) Services: Game Center In App Payments:
- 11. Game Framework Do we need one? Game Framework (or Engine) will provide features and classes that are commonly used in games / apps. It takes time to learn how to efficiently use one and it creates another dependency I decided to roll my own.
- 12. The Parallel Universe Starling forms a parallel universe where flash display list is completely hardware accelerated.
- 13. Migrating to Starling Starling vs. 'classic' Flash Rendering: CPU flash.display.* Vector fonts |Flash| ||| Rendering: GPU (H. Accel OpenGL) starling.display.* |Starling (Stage3D)| fonts Bitmap Vector Shapes N/A (* Quad only) Bitmap / BitmapData Image / Texture Sprite and DisplayObject Same flash.events starling.events (faster)
- 14. Starling Basics Compose the display list the same way as in flash. Layering Sprites, images and buttons Compose your views/ screens Alpha blending and hierarchy works the same way as in Flash.
- 15. Starling App Setup Load all assets (mostly bitmaps) on initialize. Nearly all display objects are images Best is to pack them up into sprite sheets Determine screen size with stage_resize event. Use it across the app for layouts.
- 16. Sprite Sheets
- 17. UI Setup - Feathers Decide when to use custom UI, case by case Prepare a bitmap font and skin elements (Bitmap font text field is provided) Works best with a theme
- 18. Integrating ANEs Drop into project and update the manifest /permissions Watch out for default mode - should not throw errors. Well documented and supported ANE are a better choice. Don't waste time on building them - too many dependencies (iOS and Android ver, SDK compatibility) Testing is only done on the device. They're native. Recommended: MilkMan and FreshPlanet
- 20. Example: List and Item Renderer import feathers.controls.List; var list:List = new List(); list.itemRendererType= PetItemRenderer; list.dataProvider = petList; list.layout = new TiledColumnsLayout(); list.scrollerProperties.scrollBarDisplayMode = SCROLL_BAR_DISPLAY_MODE_FIXED;
- 21. Example: The Item Renderer class ItemVO { name:String; image:Texture; locked:Boolean; } protected override function draw():void { var dataInvalid:Boolean = this.isInvalid(INVALIDATION_FLAG_DATA); if (dataInvalid) { |updateImage(data.image);| |label.text = data.name;| |label.visible = !data.locked;| |image.blendMode = data.locked? BlendMode.ERASE :|
- 22. Composing Tips Alpha and PNG w/Alpha works best - don't bake it Use Tile Patterns with TiledImage. Stretch elements with Slice9Image /Slice3Image. Use scrollRect for simple masking and smooth scrolling
- 23. Example: Scroll and Mask Castle gate was masked with scrollRect, animated by tweening scrollRect.y + +
- 24. Common issues to watch for
- 25. Touch AIR SDK own touch handling is not very useful 3rd party libraries can fill in the gap Gestouch is my recommended library: Multitouch gestures for Starling or classic flash http://github.com/fljot/Gestouch
- 26. Textures Things to know GPU memory on devices is limited. iPhone 3GS has 24 MB Standalone textures are rounded up to power of 2 size (e.g. 1024x1024 pixels). Once created, the texture is uploaded to GPU. When maxed out, the OS will close the app without warning, exception or stack trace.
- 27. Textures Best Preactices Create the textures on demand - not when the Assets are loaded. Make sure to release with texture.dispose() when removed from stage. Pack everything to sprite sheets! We use TexturePacker Have a central asset manager to hold textures
- 28. Textures Sample Code private var _textures:Dictionary; .. public function getTexture(name:String):Texture { |if (_textures[name] == undefined) {| | var data:Object = _loadedAssets[name];| | if (data is Bitmap)| |_textures[name] = | Texture.fromBitmap(data as Bitmap, false, false); |}| return _textures[name]; } public function disposeTexture(name:String):void { if (_textures[name]) { Texture(_textures[name]).dispose(); |textures[name] = | null |;|
- 29. Screen Size and Layout Avoid hardcoded pixel sizes. Use relative align or percentage iPad Retina support No need to duplicate the assets (x1, x2, x4...) Selective scale Test layout in different screen sizes on simulator
- 31. Deployment Main Markets Discoverability, Promotion Apple App Store
- 32. Promote you App For Zero Cost Create a Facebook fan page. Create a Twitter account and tweet frequently. Make a YouTube video with actual gameplay footage. Prepare a press kit with screenshots and marketting blurb and send it for review to selected web sites.
- 33. Tracking Data Weekly Downloads iOS Android Chart was not exported from SlideRocket
- 34. Takedown Is Starling Right for you? AIR proved a viable solution for mobile Starling is now a Solid and Mature framework Developers can get stuff done faster
- 35. Resources Starling Wiki: wiki.starling-framework.org/ Starling Forum: forum.starling-framework.org/ gotoAndLearn: My Blog: www.flexwiz.net gotoandlearn.com Flash Daily:
- 36. QA & [ Ask me anything ]