Game Engine Development Yingcai Xiao Game Engine Development

Game Engine Development Yingcai Xiao

Game Engine Development What do we need? What tools do we have? How can we design and implement? We will answer those questions in an agile way.

What do we need?

Video Game: Interactive animation Display Device Driver (GDI) Input Device Driver Game (Software)

Video Game: Interactive animation Similar to all other programs: data, algorithms, input, output. Data: Game Objects Algorithms: Animation Input: Interactive Events Output: Display

Game Objects (GO) GO = Geometry + Attribute

Game Objects (GO) Geometry: primitives: points, lines, triangles, polygons, spheres tetrahedrons, hexahedrons, … meshes: grids: elevation, uniform, rectlinear, structured, tin: triangular integrated network

Game Objects (GO) Geometry: meshes: indexed Free/Smooth curves and surfaces: B-Splines

Game Objects (GO) Geometry: Stroked: stroked primitives stroked free curves and surfaces composited: avatars, prefabs, packages, …

Game Objects (GO) Conversions to indexed meshes:

Game Objects (GO) Convert a plane to an indexed mesh: y = 0; 0<=x<=10 0<=z<=10

Graphics Engine / Display Engine / Shading Engine

Open. GL: https: //www. opengl. org • Open Graphics Library • SGI • Open Source • De facto Industry Standard

Open. GL: https: //www. opengl. org • With shaders to support GPU. • Without shaders for easy learning. • We are going to start without shaders.

Open. GL: https: //www. opengl. org • Tutorial with shaders: http: //www. opengl-tutorial. org • Tutorial without shaders: http: //www. cs. uccs. edu/~ssemwal/index. GLT utorial. html • We are going to have examples for both but start with http: //www. cs. uccs. edu/~ssemwal/index. GLT utorial. html without shaders.

Computer Graphics Textbooks Edward Angel, University of New Mexico Dave Shreiner, ARM, Inc Interactive Computer Graphics: A Top-Down Approach Using Open. GL, 5 E. (no shaders) Interactive Computer Graphics: A Top-Down Approach with Shader-Based Open. GL, 6/E Interactive Computer Graphics: A Top-Down Approach with Web. GL, 7/E

Rotating Color Cube An Open. GL Example for Interactive Animation without Using a Game Engine https: //youtu. be/cwb. L 47 ovz. FY https: //www. youtube. com/watch? v=L 5 jlo. Vbg. Adk https: //rosettacode. org/wiki/Draw_a_rotating_cube

Interactive Animation Programming with Open. GL l Input: interaction, user control: EDP (event driving programming). l Output: Graphics: Open. GL API. l Data Structures: graphics objects representations. l Algorithms: animations in event handlers. l Non OOP: Using C, a subset of C++, for speed.

An Open. GL Example for Interactive Animation • Users: interactive 3 D animation • Programmers: event-driven 3 D animation of geometric transformations. • C part of C++ • Open. GL for display • Glut (GL Utility Toolkit) for interaction • https: //www. opengl. org/resources/libraries/glut/

The “Color Cube” example • The “main” function: • • • initializes windows, display settings, and event handlers. Starts the event loop. Post the first Redisplay event.

The “Color Cube” example • // Initialization while (1) { // event loop event = get. Event(); // from the queue switch (event) { case Redisplay: display (); break; case Keyboard: keyboard(); break; default: idle(); } }

The “Color Cube” example • The “display” function: • • draws the game objects Open. GL is a state machine: set the active parameters before specifying vertices. Per vertex setting: color, normal, texture, … New vertices will use the current settings until they are changed. • •

The “Color Cube” example • The “keyboard” function: • • The event handler for keyboard events. Change display parameters to control the animation. E. g. rotation angles, parametric variable t, simulation variables such as speed. Don’t directly call the “display” function. Post the Redisplay event after everything is set. glut. Post. Redisplay();

The “Color Cube” example • The “idle” function: • • • The event handler for the “idle” event. Invoked when no more event in the event queue. Change display parameters to control the background animation. E. g. rotation angles, parametric variable t, simulation variables such as speed. Don’t directly call the “display” function. Post the Redisplay event after everything is set. glut. Post. Redisplay();

The “Color Cube” example // Data structures and data, no objects enum AXIS { x. Axis = 0, y. Axis = 1, z. Axis = 2}; double rotate_y=2; double rotate_x=2; double rotate_z=2; int axis = x. Axis;

The “Color Cube” example void display(){ // Clear screen (frame buffer) and Z-buffer gl. Clear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); gl. Load. Identity(); // Set rotation matrix to identity, no rotation // Set rotation (amount of rotation from initial position, vector of rotation) gl. Rotatef( rotate_x, 1. 0, 0. 0 ); // (amount of rotation, x axis) gl. Rotatef( rotate_y, 0. 0, 1. 0, 0. 0 ); // (amount of rotation, y axis) gl. Rotatef( rotate_z, 0. 0, 1. 0 ); // (amount of rotation, z axis)

The “Color Cube” example // display() function continues // Create the color cube (Game Object) as six colored surfaces // FRONT gl. Begin(GL_POLYGON); gl. Color 3 f( 1. 0, 0. 0 ); gl. Vertex 3 f( 0. 5, -0. 5 ); // P 1 is red gl. Color 3 f( 0. 0, 1. 0, 0. 0 ); gl. Vertex 3 f( 0. 5, -0. 5 ); // P 2 is green gl. Color 3 f( 0. 0, 1. 0 ); gl. Vertex 3 f( -0. 5, -0. 5 ); // P 3 is blue gl. Color 3 f( 1. 0, 0. 0, 1. 0 ); gl. Vertex 3 f( -0. 5, -0. 5 ); // P 4 is purple gl. End();

The “Color Cube” example // display() function continues // Create the color cube (Game Object) as six colored surfaces // White side - BACK gl. Begin(GL_POLYGON); gl. Color 3 f( 1. 0, 1. 0 ); gl. Vertex 3 f( 0. 5, -0. 5, 0. 5 ); gl. Vertex 3 f( -0. 5, 0. 5 ); gl. End();

The “Color Cube” example // display() function continues // Create the color cube (Game Object) as six colored surfaces // Purple side - RIGHT gl. Begin(GL_POLYGON); gl. Color 3 f( 1. 0, 0. 0, 1. 0 ); gl. Vertex 3 f( 0. 5, -0. 5 ); gl. Vertex 3 f( 0. 5, -0. 5, 0. 5 ); gl. End();

The “Color Cube” example // display() function continues // Create the color cube (Game Object) as six colored surfaces // Green side - LEFT gl. Begin(GL_POLYGON); gl. Color 3 f( 0. 0, 1. 0, 0. 0 ); gl. Vertex 3 f( -0. 5, 0. 5, -0. 5 ); gl. Vertex 3 f( -0. 5, -0. 5 ); gl. End();

The “Color Cube” example // display() function continues // Create the color cube (Game Object) as six colored surfaces // Blue side - TOP gl. Begin(GL_POLYGON); gl. Color 3 f( 0. 0, 1. 0 ); gl. Vertex 3 f( 0. 5, 0. 5 ); gl. Vertex 3 f( 0. 5, -0. 5 ); gl. Vertex 3 f( -0. 5, 0. 5 ); gl. End();

The “Color Cube” example // display() function continues // Create the color cube (Game Object) as six colored surfaces // Red side - BOTTOM gl. Begin(GL_POLYGON); gl. Color 3 f( 1. 0, 0. 0 ); gl. Vertex 3 f( 0. 5, -0. 5, 0. 5 ); gl. Vertex 3 f( -0. 5, -0. 5 ); gl. End();

The “Color Cube” example // display() function continues // Finished creating the color cube // Draw it by flush to the (back) display buffer gl. Flush(); // Make the back display buffer visible (swap it to the front). Double buffering. glut. Swap. Buffers(); } // end of display function.

The “Color Cube” example // Keyboard event handler changes display parameter and then invoke display() void keyboard( int key, int x, int y ) { if (key == 'x') axis = x. Axis; else if (key == 'y') axis = y. Axis; else if (key == 'z') axis = z. Axis; glut. Post. Redisplay(); // create an event to trigger the system to call display() }

The “Color Cube” example // “idle” event handler, changes display parameter and then invoke display() void idle() { if (axis == x. Axis) rotate_x += 0. 1; else if (axis == y. Axis) rotate_y += 0. 1; else if (axis == z. Axis) rotate_z +=0. 1; glut. Post. Redisplay(); // create an event to trigger the system to call display() }

The “Color Cube” example // The main function for initialization and setup int main(int argc, char* argv[]){ // initialize display window glut. Init(&argc, argv); glut. Init. Display. Mode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glut. Create. Window(“Rotating Cube"); gl. Enable(GL_DEPTH_TEST);

The “Color Cube” example // The main function for initialization and setup // Register event handlers glut. Display. Func(display); glut. Special. Func(keyboard); glut. Idle. Func(idle); // start the event loop glut. Main. Loop(); } // end of main

The “Color Cube” example • // Initialization while (1) { // event loop event = get. Event(); // from the queue switch (event) { case Redisplay: display (); break; case Keyboard: keyboard(); break; default: idle(); } }

The “Color Cube” example • // System initialization • // Call user initialization function: Start(); while (1) { // start event loop event = get. Event(); // from the queue update(); idle(); }

Rotating Cube with Texture Mapping https: //www. khronos. org/webgl/wiki/Tutorial

Rotating Cube with Texture Mapping 1. Web. GL based. 2. Coding Shaders. 3. Can run on GPUs.

A More Advanced Open. GL Example UA. cpp

The “UA” example • • • Matrix Stack Matrix Mode Display Aspect Ratio Lighting Material Properties of GOs.

Open. GL Matrix Stack • • • Matrices for geometric transformations are stacked. Stack: first come last serve. The last matrix will be applied first. The following code segment rotate before translation slated(-2, -1. 0, -6); ef(rotation. x, 1, 0, 0); • Use gl. Push. Matrix to save the current stack. gl. Tran gl. Rotat

Open. GL Matrix Mode • • • Two types of geometric transformation matrices: Projection and Model. View Two types of projection matrices: perspective and parallel. Perspective projection: foreshortening effect for realistic landscape display. Parallel projection: no foreshortening effect for accurate measurements in, e. g. , CAD. Model. View mode take care all non projection matrices (translation, scaling, rotation, view orientation, …)

Perspective Projection: Foreshortening: The size of the projected object becomes smaller when the object moves away from the eye. P 1 P 2 P’ 1 z P’ 2 Default: eye is at a negative z location and looks towards the positive z direction.

Perspective Projection void gl. Frustum( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near. Val,

Parallel (Orthoganal) Projection void gl. Ortho( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near. Val,

glu. Look. At: eye location and direction void glu. Look. At( GLdouble eye. X, GLdouble eye. Y, GLdouble eye. Z, GLdouble center. X, GLdouble center. Y, GLdouble center. Z, GLdouble up. X, GLdouble up. Y, GLdouble up. Z); Edward Angel

Display Aspect Ratio • • To keep round objects round. ar = display-width / display-height; gl. Frustum(-ar, -1. 0, 2. 0, 100. 0); gl. Ortho(-ar, -1. 0, 2. 0, 100. 0);

Shading • • • Rendering of shades on 3 D objects. Lighting. Material Properties of GOs.

Game Engine Design Summary

Video Game: Interactive animation Similar to all other programs, a Game Engine needs to take care of: data, algorithms, input, output. Data: Game Objects Algorithms: Animation Input: Interactive Events Output: Display

Game Objects (GO) Attributes: Appearance color, normal, transparency, texture, bumpy map, normal map, …

Game Objects (GO) Physical Properties: rigid (fixed geometry) deformable (changeable geometry) breakable (changeable topology) intangible (no defined geometry) roughness, friction, reflection and refraction coefficients, weight, …

Animation Keyframe: Most commonly used. Need to provide GUI for entering the keyframes. Procedural: For advanced physical simulation. Tracking live actor: Can be modified and saved.

Input Devices CLI: • Command Line Input • Keyboard based GUI: • Graphical User Interface • Mouse, touch screen, … NUI: • Natural User Interface • Kinect, Leap Motion, …

Output Hardware: • Video Controller • Graphics Card (2 D/3 D) • GPU (graphics processing unit, a dedicated processing unit for rendering 3 D graphics) • GPGPU (general purpose GPU, mostly used as servers for high performance computing / HPC) • Printers (2 D / 3 D) • VR/AR/MR

Output Software: • GDI: Graphics Device Interface • Open. GL (Web. GL, Open. GL-ES) • Open. CL / Vulkan for GPU • Active. X 3 D