john pile jr - using monocular cues to program an illusion of depth in 2d games
Post on 21-Oct-2014
178 views
DESCRIPTION
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.TRANSCRIPT
![Page 1: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/1.jpg)
Using Monocular Cues to
Program an Illusion of Depth John Pile Jr
21 September 2013
Art by Geoff Gunning
![Page 2: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/2.jpg)
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
http://JohnPile.com @JohnPile
John Pile Jr
Published by AK Peters | CRC Press: May 2013
![Page 3: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/3.jpg)
The Game Studio:
Degree School/Division Game Artists Art Game Designers Creative Media Game Programmers Comp. Sci. & Soft. Eng. Game Managers Business Champlain College: 2000 The Game Studio: 450 Game Programming: 115
![Page 4: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/4.jpg)
Today:
lots of concepts
a little sample code
short live demo
![Page 5: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/5.jpg)
Role of Programmer in Art?
“Programmer Art”
![Page 6: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/6.jpg)
Role of Programmer in Art?
http://sheilanash.com/
![Page 7: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/7.jpg)
Role of Programmer in Art?
• Solve Problems & Create Solutions
![Page 8: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/8.jpg)
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)
![Page 9: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/9.jpg)
Role of Programmer in Art?
In order to successfully
create solutions we must understand the business
(at some level)
![Page 10: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/10.jpg)
Role of Programmer in Art?
Using Monocular Cues
to program an illusion of depth
in 2D games
![Page 11: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/11.jpg)
Concept: Sprites in 2D Games
![Page 12: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/12.jpg)
Concept: Sprites in 2D Games
Not Much “depth”
![Page 13: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/13.jpg)
Depth in Games
• Layering
– Background
![Page 14: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/14.jpg)
![Page 15: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/15.jpg)
![Page 16: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/16.jpg)
Depth
• Layering
– Background
– Foreground
![Page 17: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/17.jpg)
![Page 18: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/18.jpg)
![Page 19: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/19.jpg)
Depth
• Layering
– Background
– Foreground
• HUDs and GUIs
![Page 20: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/20.jpg)
![Page 21: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/21.jpg)
Traditional Role Playing Game (RPG)
![Page 22: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/22.jpg)
Modern RPG
![Page 23: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/23.jpg)
Gameplay
![Page 24: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/24.jpg)
Rendered Cockpit
![Page 25: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/25.jpg)
Implied Cockpit
![Page 26: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/26.jpg)
MiniMaps, Compass, & Directional
![Page 27: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/27.jpg)
Minimalist
![Page 28: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/28.jpg)
Safe Area / Frames
Safe Frame / Safe Area = 90% of Screen Size
![Page 29: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/29.jpg)
Depth Perception
Binocular Cues
&
Monocular Cues
![Page 30: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/30.jpg)
Binocular Cues
Stereopsis: View the same image from different angles.
![Page 31: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/31.jpg)
Monocular Cues
Provide information on depth when viewing a scene with one eye.
![Page 32: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/32.jpg)
Depth through Monocular Cues
• Overlap (Layering)
– Background, Foreground, HUD, GUI
– In-game Objects
![Page 33: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/33.jpg)
Overlapping
![Page 34: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/34.jpg)
Depth through Monocular Cues
• Overlap
• Base Height
![Page 35: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/35.jpg)
Base Height
in Egyptian artwork
![Page 36: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/36.jpg)
Base Height
In traditional perspective artwork.
![Page 37: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/37.jpg)
Base Height
In Games
![Page 38: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/38.jpg)
Base Height
In Games
![Page 39: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/39.jpg)
Base Height Indicated by Shadows
![Page 40: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/40.jpg)
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
![Page 41: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/41.jpg)
Scale
![Page 42: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/42.jpg)
Scale (without Base Height)
![Page 43: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/43.jpg)
Scale and Base Height
![Page 44: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/44.jpg)
Scale and Overlap
Problem?
![Page 45: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/45.jpg)
Base Height + Overlap
![Page 46: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/46.jpg)
Base Height + Overlap + Scale
![Page 47: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/47.jpg)
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
• Atmospheric Effects
![Page 48: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/48.jpg)
Atmospheric Effects
![Page 49: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/49.jpg)
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
• Atmospheric Effects
• Focus or “out-of-focus blur”
• Parallax
![Page 50: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/50.jpg)
Out-of-focus Blur & Depth of Field
![Page 51: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/51.jpg)
Out-of-focus Blur
![Page 52: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/52.jpg)
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
• Atmospheric Effects
• Focus or “out-of-focus blur”
• Parallax
![Page 53: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/53.jpg)
Parallax
![Page 54: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/54.jpg)
Without Parallax
![Page 55: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/55.jpg)
With Parallax
![Page 56: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/56.jpg)
Additional Monocular Cues
Highlights
![Page 57: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/57.jpg)
Additional Monocular Cues
Highlights
& Shadows
![Page 58: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/58.jpg)
Additional Monocular Cues
Highlights & Shadows
![Page 59: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/59.jpg)
Additional Monocular Cues
Highlights & Shadows
![Page 60: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/60.jpg)
Additional Note on Perspective
![Page 61: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/61.jpg)
Additional Note on Perspective
![Page 62: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/62.jpg)
Additional Note on Perspective
![Page 63: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/63.jpg)
Depth in Code
Draw Order (or)
Depth Value: 0.0f to 1.0f
Most Distant = 0.0f
Everything Else ~
Closest = 1.0f
![Page 64: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/64.jpg)
Overlap in Code
horizon = 200;
screenHeight = 720;
depth = ((position.Y - horizon) / (screenHeight - horizon));
0.0f
1.0f
![Page 65: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/65.jpg)
Overlap in Code
screenHeight = 720;
horizon = 200;
depth = ((position.Y - horizon) / (screenHeight - horizon));
NOTE: You’ll need to know the base position!
![Page 66: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/66.jpg)
Calculate Scale from Depth Value
• Perspective
– Scale:
scale = 0.25f + (depth * 0.75f);
0.25f
1.0f
![Page 67: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/67.jpg)
Calculate Color from Depth Value
• Perspective
– Atmospheric Effects
float tempColor = 0.75f + (depth * 0.25); tempColor = new Color(tempColorX, tempColorX, tempColorX);
![Page 68: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/68.jpg)
Parallax from Depth
• Perspective
– Parallax
ViewPosition.X = 0.5f + (depth * 0.5f * ActualPosition.X);
ViewVelocity.X = 0.5f + (depth * 0.5f * ActualVelocity.X);
0.5f
1.0f
![Page 69: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/69.jpg)
Depth
Example Program
![Page 70: John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games](https://reader033.vdocuments.mx/reader033/viewer/2022042613/5446d8caafaf9f5d178b4797/html5/thumbnails/70.jpg)
http://JohnPile.com @JohnPile
John Pile Jr
Published by AK Peters | CRC Press: May 2013
Questions?