John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games

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

pile@champlain.edu

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

pile@champlain.edu

http://JohnPile.com @JohnPile

John Pile Jr

Published by AK Peters | CRC Press: May 2013

Questions?