Going Mobile with AIR+Starling

3,288 views

Published on

Practical approach to cross platform mobile games.

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

No Downloads
Views
Total views
3,288
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Going Mobile with AIR+Starling

  1. 1. Going Mobile with AIR + Starling Lessons from Real World projects Presented by Amos Laber
  2. 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. 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. 4. Demo
  5. 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. 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. 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. 8. Choosing Tools Code and Art Toolchain Glyph Designer
  9. 9. Choosing Libraries Frameworks Libraries Gestouch
  10. 10. Extensions (ANEs) Services: Game Center In App Payments:
  11. 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. 12. The Parallel Universe Starling forms a parallel universe where flash display list is completely hardware accelerated.
  13. 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. 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. 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. 16. Sprite Sheets
  17. 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. 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
  19. 19. 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;
  20. 20. 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 :|
  21. 21. 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
  22. 22. Example: Scroll and Mask Castle gate was masked with scrollRect, animated by tweening scrollRect.y + +
  23. 23. Common issues to watch for
  24. 24. 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
  25. 25. 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.
  26. 26. 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
  27. 27. 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 |;|
  28. 28. 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
  29. 29. and Something extra
  30. 30. Deployment Main Markets Discoverability, Promotion Apple App Store
  31. 31. 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.
  32. 32. Tracking Data Weekly Downloads iOS Android Chart was not exported from SlideRocket
  33. 33. 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
  34. 34. Resources Starling Wiki: wiki.starling-framework.org/ Starling Forum: forum.starling-framework.org/ gotoAndLearn: My Blog: www.flexwiz.net gotoandlearn.com Flash Daily:
  35. 35. QA & [ Ask me anything ]
  36. 36. Thank You @amosLaber note@amosl.com

×