Going Mobile with AIR+Starling
-
Upload
amos-laber -
Category
Technology
-
view
2.599 -
download
3
description
Transcript of Going Mobile with AIR+Starling
Going Mobile with AIR + Starling
Lessons from Real World projects
Presented by Amos Laber
About Me
Game Developer, Coder, Architect
Background in C++, Console games, 3D Engines. Later: Flex, AS3, Casual and 2D Games.
Blog: www.flexwiz.net
Amos Laber
Content and Scope
The state of AIR as a mobile ecosystem (2013)
Practical use of Starling, Feathers and ANE
Tips, Common Problems and Practices
Demo
AIR vs. Native
Leverage existing knowledge and code - Faster to implement
Personal preference: AS3 over Java or Obj-C
Captive Runtime: App is same as native
Trivial: Need iOS and Anrdoid at the same time
AIR = Shorter timelines (Rapid development)
The AIR Ecosystem
AIR 3.5 (FP 11.5) made a big shift from enterprise into mobile (without Flex).
New Tools: ASC2, Scout, FlashBuilder 4.7
Adobe Gaming SDK: Starling, Feathers, Away3D
Also Flare3D, Citrus, Nape, DragonBones
A new generation of AS3 frameworks has reached maturity
Production Goals
Spend time on the game (creative),
UI Elements tend to be the #1 time consuming
Get stuff done fast. But no cutting corners!
not on boilerplate code.
- try to minimize and simplify them.
Choosing ToolsCode and Art Toolchain
Glyph Designer
Choosing Libraries
Frameworks
Libraries
Gestouch
Extensions (ANEs)
Services:
In App Payments:
Game Center
Game Framework
Game Framework (or Engine) will provide features and classes that are commonly used in games / apps.
Do we need one?
It takes time to learn how to efficiently use one and it creates another dependency
I decided to roll my own.
The Parallel Universe
Starling forms a parallel universe where flash display list is completely hardware accelerated.
Migrating to Starling
|Flash| ||| |Starling (Stage3D)|
Starling vs. 'classic' Flash
flash.display.* starling.display.*
Vector fonts Bitmap fonts
Rendering: GPU (H. Accel OpenGL)Rendering: CPU
Vector Shapes N/A (* Quad only)
Image / TextureBitmap / BitmapData
SameSprite and DisplayObject
starling.events (faster)flash.events
Starling Basics
Compose the display list the same way as in flash.
Layering Sprites, images and buttons
Alpha blending and hierarchy works the same way as in Flash.
Compose your views/ screens
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.
Sprite Sheets
UI Setup - Feathers
Prepare a bitmap font and skin elements(Bitmap font text field is provided)
Decide when to use custom UI, case by case
Works best with a theme
Integrating ANEs
Watch out for default mode - should not throw errors.
Drop into project and update the manifest /permissions
Well documented and supported ANE are a better choice.
Recommended: MilkMan and FreshPlanet
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.
Example:List and Item Renderer
list.layout = new TiledColumnsLayout();list.scrollerProperties.scrollBarDisplayMode = SCROLL_BAR_DISPLAY_MODE_FIXED;
var list:List = new List();list.itemRendererType= PetItemRenderer;list.dataProvider = petList;
import feathers.controls.List;
Example:The Item Renderer
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 :|
| | |BlendMode.NORMAL;| }}
class ItemVO { name:String; image:Texture; locked:Boolean; }
Composing Tips
Alpha and PNG w/Alpha works best - don't bake it
Stretch elements with Slice9Image /Slice3Image.
Use scrollRect for simple masking and smooth scrolling
Use Tile Patterns with TiledImage.
Example:
Castle gate was masked with scrollRect,
Scroll and Mask
+ +
animated by tweening scrollRect.y
Common issues to watch for
Touch
AIR SDK own touch handling is not very useful3rd party libraries can fill in the gap
Gestouch is my recommended library:Multitouch gestures for Starling or classic flash
http://github.com/fljot/Gestouch
Textures
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.
Things to know
Textures
Make sure to release with texture.dispose() when removed from stage.
Create the textures on demand - not when the Assets are loaded.
Pack everything to sprite sheets! We use TexturePacker
Best Preactices
Have a central asset manager to hold 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 |;| delete _textures[name]; }}
Textures
Screen Size and Layout
iPad Retina support -
Avoid hardcoded pixel sizes. Use relative align or percentage
Test layout in different screen sizes on simulator
Selective scale
No need to duplicate the assets (x1, x2, x4...)
and Something
extra
Deployment
Apple App Store
Main MarketsDiscoverability, Promotion
Promote you AppFor 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.
Tracking Data
Chart was not exported from SlideRocket
Weekly Downloads
iOS
Android
Takedown
AIR proved a viable solution for mobile
Starling is now a Solid and Mature framework
Developers can get stuff done faster
Is Starling Right for you?
Resources
Starling Wiki:wiki.starling-framework.org/
Starling Forum:forum.starling-framework.org/
gotoAndLearn:gotoandlearn.com
Flash Daily:
| | flashdaily.net
My Blog: www.flexwiz.net
Q&A[ Ask me anything ]
Thank You@amosLaber