Lecture "Game Graphics" in Game Design and Development course at University of Management and Technology Lahore by Hafiz Ammar Siddiqui

1. Game Graphics
Game Design and Development
By Hafiz Ammar Siddiqui
3

2. Computer Graphics and Rendering
• Computer graphics is the generation and manipulation of images using a computer as a
rendering tool
• Graphics rendering is a process of generating a graphical output from images or models by
means of computer programs. It can contain geometry, camera viewpoint, texture and
lighting information.
• Computer graphics can be mainly divided into two main categories
• 2D Graphics
• 3D Graphics

3. 2D Graphics
Raster Graphics
Sprite
Vector Graphics
Polygonal
Point
Line
Polygon
Spline
Curve

4. 2D Graphics
• 2D graphics is the computer-based generation of 2D visuals from digital images, text or 2D
geometric models
• The rendering of objects only in X-Y plane in the computer, which can only be viewed from
one angle
• 2D objects lack depth
• There are two basic types of 2D graphics
• Raster Graphics (Digital Images)
• Vector Graphics (2D Geometric Models)

5. • Raster graphics are digital images which contain picture elements called pixels, each of
which has a particular location and value
• Digital image represents rectangular grid of pixels
• Each pixel in digital image is represented by a color which is composed from RGB (Red,
Green, Blue) colors
• Each digital image is 2D array of pixels (color points), which is characterized by its height
and width
• They are stored in image formats like BMP, JPG, PNG, etc.
• In games, raster graphics are represented by Sprites
Raster Graphics (Digital Images)
2D Graphics

6. • A sprite is a 2D rectangular digital image that is drawn to the screen. There are mainly two
types of sprite
• Static Sprite: Contains a single sprite image (no animation)
• Dynamic Sprite: Contains multiple sprite images (image sequence creates animation)
Sprite
Raster Graphics Digital Images

7. • Vector graphics are geometric models which are created through a sequence of commands
or mathematical statements, a 2D geometric model file describes a series of points to be
connected by edges or mathematical equations
• 2D geometric modelling is majorly composed of following 2 types
• Polygonal
• Point
• Line
• Polygon
• Spline
• Curve
Vector Graphics (2D Geometric Models)
2D Graphics

8. • Point or vertex is an exact position or
location in space (X and Y axes)
Point
Polygonal
0
0
1
1
Point at (1,1)
• Line or edge is a connection between
two points in space (X and Y axes)
Line
Polygonal
0
0
1
1
Line from (0,0) to (1,1)
X X
YY

9. • Polygon is closed shape formed with straight lines
Polygon
Polygonal
0
0
1
1
Polygon with lines
(0,0) to (1,0)
(1,0) to (1,1)
(1,1) to (0,1)
(0,1) to (0,0)

10. • Curve is set of points that satisfy one or more equations and form a continuously bending
line without angles
Curve
Spline
x2+y2 = r2 y = sin(x)

11. 3D Graphics
3D Geometric Models
Polygonal
Point
Line
Face
Mesh
Spline
Surface

12. 3D Graphics
• 3D graphics is the computer-based generation of 3D visuals from 3D geometric models
• 3D geometric models are created through a sequence of commands or mathematical
statements, its file describes information about series of points and their connectivity
• 3D geometric modelling is majorly composed of following 2 types
• Polygonal
• Point
• Line
• Face
• Mesh
• Spline
• Surface

13. • Point or vertex is an exact position or
location in space (X ,Y and Z axes)
Point
Polygonal
• Line or edge is a connection between
two points in space (X ,Y and Z axes)
Line
Polygonal
Line from (2,2,2) to (3,3,2)Point at (2,2,2)
1
0
2
3
1
2
3
4
21
3 4 5
5
1
0
2
3
1
2
3
4
21
3 4 5
5X
Y
Z X
Y
Z

14. • Face is closed shape formed with straight lines which is equivalent to polygon
Face
Polygonal
Face with lines
A:(2,2,2) to B:(3,3,2)
A:(2,2,2) to C:(4,2.5,5)
B:(3,3,2) to C:(4,2.5,5)
1
0
2
3
1
2
3
4
2
1
3
4 5
5
X
Y
Z
A
B
C

15. • Mesh is composed of points, lines and faces that defines a 3D shape
Mesh
Polygonal
Mesh of unit cube
X
Y
Z
(1,1,1)(0,1,1)
(1,1,0)(0,1,0)
(0,0,1) (1,0,1)
(1,0,0)(0,0,0)

16. Mesh
Polygonal
• To increase the quality of a mesh shape, the number of points are increased
Spheres with increasing points Faces with increasing points

17. Surface
Spline
• Surface is set of points that satisfy two or more equations and form a continuous plane
x = r cos (∅), y = r sin (∅), z = r2 [r= 1/3 to 1, ∅ = 0 to 2 "]

18. Transformations & Space
Affine Transformations
Translate
Rotate
Scale
Shear
Coordinate Space
Local Coordinate Space
Global Coordinate Space

19. • Affine transformation is any transformation which preserves collinearity (points, straight
lines and planes) after transformation
• After an affine transformation of any object, all the points lying on its lines initially still lie
on its line, and all the ratios of lines with respect to each other remains the same.
• Basic affine transformations are
• Translate
• Rotate
• Scale
• Shear
Affine Transformations
Transformations & Space

20. • Translate changes position of 2D or 3D object in space in direction of at least one axis
Translate
Affine Transformations
0 105
Y
X
0 105
Y
X15
0 105
Y
X
0 105
Y
X
15
Translated in positive x-axis direction by 5 units Translated in negative x-axis direction by 5 units
Before
After

21. • Rotate a 2D object at particular angle from its origin and rotate a 3D object around at least
one axis at particular angle
Rotate
Affine Transformations
0
Y
X 0
Y
X
0
Y
X
Rotated at angle of 45 degrees Rotated at angle of 45 degrees around z-axis
Before
After
0
Y
X

22. • Scale changes size of a 2D or 3D object in space along at least one axis
Scale
Affine Transformations
0 105
Y
X
0 105
Y
X15
0
Y
X
Scaled up along x-axis by 2 factor Scaled down along y-axis by 0.5 factor
Before
After
15
20
2
1
0
Y
X
2
1

23. • Shear slants shape of a 2D or 3D object along particular axis
Shear
Affine Transformations
0
Y
X
0
Y
X
0
Y
X
0
Y
X
Sheared along positive x-axis by 0.25 factor Sheared along negative x-axis by 0.5 factor
Before
After

24. • A space acts as a container for all the objects (2D or 3D) inside it
• Object in a space is represented by its position and orientation
• A coordinate space represents an object’s relationship to the rest of the scene
• Every space has its own origin point and every object inside space has its own origin point,
relationship between space and its object is defined by both of their origin points
• Local Coordinate Space: Coordinates of object are defined locally with respect to the
object itself (using an origin point which exists within the object)
• Global (World) Coordinate Space: Coordinates of object are global with respect to the
scene (using an origin point which exists within the scene)
Coordinate Space
Transformations & Space

25. Coordinate Space
Transformations & Space
0
1
1
+X
+Y
-X
-Y
2
2
-1
-1
A B
DC
S
Space with origin at point S:(0,0)
Object O(ABCD) with origin at point A:(1,1)
Global Space: Between X and Y
Local Space: Between XO and YO
YO
XO

26. Coordinate Space
Transformations & Space
0
1
1
+X
+Y
-X
-Y
-1
-1
S
Space with origin at point S:(0,0)
Object O(ABCD) rotated 45 degrees
Global Space: Between X and Y
Local Space: Between XO and YO
A
B
D
C
YO
XO

27. Projection
Parallel Projection
Orthographic
Oblique
Perspective Projection
1 Point
2 Point
3 Point

28. Projection
• Projection is the display of 3D objects on a 2D plane also known as the view plane (output
display - viewport with camera perspective and viewpoint), defines how objects will appear
on the screen after mapping to 2D
• Projection is formed by intersection of projector lines with the viewing plane
• Process of transforming a 3D object into a 2D object to display it on a 2D screen
• Mapping 3D points into a 2D plane (view plane / projection plane)
• Two types of projections
• Parallel Projection
• Perspective Projection

29. • All projector lines converge to different parallel infinite points
• It maintains the relative proportion of an object but can not present a realistic view
Parallel Projection
Projection
2D View Plane 3D ObjectOutput

30. • Projector lines are parallel and perpendicular to the view plane
Orthographic
Parallel Projection
View
Plane
• Projector lines are parallel but not perpendicular to the view plane
Oblique
Parallel Projection
View
Plane
Actual ObjectSide ViewTop ViewFront ViewProjector Lines
Projector Lines View

31. • All projector lines converge to a fixed finite vanishing point
• It does not maintain the relative proportion of an object but can present a realistic view
Perspective Projection
Projection
2D View Plane 3D ObjectOutput

32. 1 Point
Perspective Projection
• Lines of 1 axis
converge to its vanishing
point in view plane
Z axis converging
2 Point
Perspective Projection
• Lines of 2 axes converge
to their vanishing points
in view plane
X and Z axis converging
3 Point
Perspective Projection
• Lines of 3 axes converge
to their vanishing points
in view plane
X, Y and Z axis converging

33. Painting
Coloring
Texturing
Texture Map
Normal and Height Map

34. • Coloring is process of applying solid colors to a geometric model
• A point (vertex) in a geometric model can contain color information that is applied on a
polygon (face) which contains that point (vertex) on a polygonal model
Coloring
Painting
Same color vertices in a polygon Different color vertices in a polygon

35. • Texture or Texture Map: Array of values (1D, 2D, 3D) containing color, alpha, depth and
normal. Can be loaded from digital images or generated procedurally by an algorithm
• Texel: A single array element in a texture which is characterized by texture coordinates
ranges from 0 to 1
• Texture Mapping or Texturing: Process of applying texture to a geometric model. Point
(vertex) in a geometric model contain texture coordinate information that is mapped to a
texture. It is done through a mapping function which maps (x,y) coordinates of geometric
model onto (u,v) texture coordinates. Each polygon in polygonal geometric model is
assigned a region of texture through mapping function
Texture Map
Texturing

36. Texture Map
Texturing
0
U
V
1
1
A B
DC
UV Texture Coordinates
0.5
0.5
3D Model without Texture 3D Model with Texture
Flat Mapping

37. Texture Map
Texturing
Cube Mapping

38. • Normal Map: Color RGB 24-bit image which represents information in 3 dimensions
• Normal Mapping: Create fake depth illusions on the surface of object by changing the
surface normals in 3 dimensions which are used in lighting calculations. It stores
direction on each pixel
• Height Map: Grayscale 8-bit image which represents information in 1 dimension
• Bump Mapping: Create fake bumps on the surface of object by perturbing the surface
normals which are used in lighting calculations
• Displacement Mapping: Manipulate the actual position of points (vertices) of a
geometric model
Normal and Height Map
Texturing

39. Normal and Height Map
Texturing
Height map
Normal map
Displacement mapping
Normal mapping
Texture

40. Lighting
Light Sources
Ambient Light
Point Light
Spot Light
Directional Light
Area Light
Light Reflections
Ambient Reflection
Diffuse Reflection
Specular Reflection

41. Lighting
• Light is emitted by light sources
• When light interacts with object, it gets reflected (scattered) or absorbed by surface
• Lighting is the process of computing the light intensity reflected from a surface
Light source
Human eye Object

42. • It does not have a direction or position and its intensity is constant at all points in a scene
Ambient Light
Light Sources
• Light rays are emitted from a point at some position in all possible directions and their
intensity decreases with square of distance
Point Light
Light Sources
Point light

43. • Light rays are emitted from a point at some position that are directed with cone projection
and their intensity is highest at the center which decreases with square of distance
Spot Light
Light Sources
Spot light

44. • Light rays are emitted in specified fixed direction (as if the point is infinitely far away) and
their intensity remains constant
Directional Light
Light Sources
Directional light
• Light rays are emitted from a 2D area in all directions uniformly across their surface area
and their intensity decreases with square of distance
Area Light
Light Sources

45. • Constant non-directional ambient light
Ambient Reflection
Light Reflections
• Reflect incoming light in all outgoing directions (assume equally) which is independent from
the viewing direction, for example a rough surface
• Incoming light ray is reflected uniformly in each direction
Diffuse Reflection
Light Reflections
Diffuse Reflection
Incoming Ray

46. • Reflect incoming light in the direction of reflection which is dependent on the viewing
direction, for example a shiny surface or mirror is ideal
• Incoming light ray is reflected into a single direction
• It depends on viewing point
• Also described as mirror like reflection of light
Specular Reflection
Light Reflections
Specular Reflection
Incoming Ray

47. Ambient + Diffuse + Specular
Light Reflections
Ambient Ambient
+
Diffuse
Specular Ambient
+
Diffuse
+
Specular

48. References
• Game Graphics Programming - Allen Sherrod
• 3D Math Primer for Graphics and Game Development - Fletcher Dunn, Ian Parberry
• Fundamentals of Computer Graphics - Peter Shirley, Steve Marschner
• Principles of Computer Graphics – Shalini Govil