Lecture "Graphics in Game" in Game Development course at University of Management and Technology Lahore for Spring 2017 Semester by Hafiz Ammar Siddiqui

1. Graphics in Game
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

2. Computer Graphics and Rendering
• Computer graphics is the generation and manipulation of images using a computer as a
renderingtool
• 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.Two popular graphics renderingtechniques are
• Rasterization
• Ray Tracing
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

3. 2D Graphics
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

4. 2D Graphics
• 2D graphics is the computer-based generation of 2D visuals from digital images, text or
2D geometric models
• There aretwo basic types of 2D graphics
• Raster Graphics (DigitalImages)
• Vector Graphics (2D Geometric Models)
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

5. Raster Graphics (Digital Images)
• Raster graphics are digital images which contain picture elements called pixels, each of
which has a particularlocation and value
• Digital image represents rectangular grid of pixels
• Each pixel in digital image has a color
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

6. Raster Graphics (Digital Images)
• Sprite: A sprite is a 2D rectangular digital image that is drawn to the screen
• Static Sprite: Contains a single sprite image (no animation)
• Dynamic Sprite: Contains multiple spriteimages (image sequence creates animation)
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

7. Vector Graphics (2D Geometric Models)
• 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 mathematicalequations
• 2D geometric models contain points, lines, polygons and curves
• Each pointin 2D geometric model has a definite position on X and Y axes
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

8. Vector Graphics (2D Geometric Models)
• Point: Point or vertex is an exact position or location in space
• Line: Line or edge is a connection between two points in space
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Point at (1,1)
Line from (0,0) to (1,1)

9. Vector Graphics (2D Geometric Models)
• Polygon: Polygon is closed shapeformed with straight lines
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Polygon with lines
(0,0) to (1,0)
(1,0) to (1,1)
(1,1) to (0,1)
(0,1) to (0,0)

10. Vector Graphics (2D Geometric Models)
• Curve: Curve is set of points that satisfy one or more equations and form a
continuouslybendingline without angles
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
x2+y2 = r2 y = sin(x)

11. 3D Graphics
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

12. 3D Graphics
• 3D graphics is the computer-basedgeneration of3D visuals from 3D geometric models
• 3D geometric models are created through a sequence of commands or mathematical
statements, a 3D geometric model file describes a series of points to be connected by
edges or mathematicalequations
• 3D geometric models contain points, lines, faces and surfaces
• Each pointin 3D geometric model has a definite position on X, Y and Z axes
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

13. 3D Geometric Models
• Point: Point or vertex is an exact position or location in space
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Point at (1,1,1)

14. 3D Geometric Models
• Line: Line or edge is a connection between two points in space
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Line from (1,1,1) to (2,2,2)

15. 3D Geometric Models
• Face: Face is closed shapeformed with straight lines which is equivalentto polygon
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Face with lines (0,0,1) to (1,1,1), (1,1,1) to (2,0,2), (2,0,2) to (0,0,1)

16. 3D Geometric Models
• Mesh: Mesh is composed of points, lines and faces that defines a 3D shape
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Mesh of unit cube

17. 3D Geometric Models
• Meshes
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

18. 3D Geometric Models
• Surface: Surface is set of points that satisfy two or more equations and form a
continuous plane
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
x = r cos (∅), y = r sin (∅), z = r2 [r= 1/3 to 1, ∅ = 0 to 2 𝜋]

19. Transformations
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

20. Coordinate Spaces
• A coordinatespacerepresents an object’s relationship to the rest of the scene
• Local Coordinate Space: Coordinates of object are defined locally with respect to the
object itself (usingan origin pointwhich 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)
• Object in a scene is represented byits position and orientation
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

21. Affine Transformations
• Affine transformation is any transformation which preserves collinearity (points,
straightlines and planes) after transformation
• Basic affine transformationsare
• Translate
• Rotate
• Scale
• Shear
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

22. Translate
• Translate changes position of 2D or 3D object in space in direction of at least one axis
by some units
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Translated in positive x-axis direction by 5 units Translated in negative x-axis direction by 5 units
5 5

23. Rotate
• Rotate a 2D object at particular angle from its origin and rotate a 3D object around at
least one axis at particularangle
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Rotated at angle of 45 degrees Rotated at angle of 45 degrees around z-axis

24. Scale
• Scale changes size of a 2D or 3D object in space along at least one axis by some factor
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Scaled up along x-axis by 2 factor Scaled down along y-axis by 0.5 factor

25. Shear
• Shear slants shapeof a 2D or 3D object along particularaxis by some factor
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Sheared along positive x-axis by 0.25 factor Sheared along negative x-axis by 0.25 factor

26. Camera Projections
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

27. 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 mappingto 2D
• Projection is formed by intersection of projector lines with the viewing plane
• Two types of projections
• ParallelProjection
• Perspective Projection
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

28. Parallel Projection
• Orthographic: Projector lines are paralleland perpendicular to the view plane
• Oblique: Projector lines are parallelbut not perpendicular to the view plane
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
View
plane
View
plane
Front view Top view Side view Actual object

29. Perspective Projection
• 1 Point Perspective: Lines of any1 axis convergeto its vanishingpointin view plane
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

30. Perspective Projection
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• 2 Point Perspective: Lines of any 2 axes converge to their vanishing points in view plane

31. Perspective Projection
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• 3 Point Perspective: Lines of all 3 axes convergeto their vanishingpoints in view plane

32. Coloring and Texture Mapping
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

33. Coloring
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Coloring is applying solid colors to a geometric model
• Every point (vertex) in a geometric model contains color information that is applied on
a polygon (face) which contains that point (vertex)
Polygons with single color Polygons with multiple colors

34. Texturing Mapping
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Texture: Array of values (1D, 2D, 3D) containing color, alpha, depth and normal. Can be
loaded from images or generated procedurallybya program
• Texel: A single array element in a texture which is characterized by texture coordinates
ranges from 0 to 1
• Texture Mapping: Process of applying texture to a geometric model. Point (vertex) in a
geometric modelcontain texture coordinateinformation thatis mapped to a texture

35. Texturing Mapping
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
0 1
0
1
u
v
2D Texture with texture coordinates 3D Geometric model Texture mapped

36. Texturing Mapping
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Texture mapping of a cube (cube mapping)

37. Other Maps & Mappings
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Height Map: Grayscale8-bit image which represents informationin 1 dimension
• Bump Mapping: Create fake bumps on the surface of object by perturbing the
surfacenormals which are used in lighting calculations
• Displacement Mapping: Manipulatethe position of points of a geometric model
• Normal Map: Color RGB 24-bit image which represents informationin 3 dimensions
• Normal Mapping: Create fake depth illusions on the surface of object by changing
the surfacenormals in 3 dimensions which are used in lighting calculations

38. Other Maps & Mappings
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Height map
Normal map
Displacement mapping
Normal mappingTexture

39. Lighting and Shading
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY

40. Lighting
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Light is emitted by light sources
• When light interacts with object, it gets reflected (scattered) or absorbed bysurface
• Lighting: The process of computing the light intensity reflected from a surface
Light source
Human eye Object

41. Shading
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Process of assigning a color to a pixel (creates illusion of depth in object by varying the
amount of darkness by evaluating angles between light rays, surface normals and
camera)
• Two most common types of shading
• Flat Shading: Pixels on the same polygon (surface) havesamecolor
• Smooth Shading: Each pixel haveits own (usuallydifferent) color

42. Shading
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Flat shading Smooth shading

43. Light Sources
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Ambient Light: It does not have a direction or position and its intensity is constant at all
points in a scene
• Point Light: Light rays are emitted from a point at some position in all possible
directions and their intensity decreases with squareofdistance
Point light

44. Light Sources
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Spot Light: 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

45. Light Sources
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Directional Light: Light rays are emitted in specified fixed direction (as if the point is
infinitely far away) and their intensity remains constant
• Area Light: Light rays are emitted from a 2D area in all directions uniformly across their
surfacearea and their intensity decreases with squareofdistance
Directional light

46. Light Reflections
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
• Ambient Reflection: Reflect light from other objects
• Diffuse Reflection: Reflect incoming light in all outgoing directions (assume equally)
which is independentfrom the viewing direction, for examplea rough surface
• Specular Reflection: Reflect incoming light in the direction of reflection which is
dependenton the viewing direction, for examplea shinysurfaceor mirror is ideal
Diffuse
SpecularIncoming

47. Light Reflections
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
Ambient Diffuse Specular Combine

48. Reference
• 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
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY