Starling Insider Tips

Transcription

1 Daniel Sperl Starling Insider Tips Consistent Game Development across all Platforms

2 About me Daniel Sperl studied Media Technology and -Design at the Upper Austria University of Applied Sciences worked 6 years as game developer at funworld (casual games, using C# and Flash) Co-Founded Gamua 2012

3 About me play them on funwin.com

4 About me Sparrow Framework Starling Framework

5 Starling - Overview

6 What is Starling? A pure AS3 library for Adobe Flash Recreates the display list architecture on the GPU (through Stage3D) Deploy to: Browser / Desktop / ios / Android A very talented bird, if I may say so.

7 Who uses Starling? Angry Birds (Rovio) Ruby Blast (Zynga) Rivers of Olympus Stephanie the Frog Winter on Whale Island Spaced Away

8 Architecture Starling Stage3D OpenGL ES - DirectX GPU

9 In a Nutshell Classic Flash: Starling: import flash.display.sprite; var sprite:sprite = new Sprite(); sprite.x = 50; sprite.y = 30; addchild(sprite); import starling.display.sprite; var sprite:sprite = new Sprite(); sprite.x = 50; sprite.y = 30; addchild(sprite); Find the difference!

10 In a Nutshell BitmapData Texture Bitmap Image // create a Texture object out of an embedded bitmap var bitmap:bitmap = new EmbeddedBitmap(); var texture:texture = Texture.fromBitmap(bitmap); // create an Image object out of the Texture var image:image = new Image(texture); // set the properties image.x = 300; image.y = 150; // display it addchild(image);

11 Usage Tips

12 Release Build When using Starling, Performance is much (!) faster when using Release Builds Always use it when you test performance

13 Pivot Point Rotate an object around its center

14 Pivot Point Rotate an object around its center

15 Pivot Point Classic Flash: var image:image = new Image(texture); image.x = -image.width / 2; image.y = -image.height / 2; var sprite:sprite = new Sprite(); sprite.addchild(image); Starling: var image:image = new Image(texture); image.pivotx = image.width / 2; image.pivoty = image.height / 2;

16 Passed Time EnterFrameEvent shows time that has passed since the last frame addeventlistener(event.enter_frame, onenterframe); function onenterframe(event:enterframeevent):void { trace(event.passedtime); } function onenterframe(event:event, passedtime:number):void { trace(passedtime); }

17 Statistics Display starling.showstats = true; Shows: The Current Frames per Second The Number of Draw Calls The Memory Consumption (MB)

18 Minimize Draw Calls Starling batches DisplayObjects When a State-Change occurs, it draws a batch The less Draw Calls, the better Visible in the StatsDisplay

19 What makes up a State? The texture The blendmode The smoothing value of images The repeat mode of textures The tinted property of quads

20 The Painter s Algorithm

21 The Painter s Algorithm 2 States 6 Draw Calls

22 The Painter s Algorithm 2 States 2 Draw Calls

23 Texture Atlas Textures from one Atlas do not cause a State Change Saves memory Tools: Flash CS 6 TexturePacker var texture:texture = atlas.gettexture("bird"); var image:image = new Image(texture);

24 Texture Atlas

25 Bitmap Fonts Can be created very quickly Required Texture Memory: constant (only Font Texture) Tools: GlyphDesigner (Mac) Bitmap Font Generator (Win)

26 Bitmap Fonts

27 Flattened Sprites Somewhat similar to cacheasbitmap Caches CPU-intensive operations var sprite:sprite = new Sprite(); sprite.addchild(...); // add objects sprite.flatten(); It s Voodoo Magic! Great for static content

28 Multiple Resolutions Will look familiar for ios developers: contentscalefactor scalefactor = 2 width = 200 scalefactor = 1 width = px 400px

29 Enhanced Events Automatic Event Pooling Data Property Optional Listener Arguments // new syntax: dispatcheventwith(event.triggered, true, "optionaldata"); // equivalent to: var event:event = new Event(Event.TRIGGERED, true); event.data = "optionaldata"; dispatchevent(event); // listeners may look like that function onevent():void; function onevent(event:event):void; function onevent(event:event, data:string):void;

30 Particle System Great Technique for Special Effects Design them with ParticleDesigner from 71squared (Mac) Or with an Online Editor built with Starling

31 Particle System

32 Custom Display Objects Write your own render method with Stage3D code Examples: Particle System Polygon (with Tutorial) Dynamic Shadows (!)

33 Get Help! Book: Introducing Starling from Thibault Imbert Video Courses from Lee Brimelow and Hemanth Sharma Manual, Extensions, Tutorials in the Starling Wiki wiki.starling-framework.org

34 That s it, folks! Questions?