Render For Speed

RENDER FOR SPEED

ABOUT ME Lee Brimelow Game Developer Evangelist www.leebrimelow.com www.gotoandlearn.com brimelow@adobe.com @leebrimelow

AGENDA

AGENDA - Traditional rendering

AGENDA - Traditional rendering - Blitting techniques

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching - Mobile rendering

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching - Mobile rendering - Stage 3D

AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching - Mobile rendering - Stage 3D - New 2D framework

A SIDE NOTE ABOUT HTML5

HELP AND INSPIRATION

DISCLAIMERThere is no perfect rendering method. Choosing the right one takesexperimentation and should be based on the type of content.

FLASH RENDERING METHODS

TRADITIONAL RENDERING

TRADITIONAL RENDERING PROS - Easiest to develop - Vectors can be smoothly scaled at runtime - Non-animating clips can use cacheAsBitmap

TRADITIONAL RENDERING PROS - Easiest to develop - Vectors can be smoothly scaled at runtime - Non-animating clips can use cacheAsBitmap CONS - MovieClips and Sprites have a lot of overhead - Can be slow with large numbers of animated objects - Can take up much more memory

Most Flash games will run great simply if cacheAsBitmap is used.

THE CRAZY WORLD OF BLITTING

SPRITE SHEETS

TEXTURE PACKER

TEXTURE PACKER DISCOUNT CODE fotb2011-lee-brimelow to get 20% discount for TexturePacker and/or PhysicsEditor

BLITTING EXPLAINED BitmapData Sprite sheet ls Pixe copy

BLITTING STEPS

BLITTING STEPS 1 Create pre-rendered sprite sheet of animations

BLITTING STEPS 1 Create pre-rendered sprite sheet of animations 2 Add single BitmapData canvas to the display list

BLITTING STEPS 1 Create pre-rendered sprite sheet of animations 2 Add single BitmapData canvas to the display list 3 Copy the background into the canvas or erase

BLITTING STEPS 1 Create pre-rendered sprite sheet of animations 2 Add single BitmapData canvas to the display list 3 Copy the background into the canvas or erase 4 Copy any game sprites into the canvas

BLITTING STEPS 1 Create pre-rendered sprite sheet of animations 2 Add single BitmapData canvas to the display list 3 Copy the background into the canvas or erase 4 Copy any game sprites into the canvas 5 Repeat steps 3 and 4 inside of main game loop

TIPBe sure to call bitmapData.lock() before doing multiple copyPixel callsto prevent unnecessary updating, followed by bitmapData.unlock().

COPYPIXELS VS DRAW

COPYPIXELS VS DRAW Best performance

COPYPIXELS VS DRAW Best performance Most exible (Sprites can be transformed and use blend modes)

TIPIf you game is fully blitted you can set the stage quality to low.

FULL STAGE BLITTING BitmapData - Single bitmapData canvas on display list - All sprites are blitted to this single canvas - Good for large number of animated sprites

So when should you use full blitting for your game?

BUT SERIOUSLY

BUT SERIOUSLY Fast action scrollers

BUT SERIOUSLY Fast action scrollers Tile-based games

Creating games using the HTML5 canvas element usesthese same blitting techniques. The canvas tag is similarto a bitmapData object in Flash.

DIRTY BLITTING BitmapData - Store the previous frames rectangle - Then only repaint dirty regions of the background

PARTIAL BLITTING Stage Bitmap Bit ma p ap B itm Bit m ap - Each sprite is blitted to individual bitmapData - Bitmap objects can be easily transformed - Good tradeoﬀ between exibility and performance

BITMAP ARMATURES Instead of drawing a unique illustration for each frame of the models animation, armature models are drawn as a series of body parts that move in relationship to each other just like the bones in your skeleton.

WHICH TECHNIQUE TO USE

WHICH TECHNIQUE TO USE FULL BLITTING Best when frequent redraws of the entire screen are required. Think fast-action side scrollers like Canabalt.

WHICH TECHNIQUE TO USE FULL BLITTING Best when frequent redraws of the entire screen are required. Think fast-action side scrollers like Canabalt. PARTIAL BLITTING Great choice when frequent redraws of the entire screen are not required. Also much easier to do transforms and does not require pre-rotated sprite sheets.

WHICH TECHNIQUE TO USE FULL BLITTING Best when frequent redraws of the entire screen are required. Think fast-action side scrollers like Canabalt. PARTIAL BLITTING Great choice when frequent redraws of the entire screen are not required. Also much easier to do transforms and does not require pre-rotated sprite sheets. ARMATURE MODELS Best choice when a large number of customizable characters are required. RPGs are a classic example of this.

RUNTIME MOVIECLIP CACHING

RUNTIME MOVIECLIP CACHING Array of BitmapData

var s:snake = new snake();

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++)

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){ var bmd:BitmapData = new BitmapData(s.width, s.height);

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){ var bmd:BitmapData = new BitmapData(s.width, s.height); s.gotoAndStop(i);

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){ var bmd:BitmapData = new BitmapData(s.width, s.height); s.gotoAndStop(i); bmd.draw(s);

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){ var bmd:BitmapData = new BitmapData(s.width, s.height); s.gotoAndStop(i); bmd.draw(s); frames.push(bmd);

var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){ var bmd:BitmapData = new BitmapData(s.width, s.height); s.gotoAndStop(i); bmd.draw(s); frames.push(bmd);}

BLITTING GAME FRAMEWORKS

AIR MOBILE RENDERING

TWO RENDERING MODES

TWO RENDERING MODES CPU - Everything is rendered in software - Use this mode for fully blitted games - Good performance on iOS

TWO RENDERING MODES CPU - Everything is rendered in software - Use this mode for fully blitted games - Good performance on iOS GPU - Bitmaps are automatically rendered using the GPU - Text and vectors can use cacheAsBitmapMatrix - Most all games should be rendered in this mode

CACHING VECTORS Application XML Vector content

TIPObjects on the GPU are automatically anti-aliased so you can setthe stage quality to low.

PERFORMANCE TIPS

PERFORMANCE TIPS - Keep the display list as at as possible

PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate

PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate - Use object pools to avoid instantiation costs

PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate - Use object pools to avoid instantiation costs - Use cacheAsBitmapMatrix for any non-changing vectors

PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate - Use object pools to avoid instantiation costs - Use cacheAsBitmapMatrix for any non-changing vectors - Just say no to using lters

PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate - Use object pools to avoid instantiation costs - Use cacheAsBitmapMatrix for any non-changing vectors - Just say no to using lters - Test early and often on actual devices

PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate - Use object pools to avoid instantiation costs - Use cacheAsBitmapMatrix for any non-changing vectors - Just say no to using lters - Test early and often on actual devices - Use pro ling tools to nd bottlenecks

STAGE 3D RENDERING

STAGE 3D

STAGE 3D Formally known by the code name Molehill.

STAGE 3D Formally known by the code name Molehill. Stage 3D is a new GPU-accelerated rendering engine for the Flash Player. This enables console-level 2D and 3D graphics for games.

PREDICTIONStage 3D is faster than any other rendering technique and itwill become the de-facto standard for Flash games.

PREDICTIONStage 3D is faster than any other rendering technique and itwill become the de-facto standard for Flash games. But it isn’t released yet and will not be available on mobile for a little while.

INTEGRATION display list wmode=direct is required

LOW-LEVEL STAGE 3D // setup backbuffer (level 1 aa, z buffer on)  context3D.configureBackBuffer( stage.stage3Ds[0].viewPort.width, stage.stage3Ds[0].viewPort.height, 1, true ); // create a vertex buffer vertexbuffer = context3D.createVertexBuffer( 3,6 ); vertexbuffer.uploadFromVector ( Vector.<Number>([            ‐1,‐1,0,  255/255,0,0,             0,1,0,    193/255,216/255,47/255,         1,‐1,0,   0,164/255,228/255             ]),0, 3 ); // start at offset 0, count 3  // create an index buffer. this is just identity indexbuffer = context3D.createIndexBuffer ( 3 ); indexbuffer.uploadFromVector ( Vector.<uint>( [ 0, 1, 2 ] ), 0, 3 ); // start at offset 0, count 3 // create a vertex and fragment program ‐ from assembly var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler(); vertexShaderAssembler.assemble( Context3DProgramType.VERTEX,    "m44 op, va0, vc0    n" + / 4x4 matrix transform  /   "mov v0, va1      n"   / copy stream 1 to fragment  / );            var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler();  fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,    "mov oc, v0" // output color   );       // upload the AGAL bytecode program = context3D.createProgram(); program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode ); 

HIGH-LEVEL FRAMEWORKS

STAGE 3D DEMOS

NEW OPEN-SOURCE PROJECT

NEW OPEN-SOURCE PROJECTAdobe is working on an open-source, 2D ActionScript API that leveragesGPU acceleration using Stage 3D. This new API is based on the existingFlash display list, making it very easy for ActionScript developers to learn.

Sprite sheet and XML

var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");

var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);

var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x = Math.random() * 800;

var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x = Math.random() * 800;hero.y = Math.random() * 600;

var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x = Math.random() * 800;hero.y = Math.random() * 600;addChild(hero);

DISPLAYDisplayObjectButtonImageMovieClipSprite

DISPLAY EVENTSDisplayObject EnterFrameEventButton KeyboardEventImage ResizeEventMovieClip TouchEventSprite

DISPLAY EVENTS TEXTDisplayObject EnterFrameEvent BitmapFontButton KeyboardEvent TextFieldImage ResizeEventMovieClip TouchEventSprite

HELLO WORLD

Font glyphs and XML

PARTICLE DESIGNER

WILL BE RELEASED SOON

QUESTIONS?

http://www.leebrimelow.com	33815
http://linhdoha.wordpress.com	552
http://lanyrd.com	33
http://linhdoha.wordpress.com.	18
http://translate.googleusercontent.com	16
http://www.siegnijpodotacje.pl	13
http://paper.li	11
http://www.hanrss.com	11
http://blog.theflashblog.com	7
http://webcache.googleusercontent.com	6
http://blog.leebrimelow.com	4
http://theflashblog.com	3
http://translate.google.com	3
http://fanyi.youdao.com	2
http://twitter.com	2
http://127.0.0.1:8795	2
http://www.leebrimelow.com.	1
http://www.post55.es	1
http://www.slideshare.net	1
http://polmaanthony.blogspot.com	1
http://www.dreamana.com	1
http://tweetedtimes.com	1

Render For Speed

by brimelow on Sep 14, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

22 Embeds 34,504

Statistics

Render For Speed — Presentation Transcript