Successfully reported this slideshow.

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

1

Share

Loading in …3
×
1 of 112
1 of 112

More Related Content

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

  1. 1. Two Dimensions of Awesome By Iain Lobb
  2. 2. Two Dimensions of Awesome.
  3. 3. I don’t have the awesome.*
  4. 4. I’m looking for the awesome.
  5. 5. *I’ve found some 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’re doing 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 #1 BunnyMark - Bitmaps
  15. 15. 4000 bunnies
  16. 16. Demo #2 BunnyMark - 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 #4 BunnyLandMark – Bitmaps
  23. 23. 22,000 bunnies
  24. 24. Demo #5 BunnyLandMark – Blitting
  25. 25. 90,000 bunnies!
  26. 26. Now something shocking…
  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 #7 BunnyMark – 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 #9 BunnyMark – 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 #14 PirateMark – ND2D
  53. 53. 20 pirates
  54. 54. Demo #15 PirateMark – Genome2D
  55. 55. 80 pirates
  56. 56. Demo #16 PirateMark – Starling
  57. 57. 100 pirates
  58. 58. Demo #17 PirateMark – 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 the graphics card drivers, controls the universe!
  64. 64. Can we support Stage3D and software rendering?
  65. 65. Can we support 30fps and 60fps?
  66. 66. // Frame-based Euler function update(){ speedY += gravity; speedX *= drag; speedY *= drag; x += speedX; y += speedY; }
  67. 67. // Time-based Improved Euler function 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 #19 Improved Euler
  69. 69. ...or fix your time step and interpolate.
  70. 70. Camera and Parallax 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 Camera for 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 container world.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 Camera world.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 #21 Zooming 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 parallax world.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 #22 Parallax Camera
  81. 81. Demo #23 Starling Camera
  82. 82. Uneven Terrain
  83. 83. hitTestPoint(x, y, shapeFlag);
  84. 84. Demo #24 hitTestPoint
  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 #25 Projectiles
  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 Flash Professional!
  99. 99. It’s Flash Professional!
  100. 100. It’s Flash Professional!
  101. 101. It’s Flash Professional!
  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 #28 Alice Gameplay
  110. 110. Final thoughts…

Editor's Notes

  • 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!
  • ×