Learn how game use a variety of monocular cues to create an illusion of depth in computer games. Learn what they are and how they are applied. Topics include foreground, background, user interface, overlap, baseheight, parallax, and more. An excerpt of the information available in the book: 2D Graphics Programming for Games.

1. Using Monocular Cues to
Program an Illusion of Depth
John Pile Jr
21 September 2013
Art by Geoff Gunning

2. John Pile Jr
The Game Studio @
Champlain College
Published Platforms:
iOS, Android, Xbox360, PS3, PC
Courses I teach:
• Graphics Programming (2D & 3D)
• Game Physics
• Game Networking
• Game Consoles Development
pile@champlain.edu
http://JohnPile.com
@JohnPile
Published by AK Peters | CRC Press: May 2013

3. The Game Studio:
Degree
School/Division
Game Artists
Game Designers
Game Programmers
Game Managers
Art
Creative Media
Comp. Sci. & Soft. Eng.
Business
Champlain College:
The Game Studio:
Game Programming:
2000
450
115

4. Today:
lots of concepts
a little sample code
short live demo

5. Role of Programmer in Art?
“Programmer Art”

6. Role of Programmer in Art?
http://sheilanash.com/

7. Role of Programmer in Art?
• Solve Problems & Create Solutions

8. Role of Programmer in Art?
• Solve Problems & Create Solutions
• Programmers have created:
– Painting Tools (Photoshop, GIMP, & MS Paint)
– Image Converters & Texture Packers
– 3D Editors (Autocad, Maya, & Z-Brush)
– Engines (Game Maker, Unity, UDK, & Flash)

9. Role of Programmer in Art?
In order to successfully
create solutions
we must understand the business
(at some level)

10. Role of Programmer in Art?
Using Monocular Cues
to program an illusion of depth
in 2D games

11. Concept: Sprites in 2D Games

12. Concept: Sprites in 2D Games
Not Much “depth”

13. Depth in Games
• Layering
– Background

16. Depth
• Layering
– Background
– Foreground

19. Depth
• Layering
– Background
– Foreground
• HUDs and GUIs

21. Traditional Role Playing Game (RPG)

22. Modern RPG

23. Gameplay

24. Rendered Cockpit

25. Implied Cockpit

26. MiniMaps, Compass, & Directional

27. Minimalist

28. Safe Frame / Safe Area = 90% of Screen Size
Safe Area / Frames

29. Depth Perception
Binocular Cues
&
Monocular Cues

30. Binocular Cues
Stereopsis: View the same image
from different angles.

31. Monocular Cues
Provide information on depth when
viewing a scene with one eye.

32. Depth through Monocular Cues
• Overlap (Layering)
– Background, Foreground, HUD, GUI
– In-game Objects

33. Overlapping

34. Depth through Monocular Cues
• Overlap
• Base Height

35. Base Height
in Egyptian artwork

36. Base Height
In traditional
perspective
artwork.

37. Base Height
In Games

38. Base Height
In Games

39. Base Height Indicated by Shadows

40. Depth through Monocular Cues
• Overlap
• Base Height
• Scale

41. Scale

42. Scale (without Base Height)

43. Scale and Base Height

44. Scale and Overlap
Problem?

45. Base Height + Overlap

46. Base Height + Overlap + Scale

47. Depth through Monocular Cues
•
•
•
•
Overlap
Base Height
Scale
Atmospheric Effects

48. Atmospheric Effects

49. Depth through Monocular Cues
•
•
•
•
•
•
Overlap
Base Height
Scale
Atmospheric Effects
Focus or “out-of-focus blur”
Parallax

50. Out-of-focus Blur & Depth of Field

51. Out-of-focus Blur

52. Depth through Monocular Cues
•
•
•
•
•
•
Overlap
Base Height
Scale
Atmospheric Effects
Focus or “out-of-focus blur”
Parallax

53. Parallax

54. Without Parallax

55. With Parallax

56. Additional Monocular Cues
Highlights

57. Additional Monocular Cues
Highlights
& Shadows

58. Additional Monocular Cues
Highlights & Shadows

59. Additional Monocular Cues
Highlights & Shadows

60. Additional Note on Perspective

61. Additional Note on Perspective

62. Additional Note on Perspective

63. Depth in Code
Draw Order
(or)
Depth Value:
0.0f to 1.0f
Most Distant
= 0.0f
Everything Else ~
Closest
= 1.0f

64. Overlap in Code
0.0f
1.0f
horizon
= 200;
screenHeight = 720;
depth
= ((position.Y - horizon) / (screenHeight - horizon));

65. Overlap in Code
screenHeight = 720;
horizon
= 200;
depth
= ((position.Y - horizon) / (screenHeight - horizon));
NOTE: You’ll need to know the base position!

66. Calculate Scale from Depth Value
• Perspective
– Scale:
0.25f
1.0f
scale = 0.25f + (depth * 0.75f);

67. Calculate Color from Depth Value
• Perspective
– Atmospheric Effects
float tempColor = 0.75f + (depth * 0.25);
tempColor = new Color(tempColorX, tempColorX, tempColorX);

68. Parallax from Depth
• Perspective
0.5f
– Parallax
1.0f
ViewPosition.X = 0.5f + (depth * 0.5f * ActualPosition.X);
ViewVelocity.X = 0.5f + (depth * 0.5f * ActualVelocity.X);

69. Depth
Example Program

70. Questions?
John Pile Jr
pile@champlain.edu
http://JohnPile.com
@JohnPile
Published by AK Peters | CRC Press: May 2013