0
Two Dimensions of AwesomeBy Iain Lobb
Two Dimensions of Awesome.
I don’t havethe awesome.*
I’m looking forthe awesome.
*I’ve foundsome of it.
First, let’s troll…
The typical Flash game…•   Stickmen!•   Arenas!•   20fps!•   550 x 400!
The retro Flash game…• 8-bit pixel art!• 2 frame animations!• Tile grid!• Everything is a square!• Double pixels! You want...
Now let’s see what they’redoing on games consoles…
Ray Man Origins
Limbo
The 2D awesome…•   HD graphics.•   60 frames per second•   Smooth scrolling camera.•   Multiple layers of parallax.•   Une...
BunnyMark• 26x37 pixel sprite• 30fps• 640x480
Demo #1BunnyMark -  Bitmaps
4000 bunnies
Demo #2BunnyMark -  Blitting
6000 bunnies
Demo #3 BunnyMark –HTML5 Canvas
2000 bunnies
Bunny Domination!
BunnyLandMark•   A more realistic scenario•   30fps•   640x480•   26x37 pixel sprite•   Scrolling world•   Depth-sorted sp...
Demo #4BunnyLandMark  – Bitmaps
22,000 bunnies
Demo #5BunnyLandMark   – Blitting
90,000 bunnies!
Nowsomethingshocking…
Soylent Green is people!
BunnyMark  is a lie.
60 fps
Demo #6 BunnyMark –Bitmaps (60fps)
1500 bunnies
Demo #7BunnyMark –Blitting (60fps)
1500 bunnies
HD resolution•   Typically Flash game = 640x480•   Portal maximum = 800x600•   Nitrome = 500x500 pixels•   Rayman Origins ...
960x720
Demo #8 BunnyMark –Bitmaps (60fps)   960 x 720
1000 bunnies
Demo #9BunnyMark –Blitting (60fps)  960 x 720
1000 bunnies
Sprites• 256x148• Digital painting• Scale +/- 50%• Rotation
Introducing PirateMark!•   60 fps•   960x720•   256x148 sprite•   Scaling +/- 50%•   Rotation•   How many sprites can we h...
Demo #10 PirateMark –Bitmaps (60fps)
…
20 pirates
Demo #11 PirateMark –Bitmaps (30fps)
40 pirates
Demo #12 PirateMark –Blitting (60fps)
15 pirates
Demo #13 PirateMark –Blitting (30fps)
80 pirates
Stage3D
Demo #14PirateMark –   ND2D
20 pirates
Demo #15PirateMark –Genome2D
80 pirates
Demo #16PirateMark –   Starling
100 pirates
Demo #17PirateMark – haXe NME
150 pirates
Demo #18 PirateMark –HTML5 Canvas
0 pirates
100 pirates
He who controls thegraphics card drivers,controls the universe!
Can we supportStage3D and software     rendering?
Can we support 30fps    and 60fps?
// Frame-based Eulerfunction update(){    speedY += gravity;    speedX *= drag;    speedY *= drag;    x += speedX;    y +=...
// Time-based Improved Eulerfunction update(time:Number){    speedY += gravity * time;    speedX *= Math.pow(drag, time); ...
Demo #19Improved Euler
...or fix your time step    and interpolate.
Camera andParallax Scrolling
2D Camera• A 2D camera is just an X and Y offset.• Subtract the camera position from each  sprite’s world position to get ...
// Simple 2D Camerafor each (var sprite in sprites){    sprite.x = sprite.worldX – cameraX;    sprite.y = sprite.worldY – ...
2D Camera• By using a container sprite we can make  this process even simpler.• Set the container position to negative the...
// 2D Camera using containerworld.addChild(sprite);function update(){    world.x = –cameraX;    world.y = –cameraY;}
Zooming• To enable zooming, we add a second  container.• We move the inner container and scale  the outer container.
// Zooming 2D Cameraworld.addChild(sprite);container.addChild(world);container.x = stage.stageWidth / 2;container.y = stag...
Demo #21Zooming Camera
Parallax• To enable parallax, we position the inner  container to negative the camera position,  multiplied by a fraction.
// Zooming 2D Camera with parallaxworld.addChild(sprite);container.addChild(world);container.x = stage.stageWidth / 2;cont...
Demo #22Parallax Camera
Demo #23Starling Camera
Uneven Terrain
hitTestPoint(x, y, shapeFlag);
Demo #24hitTestPoint
hitTestPoint• Only works +/- 2000 pixels• Lags by one frame if you move the container.• Must be on the stage but doesn’t h...
Bullet
Arrow
Fast moving bullet
Character
Character
Grenade
Grenade
Grenade
Grenade
Demo #25Projectiles
Collision Detection• Box2D / Nape• Straight lines• Why hitTestPoint?
Level Editor•   Position objects•   Rotate and scale objects•   Draw collision areas•   Give instance names for code acces...
It’s FlashProfessional!
It’s FlashProfessional!
It’s FlashProfessional!
It’s FlashProfessional!
Parsing with ActionScript•   Create instance of level•   Loop through children.•   Determine type of child using “is”•   I...
Gotchas•   Small scroll area – scale down and zoom in•   “Invalid size and position”•   Flash CS5 crashes creating large S...
Character Animation
Timelines leak memory!
Sprite Sheets•   Flash, After Effects, Blender•   Great performance•   High memory use•   Not changeable at runtime
Bones•   Not the Bone Tool!•   Separate sprites for each body part•   Saves memory•   Adjustable playback speed•   Customi...
Demo #26 Bones
Demo #28Alice Gameplay
Final thoughts…
2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb
2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb
Upcoming SlideShare
Loading in...5
×

2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb

5,053

Published on

Iain Lobb provides some tips and tricks on how to optimize your 2D Flash games!

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,053
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Sprites, MovieClips – it’s all good with me!
  • Transcript of "2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb"

    1. 1. Two Dimensions of AwesomeBy Iain Lobb
    2. 2. Two Dimensions of Awesome.
    3. 3. I don’t havethe awesome.*
    4. 4. I’m looking forthe awesome.
    5. 5. *I’ve foundsome of it.
    6. 6. First, let’s troll…
    7. 7. The typical Flash game…• Stickmen!• Arenas!• 20fps!• 550 x 400!
    8. 8. 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!
    9. 9. Now let’s see what they’redoing on games consoles…
    10. 10. Ray Man Origins
    11. 11. Limbo
    12. 12. The 2D awesome…• HD graphics.• 60 frames per second• Smooth scrolling camera.• Multiple layers of parallax.• Uneven, organic terrain.• Expressive character animation.
    13. 13. BunnyMark• 26x37 pixel sprite• 30fps• 640x480
    14. 14. Demo #1BunnyMark - Bitmaps
    15. 15. 4000 bunnies
    16. 16. Demo #2BunnyMark - Blitting
    17. 17. 6000 bunnies
    18. 18. Demo #3 BunnyMark –HTML5 Canvas
    19. 19. 2000 bunnies
    20. 20. Bunny Domination!
    21. 21. BunnyLandMark• A more realistic scenario• 30fps• 640x480• 26x37 pixel sprite• Scrolling world• Depth-sorted sprites
    22. 22. Demo #4BunnyLandMark – Bitmaps
    23. 23. 22,000 bunnies
    24. 24. Demo #5BunnyLandMark – Blitting
    25. 25. 90,000 bunnies!
    26. 26. Nowsomethingshocking…
    27. 27. Soylent Green is people!
    28. 28. BunnyMark is a lie.
    29. 29. 60 fps
    30. 30. Demo #6 BunnyMark –Bitmaps (60fps)
    31. 31. 1500 bunnies
    32. 32. Demo #7BunnyMark –Blitting (60fps)
    33. 33. 1500 bunnies
    34. 34. HD resolution• Typically Flash game = 640x480• Portal maximum = 800x600• Nitrome = 500x500 pixels• Rayman Origins = 1080p = 1920x1080• 500x500 can fit into 1080p eight times!
    35. 35. 960x720
    36. 36. Demo #8 BunnyMark –Bitmaps (60fps) 960 x 720
    37. 37. 1000 bunnies
    38. 38. Demo #9BunnyMark –Blitting (60fps) 960 x 720
    39. 39. 1000 bunnies
    40. 40. Sprites• 256x148• Digital painting• Scale +/- 50%• Rotation
    41. 41. Introducing PirateMark!• 60 fps• 960x720• 256x148 sprite• Scaling +/- 50%• Rotation• How many sprites can we have?
    42. 42. Demo #10 PirateMark –Bitmaps (60fps)
    43. 43.
    44. 44. 20 pirates
    45. 45. Demo #11 PirateMark –Bitmaps (30fps)
    46. 46. 40 pirates
    47. 47. Demo #12 PirateMark –Blitting (60fps)
    48. 48. 15 pirates
    49. 49. Demo #13 PirateMark –Blitting (30fps)
    50. 50. 80 pirates
    51. 51. Stage3D
    52. 52. Demo #14PirateMark – ND2D
    53. 53. 20 pirates
    54. 54. Demo #15PirateMark –Genome2D
    55. 55. 80 pirates
    56. 56. Demo #16PirateMark – Starling
    57. 57. 100 pirates
    58. 58. Demo #17PirateMark – haXe NME
    59. 59. 150 pirates
    60. 60. Demo #18 PirateMark –HTML5 Canvas
    61. 61. 0 pirates
    62. 62. 100 pirates
    63. 63. He who controls thegraphics card drivers,controls the universe!
    64. 64. Can we supportStage3D and software rendering?
    65. 65. Can we support 30fps and 60fps?
    66. 66. // Frame-based Eulerfunction update(){ speedY += gravity; speedX *= drag; speedY *= drag; x += speedX; y += speedY;}
    67. 67. // Time-based Improved Eulerfunction update(time:Number){ speedY += gravity * time; speedX *= Math.pow(drag, time); speedY *= Math.pow(drag, time); x += (speedX + oldSpeedX) / 2; y += (speedY + oldSpeedY) / 2; oldSpeedX = speedX; oldSpeedY = speedY;}
    68. 68. Demo #19Improved Euler
    69. 69. ...or fix your time step and interpolate.
    70. 70. Camera andParallax Scrolling
    71. 71. 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.
    72. 72. // Simple 2D Camerafor each (var sprite in sprites){ sprite.x = sprite.worldX – cameraX; sprite.y = sprite.worldY – cameraY;}
    73. 73. 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.
    74. 74. // 2D Camera using containerworld.addChild(sprite);function update(){ world.x = –cameraX; world.y = –cameraY;}
    75. 75. Zooming• To enable zooming, we add a second container.• We move the inner container and scale the outer container.
    76. 76. // Zooming 2D Cameraworld.addChild(sprite);container.addChild(world);container.x = stage.stageWidth / 2;container.y = stage.stageHeight / 2;function update(){ world.x = –cameraX; world.y = –cameraY; container.scaleX = container.scaleY = zoom;}
    77. 77. Demo #21Zooming Camera
    78. 78. Parallax• To enable parallax, we position the inner container to negative the camera position, multiplied by a fraction.
    79. 79. // Zooming 2D Camera with parallaxworld.addChild(sprite);container.addChild(world);container.x = stage.stageWidth / 2;container.y = stage.stageHeight / 2;function update(){ world.x = –cameraX * 0.5; world.y = –cameraY * 0.5; container.scaleX = container.scaleY = zoom;}
    80. 80. Demo #22Parallax Camera
    81. 81. Demo #23Starling Camera
    82. 82. Uneven Terrain
    83. 83. hitTestPoint(x, y, shapeFlag);
    84. 84. Demo #24hitTestPoint
    85. 85. 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
    86. 86. Bullet
    87. 87. Arrow
    88. 88. Fast moving bullet
    89. 89. Character
    90. 90. Character
    91. 91. Grenade
    92. 92. Grenade
    93. 93. Grenade
    94. 94. Grenade
    95. 95. Demo #25Projectiles
    96. 96. Collision Detection• Box2D / Nape• Straight lines• Why hitTestPoint?
    97. 97. Level Editor• Position objects• Rotate and scale objects• Draw collision areas• Give instance names for code access• Save, Save As, Undo, Redo, Copy, Paste• Zoom
    98. 98. It’s FlashProfessional!
    99. 99. It’s FlashProfessional!
    100. 100. It’s FlashProfessional!
    101. 101. It’s FlashProfessional!
    102. 102. Parsing with ActionScript• Create instance of level• Loop through children.• Determine type of child using “is”• If no linkage found, assume terrain
    103. 103. Gotchas• Small scroll area – scale down and zoom in• “Invalid size and position”• Flash CS5 crashes creating large SWCs• Expensive
    104. 104. Character Animation
    105. 105. Timelines leak memory!
    106. 106. Sprite Sheets• Flash, After Effects, Blender• Great performance• High memory use• Not changeable at runtime
    107. 107. Bones• Not the Bone Tool!• Separate sprites for each body part• Saves memory• Adjustable playback speed• Customizable• Parse timeline – animations are pure data
    108. 108. Demo #26 Bones
    109. 109. Demo #28Alice Gameplay
    110. 110. Final thoughts…
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×