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

note@amosl.com