2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 5,572 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,572
On Slideshare
1,984
From Embeds
3,588
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
2

Embeds 3,588

http://www.flashgamingsummit.com 3,579
http://fliperamma.com 5
http://translate.googleusercontent.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

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