9. The retro Flash game…
• 8-bit pixel art!
• 2 frame animations!
• Tile grid!
• Everything is a square!
• Double pixels! You want to see those
pixels, right?
• 3rd party engine!
14. The 2D awesome…
• HD graphics.
• 60 frames per second
• Smooth scrolling camera.
• Multiple layers of parallax.
• Uneven, organic terrain.
• Expressive character animation.
36. HD resolution
• Typically Flash game = 640x480
• Portal maximum = 800x600
• Nitrome = 500x500 pixels
• Rayman Origins = 1080p = 1920x1080
• 500x500 can fit into 1080p eight times!
73. 2D Camera
• A 2D camera is just an X and Y offset.
• Subtract the camera position from each
sprite’s world position to get its screen
position.
74. // Simple 2D Camera
for each (var sprite in sprites)
{
sprite.x = sprite.worldX – cameraX;
sprite.y = sprite.worldY – cameraY;
}
75. 2D Camera
• By using a container sprite we can make
this process even simpler.
• Set the container position to negative the
camera position.
• Each sprite will automatically get the
correct screen position.
76. // 2D Camera using container
world.addChild(sprite);
function update()
{
world.x = –cameraX;
world.y = –cameraY;
}
77. Zooming
• To enable zooming, we add a second
container.
• We move the inner container and scale
the outer container.
87. hitTestPoint
• Only works +/- 2000 pixels
• Lags by one frame if you move the container.
• Must be on the stage but doesn’t have to be
visible.
• Reduce number of calls using AABB broad
phase.
• Same principles can be applied using getPixel32
104. Parsing with ActionScript
• Create instance of level
• Loop through children.
• Determine type of child using “is”
• If no linkage found, assume terrain
105. Gotchas
• Small scroll area – scale down and zoom in
• “Invalid size and position”
• Flash CS5 crashes creating large SWCs
• Expensive
108. Sprite Sheets
• Flash, After Effects, Blender
• Great performance
• High memory use
• Not changeable at runtime
109. Bones
• Not the Bone Tool!
• Separate sprites for each body part
• Saves memory
• Adjustable playback speed
• Customizable
• Parse timeline – animations are pure data