1. Interpreting Example 3.5

2. Source code structure index.html src folder Starting point
Loading all scripting files
src folder
Engine/Core folder: core of our engine, access to hardware, important organs but no one needs to see
Engine folder:
Files: Renderable, Camera, Transform, SimpleShader
GLSLShader: graphics hardware programs (ignore for now)
lib: external library we use (for vector and matrix)
MyGame: our user (programmer’s) source code

3. Engine/Core folder Core of the game engine Engine_Core
Functionality that is important but should be hidden from programmer
Engine_Core
getGL(): Connection to the graphics Hardware
clearCanvas(): clears the canvas
Just need to know how/when to call these two functions
Engine_VertexBuffer
Defines the geometric of the squares drawn.
No need to know about this (probably ever in this class)

4. Engine/Transform Abstraction that can transform a vertex position
Good for transforming Renderable
Functions:
Move, Scale, Rotation

5. Engine/Renderable Abstraction that can be drawn Functions to know
draw(): draws based on input transformation matrix
get/setColor():
[r, g, b, a]:
getXform(): gets the transform to manipulate the object

6. Engine/SimpleShader
API programmer’s connection to the programs defined in GLSLShader
Singleton: as there is only one program in the graphics hardware
Renderable: needs this to be drawn
Renderable constructor takes a SimpleShader
Functions to know:
None for now.

7. Engine/Camera What visible part of the world to draw Viewport:
World Coordinate
Defined by: Center and Width [no height]
Units: arbitrary
Viewport:
Draw to where on the canvas
Units: in pixels

8. MyGame/MyGame.js Source code of the game build based on our API
All functionality in the Constructor: key functionality
gEngine.Core.initializeWebGL()
Allocate/initialize Camera: draw drawing a specific area
Allocate/initialize SimpleShader: drawing each square
Define the squares
Draw the squares