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

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. DISCLAIMER
There is no perfect rendering method. Choosing the right one takes
experimentation 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

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

29. THE CRAZY WORLD OF BLITTING

30. SPRITE SHEETS

31. TEXTURE PACKER

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

33. BLITTING EXPLAINED
BitmapData Sprite sheet
ls
Pixe
copy

34. BLITTING STEPS

35. BLITTING STEPS
1 Create pre-rendered sprite sheet of animations

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

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

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

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

40. TIP
Be sure to call bitmapData.lock() before doing multiple copyPixel calls
to prevent unnecessary updating, followed by bitmapData.unlock().

41. COPYPIXELS VS DRAW

42. COPYPIXELS VS DRAW
Best performance

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

44. TIP
If you game is fully blitted you can set the stage quality to low.

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

46. DEMO

47. So when should you use full blitting for your game?

49. BUT SERIOUSLY

50. BUT SERIOUSLY
Fast action scrollers

51. BUT SERIOUSLY
Fast action scrollers
Tile-based games

52. Creating games using the HTML5 canvas element uses
these same blitting techniques. The canvas tag is similar
to a bitmapData object in Flash.

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

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

55. DEMO

56. BITMAP ARMATURES
Instead of drawing a unique illustration for each frame of the model's
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.

57. DEMO

58. WHICH TECHNIQUE TO USE

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

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

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

62. RUNTIME MOVIECLIP CACHING

63. RUNTIME MOVIECLIP CACHING
Array of BitmapData

65. var s:snake = new snake();

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

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

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

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

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

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

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

73. BLITTING GAME FRAMEWORKS

74. BLITTING GAME FRAMEWORKS

75. BLITTING GAME FRAMEWORKS

76. BLITTING GAME FRAMEWORKS

77. AIR MOBILE RENDERING

78. TWO RENDERING MODES

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

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

81. CACHING VECTORS
Application XML
Vector content

82. TIP
Objects on the GPU are automatically anti-aliased so you can set
the stage quality to low.

83. DEMOS

84. PERFORMANCE TIPS

85. PERFORMANCE TIPS
- Keep the display list as at as possible

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

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

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

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

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

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

92. STAGE 3D RENDERING

93. STAGE 3D

94. STAGE 3D
Formally known by the code name Molehill.

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

96. PREDICTION
Stage 3D is faster than any other rendering technique and it
will become the de-facto standard for Flash games.

97. PREDICTION
Stage 3D is faster than any other rendering technique and it
will 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.

98. INTEGRATION
display list
wmode=direct is required

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

100. HIGH-LEVEL FRAMEWORKS

101. HIGH-LEVEL FRAMEWORKS

102. STAGE 3D DEMOS

104. NEW OPEN-SOURCE PROJECT

105. NEW OPEN-SOURCE PROJECT
Adobe is working on an open-source, 2D ActionScript API that leverages
GPU acceleration using Stage 3D. This new API is based on the existing
Flash display list, making it very easy for ActionScript developers to learn.

106. Sprite sheet and XML

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

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

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

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

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

114. DISPLAY
DisplayObject
Button
Image
MovieClip
Sprite

115. DISPLAY EVENTS
DisplayObject EnterFrameEvent
Button KeyboardEvent
Image ResizeEvent
MovieClip TouchEvent
Sprite

116. DISPLAY EVENTS TEXT
DisplayObject EnterFrameEvent BitmapFont
Button KeyboardEvent TextField
Image ResizeEvent
MovieClip TouchEvent
Sprite

117. HELLO WORLD

118. Font glyphs and XML

119. PARTICLE DESIGNER

121. WILL BE RELEASED SOON

123. QUESTIONS?