of 25
7/28/2019 Perspective in 2D Games
1/25
gamedesigninitiativeat cornell university
the
Perspective in
2D Games
Lecture 15:
7/28/2019 Perspective in 2D Games
2/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
3/25
gamedesigninitiativeat cornell university
the
Camera in 2D Games
Perspective
Camera
WorldWorld origin
Camera origin
7/28/2019 Perspective in 2D Games
4/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
5/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
6/25
gamedesigninitiativeat cornell university
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/28/2019 Perspective in 2D Games
7/25
gamedesigninitiativeat cornell university
the
Plane Projection in Drawing
Perspective
7/28/2019 Perspective in 2D Games
8/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
9/25
gamedesigninitiativeat cornell university
the
Orthographic Projection
Perspective
7/28/2019 Perspective in 2D Games
10/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
11/25
gamedesigninitiativeat cornell university
the
Parallax Scrolling
Perspective
7/28/2019 Perspective in 2D Games
12/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
13/25
gamedesigninitiativeat cornell university
the
Axonometric Projection
Perspective
7/28/2019 Perspective in 2D Games
14/25
gamedesigninitiativeat cornell university
the
Axonometric Projection
Perspective
7/28/2019 Perspective in 2D Games
15/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
16/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
17/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
18/25
gamedesigninitiative
at cornell university
the
w
h
27
4530
Game View Top View Side View
Isometric View
Perspective
x,y,z= Axonometric Coords x,y = Screen Coordinates
x =x -z
y =y + (x+z)
7/28/2019 Perspective in 2D Games
19/25
gamedesigninitiative
at cornell university
the
Dimetric View (Side-Depth)
Perspective
h
w
=1
6w
h
7510
Game View Top View Side View
0.25
0.5
Best for vertical movement Gives depth to side Example: vertical shooter
7/28/2019 Perspective in 2D Games
20/25
gamedesigninitiativeat cornell university
the
Dimetric View (Side-Depth)
Perspective
x,y,z= Axonometric Coords x,y = Screen Coordinates
x =x +(z)
y =y +(z)
w
h
7510
Game View Top View Side View
0.25
0.5
7/28/2019 Perspective in 2D Games
21/25
gamedesigninitiativeat cornell university
the
Dimetric View (Top-Depth)
w
h
78 ~24
Game View Top View Side View
0.5
0.25
Perspective
Best for horizontal movement Gives depth to top Example: Golden Axeh
w
=2
5
7/28/2019 Perspective in 2D Games
22/25
gamedesigninitiativeat cornell university
the
Dimetric View (Top-Depth)
Perspective
w
h
78 ~24
Game View Top View Side View
0.5
0.25
x,y,z= Axonometric Coords x,y = Screen Coordinates
x =x +(z)
y =y +(z)
7/28/2019 Perspective in 2D Games
23/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
24/25
gamedesigninitiativeat cornell university
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
7/28/2019 Perspective in 2D Games
25/25
gamedesigninitiativeat cornell university
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