Whymca 2012: Iuppla, a Starling game for kids (Flash for mobile & TVs)
Going Mobile with AIR+Starling
-
Upload
amos-laber -
Category
Technology
-
view
2.599 -
download
3
description
Transcript of Going Mobile with AIR+Starling
![Page 1: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/1.jpg)
Going Mobile with AIR + Starling
Lessons from Real World projects
Presented by Amos Laber
![Page 2: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/2.jpg)
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
![Page 3: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/3.jpg)
Content and Scope
The state of AIR as a mobile ecosystem (2013)
Practical use of Starling, Feathers and ANE
Tips, Common Problems and Practices
![Page 4: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/4.jpg)
Demo
![Page 5: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/5.jpg)
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)
![Page 6: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/6.jpg)
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
![Page 7: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/7.jpg)
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.
![Page 8: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/8.jpg)
Choosing ToolsCode and Art Toolchain
Glyph Designer
![Page 9: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/9.jpg)
Choosing Libraries
Frameworks
Libraries
Gestouch
![Page 10: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/10.jpg)
Extensions (ANEs)
Services:
In App Payments:
Game Center
![Page 11: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/11.jpg)
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.
![Page 12: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/12.jpg)
The Parallel Universe
Starling forms a parallel universe where flash display list is completely hardware accelerated.
![Page 13: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/13.jpg)
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
![Page 14: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/14.jpg)
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
![Page 15: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/15.jpg)
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.
![Page 16: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/16.jpg)
Sprite Sheets
![Page 17: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/17.jpg)
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
![Page 18: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/18.jpg)
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.
![Page 19: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/19.jpg)
![Page 20: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/20.jpg)
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;
![Page 21: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/21.jpg)
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; }
![Page 22: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/22.jpg)
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.
![Page 23: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/23.jpg)
Example:
Castle gate was masked with scrollRect,
Scroll and Mask
+ +
animated by tweening scrollRect.y
![Page 24: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/24.jpg)
Common issues to watch for
![Page 25: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/25.jpg)
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
![Page 26: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/26.jpg)
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
![Page 27: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/27.jpg)
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
![Page 28: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/28.jpg)
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
![Page 29: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/29.jpg)
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...)
![Page 30: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/30.jpg)
and Something
extra
![Page 31: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/31.jpg)
Deployment
Apple App Store
Main MarketsDiscoverability, Promotion
![Page 32: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/32.jpg)
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.
![Page 33: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/33.jpg)
Tracking Data
Chart was not exported from SlideRocket
Weekly Downloads
iOS
Android
![Page 34: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/34.jpg)
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?
![Page 35: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/35.jpg)
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
![Page 36: Going Mobile with AIR+Starling](https://reader036.fdocuments.in/reader036/viewer/2022062513/554d2956b4c905ca208b5162/html5/thumbnails/36.jpg)
Q&A[ Ask me anything ]