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.
28. Most Flash games will run great simply if cacheAsBitmap is used.
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().
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
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
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.
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.
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);
}
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
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
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 );
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.