Starling Deep Dive

120
STARLING DEEP DIVE

Transcript of Starling Deep Dive

Page 1: Starling Deep Dive

STARLING DEEP DIVE

Page 2: Starling Deep Dive
Page 3: Starling Deep Dive

LEE BRIMELOW

Developer Evangelistwww.leebrimelow.com

@leebrimelow

Page 4: Starling Deep Dive

THIBAULT IMBERT

Sr. Product Managerwww.bytearray.org@thibault_imbert

LEE BRIMELOW

Developer Evangelistwww.leebrimelow.com

@leebrimelow

Page 5: Starling Deep Dive
Page 6: Starling Deep Dive

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

Page 7: Starling Deep Dive

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.

Page 8: Starling Deep Dive
Page 9: Starling Deep Dive

DANIEL SPERL

Creator of Sparrow and Starlingwww.gamua.com

Page 10: Starling Deep Dive
Page 11: Starling Deep Dive

OFFICIAL ADOBE SUPPORT

Page 12: Starling Deep Dive
Page 13: Starling Deep Dive

EXAMPLE STARLING CODE

Page 14: Starling Deep Dive

EXAMPLE STARLING CODE

Page 15: Starling Deep Dive

import starling.display.Sprite;

EXAMPLE STARLING CODE

Page 16: Starling Deep Dive

import starling.display.Sprite;

var hero:Sprite = new Sprite();

EXAMPLE STARLING CODE

Page 17: Starling Deep Dive

import starling.display.Sprite;

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

EXAMPLE STARLING CODE

Page 18: Starling Deep Dive

import starling.display.Sprite;

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

EXAMPLE STARLING CODE

Page 19: Starling Deep Dive

import starling.display.Sprite;

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

EXAMPLE STARLING CODE

Page 20: Starling Deep Dive
Page 21: Starling Deep Dive

STARLING API

Page 22: Starling Deep Dive

STARLING API

Page 23: Starling Deep Dive

STARLING API

Page 24: Starling Deep Dive

STARLING API

Page 25: Starling Deep Dive

STARLING API

Page 26: Starling Deep Dive

STARLING API

Page 27: Starling Deep Dive

STARLING API

Page 28: Starling Deep Dive
Page 29: Starling Deep Dive

WORKING WITH ASSETS

Page 30: Starling Deep Dive
Page 31: Starling Deep Dive

FULL SUPPORT FOR SPRITE SHEETS

Page 32: Starling Deep Dive
Page 33: Starling Deep Dive
Page 34: Starling Deep Dive
Page 35: Starling Deep Dive
Page 36: Starling Deep Dive
Page 37: Starling Deep Dive
Page 38: Starling Deep Dive
Page 39: Starling Deep Dive
Page 40: Starling Deep Dive
Page 41: Starling Deep Dive

TEXTURE ATLASEasily access different textures and animations

myTextureAtlas.getTextures(“fly”);

Page 42: Starling Deep Dive
Page 43: Starling Deep Dive

ADOBE TEXTURE FORMAT

A new compressed texture format created speci"cally for Stage3D

We will be releasing tooling soon for creating ATF textures

Page 44: Starling Deep Dive
Page 45: Starling Deep Dive

DYNAMIC TEXTURE ATLASConverts vector MovieClip to texture atlas at runtime

https://github.com/emibap

Page 46: Starling Deep Dive
Page 47: Starling Deep Dive

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.

Page 48: Starling Deep Dive
Page 49: Starling Deep Dive

STARLING DISPLAY OBJECTS

Page 50: Starling Deep Dive

STARLING DISPLAY OBJECTS

Quad

Page 54: Starling Deep Dive
Page 55: Starling Deep Dive

PRO TIP

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

Page 56: Starling Deep Dive
Page 57: Starling Deep Dive

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

Page 58: Starling Deep Dive

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

True-type fonts

Page 59: Starling Deep Dive

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

True-type fonts Bitmap fonts

Page 60: Starling Deep Dive
Page 61: Starling Deep Dive

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

Page 62: Starling Deep Dive

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

Page 63: Starling Deep Dive

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

this.addEventListener(EnterFrameEvent.ENTER_FRAME, loop);

Page 64: Starling Deep Dive

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

Page 65: Starling Deep Dive

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{

Page 66: Starling Deep Dive

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);

Page 67: Starling Deep Dive

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);

Page 68: Starling Deep Dive

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);}

Page 69: Starling Deep Dive
Page 70: Starling Deep Dive

STARLING OPTIMIZATION TIPS

Page 71: Starling Deep Dive
Page 72: Starling Deep Dive

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.

Page 73: Starling Deep Dive
Page 74: Starling Deep Dive

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();

Page 75: Starling Deep Dive
Page 76: Starling Deep Dive

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;

Page 77: Starling Deep Dive
Page 78: Starling Deep Dive

USE OBJECT POOLS

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

Page 79: Starling Deep Dive
Page 80: Starling Deep Dive

MINIMIZE STATE CHANGES

Page 81: Starling Deep Dive

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:

Page 82: Starling Deep Dive

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)

Page 83: Starling Deep Dive

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

Page 84: Starling Deep Dive

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

Page 85: Starling Deep Dive

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

Page 86: Starling Deep Dive

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

Page 87: Starling Deep Dive
Page 88: Starling Deep Dive

THE QUADBATCH CLASS

Page 89: Starling Deep Dive

THE QUADBATCH CLASS

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

Page 90: Starling Deep Dive

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).

Page 91: Starling Deep Dive

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.

Page 92: Starling Deep Dive

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.

Page 93: Starling Deep Dive
Page 94: Starling Deep Dive

MULTI-SCREEN DEVELOPMENT

Page 95: Starling Deep Dive
Page 96: Starling Deep Dive

USE SEPARATE SET OF HD TEXTURES

Page 97: Starling Deep Dive

USE SEPARATE SET OF HD TEXTURES

SD textureiPhone 3G

Page 98: Starling Deep Dive

USE SEPARATE SET OF HD TEXTURES

SD textureiPhone 3G

HD textureiPhone 4S

Page 99: Starling Deep Dive
Page 100: Starling Deep Dive

CONTENT SCALE FACTOR

var scale:Number = starling.contentScaleFactor;

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

Use this value to scale textures appropriately

Page 101: Starling Deep Dive
Page 102: Starling Deep Dive

STARLING EXTENSIONS

wiki.starling-framework.org/extensions/start

Page 103: Starling Deep Dive
Page 104: Starling Deep Dive

PARTICLE SYSTEM

Easily add particle effects to your games

Page 105: Starling Deep Dive
Page 106: Starling Deep Dive

FOXHOLE

UI component set particularly suited for mobile

Page 107: Starling Deep Dive
Page 108: Starling Deep Dive

FRAMEWORKS USING STARLING

Page 109: Starling Deep Dive
Page 110: Starling Deep Dive

CITRUS ENGINE

Platformer game engine built on top of Starling

Page 111: Starling Deep Dive
Page 112: Starling Deep Dive

STARLING PUNK

Framework based on the popular Flash Punk engine

Page 113: Starling Deep Dive
Page 114: Starling Deep Dive

ADOBE NOW SUPPORTS AWAY3D

Page 115: Starling Deep Dive
Page 117: Starling Deep Dive
Page 118: Starling Deep Dive

STARLING MOBILE DEMOS

Page 119: Starling Deep Dive
Page 120: Starling Deep Dive

QUESTIONS?