RENDER FOR SPEED
ABOUT ME           Lee Brimelow           Game Developer Evangelist           www.leebrimelow.com           www.gotoandlea...
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              - Par...
AGENDA         - Traditional rendering         - Blitting techniques              - Full stage blitting              - Par...
AGENDA         - Traditional rendering         - Blitting techniques              - Full stage blitting              - Par...
AGENDA         - Traditional rendering         - Blitting techniques              - Full stage blitting              - Par...
AGENDA         - Traditional rendering         - Blitting techniques              - Full stage blitting              - Par...
AGENDA         - Traditional rendering         - Blitting techniques              - Full stage blitting              - Par...
AGENDA         - Traditional rendering         - Blitting techniques              - Full stage blitting              - Par...
A SIDE NOTE ABOUT HTML5
HELP AND INSPIRATION
HELP AND INSPIRATION
HELP AND INSPIRATION
HELP AND INSPIRATION
HELP AND INSPIRATION
HELP AND INSPIRATION
DISCLAIMERThere is no perfect rendering method. Choosing the right one takesexperimentation and should be based on the typ...
FLASH RENDERING METHODS
TRADITIONAL RENDERING
TRADITIONAL RENDERING
TRADITIONAL RENDERING           PROS           - Easiest to develop           - Vectors can be smoothly scaled at runtime ...
TRADITIONAL RENDERING           PROS           - Easiest to develop           - Vectors can be smoothly scaled at runtime ...
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                       ...
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...
BLITTING STEPS            1    Create pre-rendered sprite sheet of animations            2    Add single BitmapData canvas...
BLITTING STEPS            1    Create pre-rendered sprite sheet of animations            2    Add single BitmapData canvas...
BLITTING STEPS            1    Create pre-rendered sprite sheet of animations            2    Add single BitmapData canvas...
TIPBe sure to call bitmapData.lock() before doing multiple copyPixel callsto prevent unnecessary updating, followed by bit...
COPYPIXELS VS DRAW
COPYPIXELS VS DRAW         Best performance
COPYPIXELS VS DRAW         Best performance         Most exible                   (Sprites can be transformed and use blen...
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 s...
DEMO
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...
DIRTY BLITTING            BitmapData             - Store the previous frames rectangle             - Then only repaint dir...
PARTIAL BLITTING            Stage                                   Bitmap                                     Bit        ...
DEMO
BITMAP ARMATURES      Instead of drawing a unique illustration for each frame of the models      animation, armature model...
DEMO
WHICH TECHNIQUE TO USE
WHICH TECHNIQUE TO USE         FULL BLITTING        Best when frequent redraws of the entire screen are required.        T...
WHICH TECHNIQUE TO USE         FULL BLITTING        Best when frequent redraws of the entire screen are required.        T...
WHICH TECHNIQUE TO USE         FULL BLITTING        Best when frequent redraws of the entire screen are required.        T...
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)...
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)...
var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){   var bmd:BitmapData = new BitmapData(s.width, s.height)...
BLITTING GAME FRAMEWORKS
BLITTING GAME FRAMEWORKS
BLITTING GAME FRAMEWORKS
BLITTING GAME FRAMEWORKS
AIR MOBILE RENDERING
TWO RENDERING MODES
TWO RENDERING MODES          CPU          - Everything is rendered in software          - Use this mode for fully blitted ...
TWO RENDERING MODES          CPU          - Everything is rendered in software          - Use this mode for fully blitted ...
CACHING VECTORS             Application XML             Vector content
TIPObjects on the GPU are automatically anti-aliased so you can setthe stage quality to low.
DEMOS
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 ap...
PERFORMANCE TIPS         - Keep the display list as at as possible         - Utilize blitting or partial blitting where ap...
PERFORMANCE TIPS         - Keep the display list as at as possible         - Utilize blitting or partial blitting where ap...
PERFORMANCE TIPS         - Keep the display list as at as possible         - Utilize blitting or partial blitting where ap...
PERFORMANCE TIPS         - Keep the display list as at as possible         - Utilize blitting or partial blitting where ap...
PERFORMANCE TIPS         - Keep the display list as at as possible         - Utilize blitting or partial blitting where ap...
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 ...
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.  ...
INTEGRATION                                         display list              wmode=direct is required
LOW-LEVEL STAGE 3D    //
setup
backbuffer
(level
1
aa,
z
buffer
on)
    context3D.configureBackBuffer(
stage.stage3Ds[0].v...
HIGH-LEVEL FRAMEWORKS
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 ...
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...
var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x...
var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x...
DISPLAYDisplayObjectButtonImageMovieClipSprite
DISPLAY         EVENTSDisplayObject   EnterFrameEventButton          KeyboardEventImage           ResizeEventMovieClip    ...
DISPLAY         EVENTS            TEXTDisplayObject   EnterFrameEvent   BitmapFontButton          KeyboardEvent     TextFi...
HELLO WORLD
Font glyphs and XML
PARTICLE DESIGNER
WILL BE RELEASED SOON
QUESTIONS?
Render For Speed
Render For Speed
Render For Speed
Render For Speed
Render For Speed
Render For Speed
Render For Speed
Render For Speed
Upcoming SlideShare
Loading in …5
×

Render For Speed

47,975 views

Published on

Slides from my Flash on the Beach 2011 presentation about the different rendering techniques used in Flash development.

2 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total views
47,975
On SlideShare
0
From Embeds
0
Number of Embeds
35,946
Actions
Shares
0
Downloads
0
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Render For Speed

    1. RENDER FOR SPEED
    2. ABOUT ME Lee Brimelow Game Developer Evangelist www.leebrimelow.com www.gotoandlearn.com brimelow@adobe.com @leebrimelow
    3. AGENDA
    4. AGENDA - Traditional rendering
    5. AGENDA - Traditional rendering - Blitting techniques
    6. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting
    7. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting
    8. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting
    9. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures
    10. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching
    11. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching - Mobile rendering
    12. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching - Mobile rendering - Stage 3D
    13. AGENDA - Traditional rendering - Blitting techniques - Full stage blitting - Partial blitting - Dirty blitting - Bitmap armatures - MovieClip caching - Mobile rendering - Stage 3D - New 2D framework
    14. A SIDE NOTE ABOUT HTML5
    15. HELP AND INSPIRATION
    16. HELP AND INSPIRATION
    17. HELP AND INSPIRATION
    18. HELP AND INSPIRATION
    19. HELP AND INSPIRATION
    20. HELP AND INSPIRATION
    21. DISCLAIMERThere is no perfect rendering method. Choosing the right one takesexperimentation and should be based on the type of content.
    22. FLASH RENDERING METHODS
    23. TRADITIONAL RENDERING
    24. TRADITIONAL RENDERING
    25. TRADITIONAL RENDERING PROS - Easiest to develop - Vectors can be smoothly scaled at runtime - Non-animating clips can use cacheAsBitmap
    26. 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
    27. Most Flash games will run great simply if cacheAsBitmap is used.
    28. THE CRAZY WORLD OF BLITTING
    29. SPRITE SHEETS
    30. TEXTURE PACKER
    31. TEXTURE PACKER DISCOUNT CODE fotb2011-lee-brimelow to get 20% discount for TexturePacker and/or PhysicsEditor
    32. BLITTING EXPLAINED BitmapData Sprite sheet ls Pixe copy
    33. BLITTING STEPS
    34. BLITTING STEPS 1 Create pre-rendered sprite sheet of animations
    35. BLITTING STEPS 1 Create pre-rendered sprite sheet of animations 2 Add single BitmapData canvas to the display list
    36. 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
    37. 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
    38. 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
    39. TIPBe sure to call bitmapData.lock() before doing multiple copyPixel callsto prevent unnecessary updating, followed by bitmapData.unlock().
    40. COPYPIXELS VS DRAW
    41. COPYPIXELS VS DRAW Best performance
    42. COPYPIXELS VS DRAW Best performance Most exible (Sprites can be transformed and use blend modes)
    43. TIPIf you game is fully blitted you can set the stage quality to low.
    44. 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
    45. DEMO
    46. So when should you use full blitting for your game?
    47. BUT SERIOUSLY
    48. BUT SERIOUSLY Fast action scrollers
    49. BUT SERIOUSLY Fast action scrollers Tile-based games
    50. Creating games using the HTML5 canvas element usesthese same blitting techniques. The canvas tag is similarto a bitmapData object in Flash.
    51. DIRTY BLITTING BitmapData - Store the previous frames rectangle - Then only repaint dirty regions of the background
    52. 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 tradeoff between exibility and performance
    53. DEMO
    54. 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.
    55. DEMO
    56. WHICH TECHNIQUE TO USE
    57. WHICH TECHNIQUE TO USE FULL BLITTING Best when frequent redraws of the entire screen are required. Think fast-action side scrollers like Canabalt.
    58. 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.
    59. 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.
    60. RUNTIME MOVIECLIP CACHING
    61. RUNTIME MOVIECLIP CACHING Array of BitmapData
    62. var s:snake = new snake();
    63. var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++)
    64. var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){
    65. var s:snake = new snake();for(var i:int=1; i<s.totalFrames; i++){ var bmd:BitmapData = new BitmapData(s.width, s.height);
    66. 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);
    67. 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);
    68. 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);
    69. 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);}
    70. BLITTING GAME FRAMEWORKS
    71. BLITTING GAME FRAMEWORKS
    72. BLITTING GAME FRAMEWORKS
    73. BLITTING GAME FRAMEWORKS
    74. AIR MOBILE RENDERING
    75. TWO RENDERING MODES
    76. TWO RENDERING MODES CPU - Everything is rendered in software - Use this mode for fully blitted games - Good performance on iOS
    77. 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
    78. CACHING VECTORS Application XML Vector content
    79. TIPObjects on the GPU are automatically anti-aliased so you can setthe stage quality to low.
    80. DEMOS
    81. PERFORMANCE TIPS
    82. PERFORMANCE TIPS - Keep the display list as at as possible
    83. PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate
    84. PERFORMANCE TIPS - Keep the display list as at as possible - Utilize blitting or partial blitting where appropriate - Use object pools to avoid instantiation costs
    85. 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
    86. 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
    87. 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
    88. 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
    89. STAGE 3D RENDERING
    90. STAGE 3D
    91. STAGE 3D Formally known by the code name Molehill.
    92. 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.
    93. PREDICTIONStage 3D is faster than any other rendering technique and itwill become the de-facto standard for Flash games.
    94. 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.
    95. INTEGRATION display list wmode=direct is required
    96. 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
);

    97. HIGH-LEVEL FRAMEWORKS
    98. HIGH-LEVEL FRAMEWORKS
    99. STAGE 3D DEMOS
    100. NEW OPEN-SOURCE PROJECT
    101. 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.
    102. Sprite sheet and XML
    103. var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");
    104. var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);
    105. var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x = Math.random() * 800;
    106. var frames:Vector.<Texture> = getTextureAtlas().getTextures("snake");var hero:MovieClip = new MovieClip(frames, 60);hero.x = Math.random() * 800;hero.y = Math.random() * 600;
    107. 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);
    108. DISPLAYDisplayObjectButtonImageMovieClipSprite
    109. DISPLAY EVENTSDisplayObject EnterFrameEventButton KeyboardEventImage ResizeEventMovieClip TouchEventSprite
    110. DISPLAY EVENTS TEXTDisplayObject EnterFrameEvent BitmapFontButton KeyboardEvent TextFieldImage ResizeEventMovieClip TouchEventSprite
    111. HELLO WORLD
    112. Font glyphs and XML
    113. PARTICLE DESIGNER
    114. WILL BE RELEASED SOON
    115. QUESTIONS?

    ×