2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters...
Transcript of 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters...
![Page 1: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/1.jpg)
gamedesigninitiativeat cornell university
the
Perspective in2D Games
Lecture 16
![Page 2: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/2.jpg)
gamedesigninitiativeat cornell university
the
Graphics Lectures
� Drawing Images� SpriteBatch interface� Coordinates and Transforms
� Drawing Perspective� Camera� Projections
� Drawing Primitives� Color and Textures� Polygons
2D Sprite Graphics2
bare minimumto draw graphics
side-scroller vs.top down
necessary forlighting & shadows
![Page 3: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/3.jpg)
gamedesigninitiativeat cornell university
the
Take Away for Today
� What is the game “camera”?� How does it relate to screen space? Object space?
� How does the camera work in a 2D game? 3D?
� How do we give 2D games depth?� Advantages, disadvantages of orthographic view� Advantages, disadvantages of axonometric view
� How does “tileability” affect art in games?
Perspective3
![Page 4: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/4.jpg)
gamedesigninitiativeat cornell university
the
The Game Camera
� What makes a game 3-D?� Everything is shown on a 2-D screen (mostly)
� 3D game have a user controlled “camera”� Position camera to look at art from all sides� 3-D art has enough information to allow this
� CS/INFO 3152 limits you to a 2-D game� The game camera has a fixed perspective� You render all art to one visible side
Perspective4
![Page 5: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/5.jpg)
gamedesigninitiativeat cornell university
the
Camera in 2D Games
Perspective
Camera
World
World origin
Camera origin
5
![Page 6: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/6.jpg)
gamedesigninitiativeat cornell university
the
� Camera is a coord space� Called “eye space”
� Eye position at origin
� How to move camera?� Transforms again!
� Inverse of scrolling� Scrolling: move obj to eye
� Camera: move eye to obj
� Two matrices are inverses
Perspective
Specifying the Camera
6
![Page 7: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/7.jpg)
gamedesigninitiativeat cornell university
the
Camera in LibGDX
� LibGDX has a Camera class � Stores camera type, and eye location� We typically use OrthographicCamera� Define as size of screen, with origin at bottom
� Apply to SpriteBatch with setProjection()� Convert camera into a Matrix4 object� Use the combined field, not projection� See GameCanvas.cs in Lab 2
Perspective7
![Page 8: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/8.jpg)
gamedesigninitiativeat cornell university
the
� 3D Models make it easy� Rotate model to position� Flatten to jpeg, tiff, etc…
� But 3D modeling is hard� Very technical programs� Cannot draw “by hand”
� How to draw perspective?� Artist “captures” camera
� Realism creates problems
Perspective
Drawing for a Perspective
8
![Page 9: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/9.jpg)
gamedesigninitiativeat cornell university
the
Plane Projection in Drawing
Perspective9
![Page 10: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/10.jpg)
gamedesigninitiativeat cornell university
the
Plane Projection in Drawing
Perspective
Problem: Art assets are not invariant under translation.
10
![Page 11: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/11.jpg)
gamedesigninitiativeat cornell university
the
Vanishing Points are Not Our Friend
Perspective11
![Page 12: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/12.jpg)
gamedesigninitiativeat cornell university
the
Vanishing Points are Not Our Friend
Perspective12
![Page 13: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/13.jpg)
gamedesigninitiativeat cornell university
the
Vanishing Points are Not Our Friend
Perspective13
Should not be same
![Page 14: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/14.jpg)
gamedesigninitiativeat cornell university
the
Vanishing Points are Not Our Friend
Perspective14
2D games rely on distortional perspectives
![Page 15: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/15.jpg)
gamedesigninitiativeat cornell university
the
Orthographic Projection
Perspective
� Project perpendicular to an axis� Top-down: perpendicular to z-axis� Side scrolling: perpendicular to y-axis
� Very easy to do artistically� Art objects are flat tiles� Layer tiles via compositing
� But enforces 2-D gameplay� 3rd dimension lost; cannot be seen� Distorted: All rays to eye are parallel
15
![Page 16: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/16.jpg)
gamedesigninitiativeat cornell university
the
Perspective
Orthographic Projection
16
![Page 17: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/17.jpg)
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 course website for sample code
� Often requires some degree of transparency� Composite front layers with back layers
Perspective17
![Page 18: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/18.jpg)
gamedesigninitiativeat cornell university
the
Parallax Scrolling
Perspective18
![Page 19: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/19.jpg)
gamedesigninitiativeat cornell university
the
� Off axis view of object� View along all 3-axes
� Once again: distorted� Not a true projection� No vanishing point� Axes are “foreshortened”
� Allows 3-D gameplay� “Cliffs” are visible� May also hide objects!
Perspective
Axonometric Projection
2 axes equal
all axes equal
19
![Page 20: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/20.jpg)
gamedesigninitiativeat cornell university
the
Axonometric Projection
Perspective20
![Page 21: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/21.jpg)
gamedesigninitiativeat cornell university
the
Axonometric Projection
Perspective21
![Page 22: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/22.jpg)
gamedesigninitiativeat cornell university
the
� Isometric� All axes are equal� If need all dimensions� Used in classic RPGs
� Dimetric� z-axis is very short� x, y axes are equal� Orthographic+depth� For aesthetic reasons only
Perspective
Projection Types
2 axes equal
all axes equal
22
![Page 23: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/23.jpg)
gamedesigninitiativeat cornell university
the
� Axes relative to screen� z goes “into” the screen� x, y are in screen plane
� Axonometric coodinates� May not be “true” coords� “Meaning” of x, y, z?
� Orthographic substitutes� Side-scroller: y is height� Top-down: z is height
Perspective
Projection Geometry
Side-Scrollerx
y
zTop Down
x
y
z
23
![Page 24: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/24.jpg)
gamedesigninitiativeat cornell university
the
Isometric View
w
h
27°
45°30°
Game View Top View Side View
Perspective
h
w=
1�3
� If need all axes visible
� Used in classic RPGs
24
![Page 25: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/25.jpg)
gamedesigninitiativeat cornell university
the
Isometric View
w
h
27°
45°30°
Game View Top View Side View
Perspective
� x, y, z = Axonometric Coords
� x’, y’ = Screen Coordinates
x’ = x - z
y’ = y + ½(x+z)
25
![Page 26: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/26.jpg)
gamedesigninitiativeat cornell university
the
Isometric View: Zaxxon
Perspective26
![Page 27: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/27.jpg)
gamedesigninitiativeat cornell university
the
Dimetric View (Side-Depth)
Perspective
� For horizontal movement
� Gives depth to side
� Example: platformer
h
w=
1
6w
h
75° 10°
Game View Top View Side View
0.25
0.5
27
![Page 28: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/28.jpg)
gamedesigninitiativeat cornell university
the
Dimetric View (Side-Depth)
Perspective
w
h
75° 10°
Game View Top View Side View
0.25
0.5
� x, y, z = Axonometric Coords
� x’, y’ = Screen Coordinates
x’ = x +½(z)
y’ = y +¼(z)
28
![Page 29: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/29.jpg)
gamedesigninitiativeat cornell university
the
Dimetric View (Top-Depth)
Perspective
� For full 2D movement
� z still goes into screen
� Example: stealth games
h
w=
2
5w
h
78° ~24°
Game View Top View Side View
0.5
0.25
29
![Page 30: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/30.jpg)
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)
30
![Page 31: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/31.jpg)
gamedesigninitiativeat cornell university
the
Dimetric View (Top Down)
Perspective31
![Page 32: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/32.jpg)
gamedesigninitiativeat cornell university
the
� Use boxes shown on slide� Tiling boxes is easy� Draw shape inside box
� Complex, large shapes?� Glue together boxes� Draw inside box group
� Objects need many angles� Transparency is tricky� Standard: 8 compass points
� Example: LakeHills.aiPerspective
Drawing for Axonometric View
32
![Page 33: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/33.jpg)
gamedesigninitiativeat cornell university
the
� Use boxes shown on slide� Tiling boxes is easy� Draw shape inside box
� Complex, large shapes?� Glue together boxes� Draw inside box group
� Objects need many angles� Transparency is tricky� Standard: 8 compass points
� Example: LakeHills.aiPerspective
Drawing for Axonometric View
33
![Page 34: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/34.jpg)
gamedesigninitiativeat cornell university
the
Perspective34
Isometric Walking Animation
![Page 35: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/35.jpg)
gamedesigninitiativeat cornell university
the
Isometric Walking Animation
Perspective35
![Page 36: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/36.jpg)
gamedesigninitiativeat cornell university
the
Orthographic
� Advantages� Easy to make tiles
� Easy to composite
� Disadvantages� Movement is 2D
� Game feels flat
� Common in this class
Perspective
Which Style to Use?
Axonometric
� Advantages � Sort of easy to tile
� Some 3-D movement
� Disadvantages� Harder to composite
� Objects may be hidden
� Lot of work for artist
36
![Page 37: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/37.jpg)
gamedesigninitiativeat cornell university
the
Combining the Perspectives
Perspective37
![Page 38: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/38.jpg)
gamedesigninitiativeat cornell university
the
Combining the Perspectives
Perspective38
OrthographicCharacters
DimetricEnvironment
![Page 39: 2D Games - cs.cornell.edu€¦ · 75° 10° Game View Top View Side View 0.25 0.5 ... Characters Dimetric Environment. gamedesigninitiative at cornell university the Summary Camera](https://reader035.fdocuments.in/reader035/viewer/2022071002/5fbf6b66e08c5717c3721c2a/html5/thumbnails/39.jpg)
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� Axonometric 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
Perspective39