Perspective in 2D Games

7/28/2019 Perspective in 2D Games

1/25

gamedesigninitiativeat cornell university

the

Perspective in

2D Games

Lecture 15:


2/25


the

The Game CameraWhat makes a game 3-D?Everything is shown on a 2-D screen (mostly)

Have a user controlled cameraPosition camera to look at art from all sides3-D art has enough information to allow this

CIS 3000 limits you to a 2-D gameMeans that the camera is fixedRender art to the one visible side

Perspective


3/25


the

Camera in 2D Games

Perspective

Camera

WorldWorld origin

Camera origin


4/25


the

Specifying the Camera Camera is a coordinate space

Called eye space Eye position is at origin

How do we move camera? Transforms!

Result is inverse of scrolling Scrolling: move objects to eye Camera: move eye to objects Matrices are inverses of each

Perspective


5/25


the

Camera in XNAPurpose ofBasicEffectsclass View property holds eye space transform

also, Texture property holds current texture

Set camera with an effect pass effect.CurrentTechnique.Passes!Call pass.Apply() before you drawWorks with both sprites and trianglesSee Board.cs in Lab 2

Perspective


6/25


the

Drawing for a Perspective

Perspective

3D Models make it easy Rotate model to right position Flatten to jpeg, tiff, etc

But 3D modeling is hard Very technical programs Cannot draw by hand

How to draw perspective? Artist must capture camera


7/25


the

Plane Projection in Drawing

Perspective


8/25


the

Orthographic ProjectionProject perpendicular to an axisTop-down: perpendicular toz-axisSide scrolling: perpendicular toy-axis

Very easy to do artisticallyArt objects are flat tilesLayer tiles via compositing

But enforces 2-D gameplay3rd dimension lost; cannot be seen

Perspective


9/25


the

Orthographic Projection

Perspective


10/25


the

Parallax Scrolling Gives depth to orthographic projection Objects in background have distance Rate of scrolling depends on distance

Implement with multiple background layers Each layer scrolls at a different rate See website for sample code

Requires alpha composition of backgrounds Front layers must have some transparency

Perspective


11/25


the

Parallax Scrolling

Perspective


12/25


the

Axonometric Projection Off axis view of object View along all 3-axes

But picture is distortedNot a true projection Axes are foreshortened

Allows 3-D gameplay Cliffs are visible But may also hide objects!

Perspective

2 axes equal

all axes equal


13/25


the

Axonometric Projection

Perspective


14/25


the

Axonometric Projection

Perspective


15/25


the

Projection Types Isometric All axes are equal If need all dimensions Classic RPGs

Dimetricz-axis is very short

x,y axes are equal Orthographic+depth

Perspective

2 axes equal

all axes equal


16/25


the

x

y

z

Projection Geometry

Perspective

Axes relative to screenzgoes into the screenx,y are in screen plane

Axonometric coodinates May not be true coords Meaning ofx,y,z?

Orthographic substitutes Side-scroller:y is height Top-down: zis height

Side-Scrollerx

y

z

Top Downx

y

z


17/25


the

Isometric View

Perspective

w

h

27

4530

Game View Top View Side View

h

w

=1

3

If need all axes visible Common in classic RPGs


18/25

gamedesigninitiative

at cornell university

the

w

h

27

4530


Isometric View

Perspective

x,y,z= Axonometric Coords x,y = Screen Coordinates

x =x -z

y =y + (x+z)


19/25

gamedesigninitiative

at cornell university

the

Dimetric View (Side-Depth)

Perspective

h

w

=1

6w

h

7510


0.25

0.5

Best for vertical movement Gives depth to side Example: vertical shooter


20/25


the

Dimetric View (Side-Depth)

Perspective


x =x +(z)

y =y +(z)

w

h

7510


0.25

0.5


21/25


the

Dimetric View (Top-Depth)

w

h

78 ~24


0.5

0.25

Perspective

Best for horizontal movement Gives depth to top Example: Golden Axeh

w

=2

5


22/25


the

Dimetric View (Top-Depth)

Perspective

w

h

78 ~24


0.5

0.25


x =x +(z)

y =y +(z)


23/25


the

Drawing for Axonometric View Use boxes shown on slide Tiling boxes is easy Draw shape inside of box

Complex, large shapes? Glue together boxes Draw inside box group

Objects need many angles Getting alpha right is tricky

Perspective


24/25


the

Which Style to Use?Orthographic

Advantages Very easy to tile Very easy to composite

DisadvantagesNo 3-D gameplay Game feels flat

Axonometric

Advantages Relatively easy to tile Supports 3-D gameplay

Disadvantages Harder to composite Objects may be hidden

Perspective


25/25


the

Summary Camera represents eye space coordinates 3D games have arbitrary camera movement 2D games are limited to scrolling movement

2-D art requires you chose a projection Orthographic is easy, but limits gameplay Axonmetric has better gameplay but harder to draw

Axonmetric type depends on style of game Isometric common to classic RPGs Dimetric gives depth to traditional orthographic

Perspective

Perspective in 2D Games

Documents

Transcript of Perspective in 2D Games