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…