Starling Deep Dive

STARLING DEEP DIVE

LEE BRIMELOW

Developer Evangelistwww.leebrimelow.com

@leebrimelow

THIBAULT IMBERT

Sr. Product Managerwww.bytearray.org@thibault_imbert

LEE BRIMELOW

Developer Evangelistwww.leebrimelow.com

@leebrimelow

Sparrow is a pure Objective-C library created by Gamua that allows developers to build native iOS games using an API similar to Flash.

Sparrow is a pure Objective-C library created by Gamua that allows developers to build native iOS games using an API similar to Flash.

Starling is based on Sparrow and is a pure AS3 library that mimics the conventional Flash display list and all content is rendered by the GPU.

DANIEL SPERL

Creator of Sparrow and Starlingwww.gamua.com

OFFICIAL ADOBE SUPPORT

EXAMPLE STARLING CODE

EXAMPLE STARLING CODE

import starling.display.Sprite;

EXAMPLE STARLING CODE

import starling.display.Sprite;

var hero:Sprite = new Sprite();

EXAMPLE STARLING CODE

import starling.display.Sprite;

var hero:Sprite = new Sprite();hero.x = 200;

EXAMPLE STARLING CODE

import starling.display.Sprite;

var hero:Sprite = new Sprite();hero.x = 200;hero.y = 200;

EXAMPLE STARLING CODE

import starling.display.Sprite;

var hero:Sprite = new Sprite();hero.x = 200;hero.y = 200;addChild(hero);

EXAMPLE STARLING CODE

STARLING API

STARLING API

STARLING API

STARLING API

STARLING API

STARLING API

STARLING API

WORKING WITH ASSETS

FULL SUPPORT FOR SPRITE SHEETS

TEXTURE ATLASEasily access different textures and animations

myTextureAtlas.getTextures(“fly”);

ADOBE TEXTURE FORMAT

A new compressed texture format created speci"cally for Stage3D

We will be releasing tooling soon for creating ATF textures

DYNAMIC TEXTURE ATLASConverts vector MovieClip to texture atlas at runtime

https://github.com/emibap

PRO TIPPack as many of your graphics into texture atlases as possible to limit the number textures that need to be uploaded to the GPU.

STARLING DISPLAY OBJECTS

STARLING DISPLAY OBJECTS

Quad

STARLING DISPLAY OBJECTS

Quad Image

STARLING DISPLAY OBJECTS

Quad Image Sprite(container)

STARLING DISPLAY OBJECTS

Quad Image Sprite(container)

MovieClip(container)

PRO TIP

Set the blend mode property to BlendMode.NONE on background display objects that don’t require alpha to speed up performance.

WORKING WITH TEXTDisplaying text in Starling is done using the TextField class

WORKING WITH TEXTDisplaying text in Starling is done using the TextField class

True-type fonts

WORKING WITH TEXTDisplaying text in Starling is done using the TextField class

True-type fonts Bitmap fonts

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

private function loop(event:EnterFrameEvent):void

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

private function loop(event:EnterFrameEvent):void{

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

private function loop(event:EnterFrameEvent):void{ trace("Time since last frame: " + event.passedTime);

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

private function loop(event:EnterFrameEvent):void{ trace("Time since last frame: " + event.passedTime); enemy.moveBy(event.passedTime * enemy.velocity);

ANIMATION IN STARLINGThe enter frame event behaves more like a real game timer

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

private function loop(event:EnterFrameEvent):void{ trace("Time since last frame: " + event.passedTime); enemy.moveBy(event.passedTime * enemy.velocity);}

STARLING OPTIMIZATION TIPS

EXPORT A RELEASE BUILD

The speed difference between the debug and release builds in Starling are huge. Don’t make any assumptions on performance until you export a release build.

FLATTEN NON-CHANGING SPRITES

Calling #atten on a sprite is similar to cacheAsBitmap in the regular display list. It reduces the number of draw calls dramatically.

mySprite.flatten();

MAKE CONTAINERS UNTOUCHABLE

If a container and its children do not need to be interactive with touch set its touchable property to false.

container.touchable = false;

USE OBJECT POOLS

pool.getSprite(); pool.returnSprite(s);

MINIMIZE STATE CHANGES

MINIMIZE STATE CHANGES

Starling batches draw calls whenever possible. Changing the state of a display object will force a new draw call to the GPU. Properties that change the state include:

MINIMIZE STATE CHANGES

Starling batches draw calls whenever possible. Changing the state of a display object will force a new draw call to the GPU. Properties that change the state include:

• The texture (textures from the same atlas are "ne)

MINIMIZE STATE CHANGES

Starling batches draw calls whenever possible. Changing the state of a display object will force a new draw call to the GPU. Properties that change the state include:

• The texture (textures from the same atlas are "ne)

• The blendMode of display objects

MINIMIZE STATE CHANGES

Starling batches draw calls whenever possible. Changing the state of a display object will force a new draw call to the GPU. Properties that change the state include:

• The texture (textures from the same atlas are "ne)

• The blendMode of display objects

• The smoothing value of images

MINIMIZE STATE CHANGES

Starling batches draw calls whenever possible. Changing the state of a display object will force a new draw call to the GPU. Properties that change the state include:

• The texture (textures from the same atlas are "ne)

• The blendMode of display objects

• The smoothing value of images

• The repeat mode of textures

MINIMIZE STATE CHANGES

Starling batches draw calls whenever possible. Changing the state of a display object will force a new draw call to the GPU. Properties that change the state include:

• The texture (textures from the same atlas are "ne)

• The blendMode of display objects

• The smoothing value of images

• The repeat mode of textures

• The tinted property of quads

THE QUADBATCH CLASS

THE QUADBATCH CLASS

QuadBatch is a low-level class that Starling uses to batch draw calls. It is lighter weight than a #attened Sprite.

THE QUADBATCH CLASS

QuadBatch is a low-level class that Starling uses to batch draw calls. It is lighter weight than a #attened Sprite.

• All the objects you add must have the same state (i.e. use textures from the same atlas).

THE QUADBATCH CLASS

QuadBatch is a low-level class that Starling uses to batch draw calls. It is lighter weight than a #attened Sprite.

• All the objects you add must have the same state (i.e. use textures from the same atlas).

• You can only add instances of the Image, Quad, or QuadBatch class.

THE QUADBATCH CLASS

QuadBatch is a low-level class that Starling uses to batch draw calls. It is lighter weight than a #attened Sprite.

• All the objects you add must have the same state (i.e. use textures from the same atlas).

• You can only add instances of the Image, Quad, or QuadBatch class.

• It's a one-way road: you can only add objects.

MULTI-SCREEN DEVELOPMENT

USE SEPARATE SET OF HD TEXTURES

USE SEPARATE SET OF HD TEXTURES

SD textureiPhone 3G

USE SEPARATE SET OF HD TEXTURES

SD textureiPhone 3G

HD textureiPhone 4S

CONTENT SCALE FACTOR

var scale:Number = starling.contentScaleFactor;

var texture:Texture = Texture.fromBitmap(bmp, true, false, scale);

Use this value to scale textures appropriately

STARLING EXTENSIONS

wiki.starling-framework.org/extensions/start

PARTICLE SYSTEM

Easily add particle effects to your games

FOXHOLE

UI component set particularly suited for mobile

FRAMEWORKS USING STARLING

CITRUS ENGINE

Platformer game engine built on top of Starling

STARLING PUNK

Framework based on the popular Flash Punk engine

ADOBE NOW SUPPORTS AWAY3D

COMBINING AWAY3D AND STARLING

STARLING MOBILE DEMOS

QUESTIONS?