Interpreting Example 3.5

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

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)

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

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

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.

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

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