1. Two Dimensions of Awesome
By Iain Lobb

2. Two Dimensions
of Awesome.

3. I don’t have
the awesome.*

4. I’m looking for
the awesome.

5. *I’ve found
some of it.

6. First, let’s troll…

7. The typical Flash game…
• Stickmen!
• Arenas!
• 20fps!
• 550 x 400!

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!

11. Now let’s see what they’re
doing on games consoles…

12. Ray Man Origins

13. Limbo

14. The 2D awesome…
• HD graphics.
• 60 frames per second
• Smooth scrolling camera.
• Multiple layers of parallax.
• Uneven, organic terrain.
• Expressive character animation.

15. BunnyMark
• 26x37 pixel sprite
• 30fps
• 640x480

16. Demo #1
BunnyMark -
Bitmaps

17. 4000 bunnies

18. Demo #2
BunnyMark -
Blitting

19. 6000 bunnies

20. Demo #3
BunnyMark –
HTML5 Canvas

21. 2000 bunnies

22. Bunny Domination!

23. BunnyLandMark
• A more realistic scenario
• 30fps
• 640x480
• 26x37 pixel sprite
• Scrolling world
• Depth-sorted sprites

24. Demo #4
BunnyLandMark
– Bitmaps

25. 22,000 bunnies

26. Demo #5
BunnyLandMark
– Blitting

27. 90,000 bunnies!

28. Now
something
shocking…

29. Soylent Green is people!

30. BunnyMark
is a lie.

31. 60 fps

32. Demo #6
BunnyMark –
Bitmaps (60fps)

33. 1500 bunnies

34. Demo #7
BunnyMark –
Blitting (60fps)

35. 1500 bunnies

36. HD resolution
• Typically Flash game = 640x480
• Portal maximum = 800x600
• Nitrome = 500x500 pixels
• Rayman Origins = 1080p = 1920x1080
• 500x500 can fit into 1080p eight times!

37. 960x720

38. Demo #8
BunnyMark –
Bitmaps (60fps)
960 x 720

39. 1000 bunnies

40. Demo #9
BunnyMark –
Blitting (60fps)
960 x 720

41. 1000 bunnies

42. Sprites
• 256x148
• Digital painting
• Scale +/- 50%
• Rotation

43. Introducing PirateMark!
• 60 fps
• 960x720
• 256x148 sprite
• Scaling +/- 50%
• Rotation
• How many sprites can we have?

44. Demo #10
PirateMark –
Bitmaps (60fps)

45. …

46. 20 pirates

47. Demo #11
PirateMark –
Bitmaps (30fps)

48. 40 pirates

49. Demo #12
PirateMark –
Blitting (60fps)

50. 15 pirates

51. Demo #13
PirateMark –
Blitting (30fps)

52. 80 pirates

53. Stage3D

54. Demo #14
PirateMark –
ND2D

55. 20 pirates

56. Demo #15
PirateMark –
Genome2D

57. 80 pirates

58. Demo #16
PirateMark –
Starling

59. 100 pirates

60. Demo #17
PirateMark –
haXe NME

61. 150 pirates

62. Demo #18
PirateMark –
HTML5 Canvas

63. 0 pirates

64. 100 pirates

65. He who controls the
graphics card drivers,
controls the universe!

66. Can we support
Stage3D and software
rendering?

67. Can we support 30fps
and 60fps?

68. // Frame-based Euler
function update(){
speedY += gravity;
speedX *= drag;
speedY *= drag;
x += speedX;
y += speedY;
}

69. // 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;
}

70. Demo #19
Improved Euler

71. ...or fix your time step
and interpolate.

72. Camera and
Parallax Scrolling

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.

78. // 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;
}

79. Demo #21
Zooming Camera

80. Parallax
• To enable parallax, we position the inner
container to negative the camera position,
multiplied by a fraction.

81. // 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;
}

82. Demo #22
Parallax Camera

83. Demo #23
Starling Camera

84. Uneven Terrain

85. hitTestPoint(x, y, shapeFlag);

86. Demo #24
hitTestPoint

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

88. Bullet

89. Arrow

90. Fast moving bullet

91. Character

92. Character

93. Grenade

94. Grenade

95. Grenade

96. Grenade

97. Demo #25
Projectiles

98. Collision Detection
• Box2D / Nape
• Straight lines
• Why hitTestPoint?

99. 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

100. It’s Flash
Professional!

101. It’s Flash
Professional!

102. It’s Flash
Professional!

103. It’s Flash
Professional!

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

106. Character Animation

107. Timelines leak memory!

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

110. Demo #26
Bones

111. Demo #28
Alice Gameplay

112. Final thoughts…