john pile jr - using monocular cues to program an illusion of depth in 2d games
Post on 21-Oct-2014
176 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
Using Monocular Cues to
Program an Illusion of Depth John Pile Jr
21 September 2013
Art by Geoff Gunning
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
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
Today:
lots of concepts
a little sample code
short live demo
Role of Programmer in Art?
“Programmer Art”
Role of Programmer in Art?
http://sheilanash.com/
Role of Programmer in Art?
• Solve Problems & Create Solutions
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)
Role of Programmer in Art?
In order to successfully
create solutions we must understand the business
(at some level)
Role of Programmer in Art?
Using Monocular Cues
to program an illusion of depth
in 2D games
Concept: Sprites in 2D Games
Concept: Sprites in 2D Games
Not Much “depth”
Depth in Games
• Layering
– Background
Depth
• Layering
– Background
– Foreground
Depth
• Layering
– Background
– Foreground
• HUDs and GUIs
Traditional Role Playing Game (RPG)
Modern RPG
Gameplay
Rendered Cockpit
Implied Cockpit
MiniMaps, Compass, & Directional
Minimalist
Safe Area / Frames
Safe Frame / Safe Area = 90% of Screen Size
Depth Perception
Binocular Cues
&
Monocular Cues
Binocular Cues
Stereopsis: View the same image from different angles.
Monocular Cues
Provide information on depth when viewing a scene with one eye.
Depth through Monocular Cues
• Overlap (Layering)
– Background, Foreground, HUD, GUI
– In-game Objects
Overlapping
Depth through Monocular Cues
• Overlap
• Base Height
Base Height
in Egyptian artwork
Base Height
In traditional perspective artwork.
Base Height
In Games
Base Height
In Games
Base Height Indicated by Shadows
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
Scale
Scale (without Base Height)
Scale and Base Height
Scale and Overlap
Problem?
Base Height + Overlap
Base Height + Overlap + Scale
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
• Atmospheric Effects
Atmospheric Effects
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
• Atmospheric Effects
• Focus or “out-of-focus blur”
• Parallax
Out-of-focus Blur & Depth of Field
Out-of-focus Blur
Depth through Monocular Cues
• Overlap
• Base Height
• Scale
• Atmospheric Effects
• Focus or “out-of-focus blur”
• Parallax
Parallax
Without Parallax
With Parallax
Additional Monocular Cues
Highlights
Additional Monocular Cues
Highlights
& Shadows
Additional Monocular Cues
Highlights & Shadows
Additional Monocular Cues
Highlights & Shadows
Additional Note on Perspective
Additional Note on Perspective
Additional Note on Perspective
Depth in Code
Draw Order (or)
Depth Value: 0.0f to 1.0f
Most Distant = 0.0f
Everything Else ~
Closest = 1.0f
Overlap in Code
horizon = 200;
screenHeight = 720;
depth = ((position.Y - horizon) / (screenHeight - horizon));
0.0f
1.0f
Overlap in Code
screenHeight = 720;
horizon = 200;
depth = ((position.Y - horizon) / (screenHeight - horizon));
NOTE: You’ll need to know the base position!
Calculate Scale from Depth Value
• Perspective
– Scale:
scale = 0.25f + (depth * 0.75f);
0.25f
1.0f
Calculate Color from Depth Value
• Perspective
– Atmospheric Effects
float tempColor = 0.75f + (depth * 0.25); tempColor = new Color(tempColorX, tempColorX, tempColorX);
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
Depth
Example Program
http://JohnPile.com @JohnPile
John Pile Jr
Published by AK Peters | CRC Press: May 2013
Questions?