Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL2

Table of Contents
About the Authors
About the Technical Reviewers
Acknowledgments
Introduction
	New in the Second Edition
	Who Should Read This Book
	Assumptions
	Who Should Not Read This Book
	Organization of This Book
	Code Samples
Chapter 1: Introducing 2D Game Engine Development with JavaScript
	The Technologies
	Setting Up Your Development Environment
		Downloading and Installing JavaScript Syntax Checker
		Downloading and Installing LiveServer
	Working in the VS Code Development Environment
		Creating an HTML5 Project in VS Code
	How to Use This Book
	How Do You Make a Great Video Game?
	References
		Technologies
Chapter 2: Working with HTML5 and WebGL
	Introduction
	Canvas for Drawing
		The HTML5 Canvas Project
			Creating and Clearing the HTML Canvas
	Separating HTML and JavaScript
		The JavaScript Source File Project
			Separate JavaScript Source Code File
			Load and Run JavaScript Source Code from index.html
		Observations
	Elementary Drawing with WebGL
		The Draw One Square Project
			Set Up and Load the Primitive Geometry Data
			Set Up the GLSL Shaders
				Define the Vertex and Fragment Shaders
				Compile, Link, and Load the Vertex and Fragment Shaders
			Set Up Drawing with WebGL
		Observations
	Abstraction with JavaScript Classes
		The JavaScript Objects Project
			Source Code Organization
			Abstracting the Game Engine
				The Shader Class
				The Core of the Game Engine: core.js
			The Client Source Code
		Observations
	Separating GLSL from HTML
		The Shader Source File Project
			Loading Shaders in SimpleShader
			Extracting Shaders into Their Own Files
			Cleaning Up HTML Code
		Source Code Organization
	Changing the Shader and Controlling the Color
		The Parameterized Fragment Shader Project
			Defining the simple_fs.glsl Fragment Shader
			Modify the SimpleShader to Support the Color Parameter
			Drawing with the New Shader
	Summary
Chapter 3: Drawing Objects in the World
	Introduction
	Encapsulating Drawing
		The Renderable Objects Project
			Source Code Structure Reorganization
				Define a WebGL-Specific Module
				Define a System for Internal Shader Resource Sharing
				Define an Access File for the Game Developer
			The Renderable Class
			Testing the Renderable Object
		Observations
	Transforming a Renderable Object
		Matrices as Transform Operators
			Concatenation of Matrix Operators
		The glMatrix Library
		The Matrix Transform Project
			Modify the Vertex Shader to Support Transforms
			Modify SimpleShader to Load the Transform Operator
			Modify Renderable Class to Set the Transform Operator
			Testing the Transforms
		Observations
	Encapsulating the Transform Operator
		The Transform Objects Project
			The Transform Class
			The Transformable Renderable Class
			Modify the Engine Access File to Export Transform
			Modify Drawing to Support Transform Object
	The Camera Transform and Viewports
		Coordinate Systems and Transformations
			Modeling and Normalized Device Coordinate Systems
			The World Coordinate System
			The Viewport
		The Camera Transform and Viewport Project
			Modify the Vertex Shader to Support the Camera Transform
			Modify SimpleShader to Support the Camera Transform
			Modify Renderable to Support the Camera Transform
			Design the Scene
				Implement the Design
	The Camera
		The Camera Objects Project
			The Camera Class
			Modify Renderable to Support the Camera Class
			Modify the Engine Access File to Export Camera
			Test the Camera
	Summary
Chapter 4: Implementing Common Components of Video Games
	Introduction
	The Game Loop
		Typical Game Loop Implementations
		The Game Loop Project
			Implement the Game Loop Component
			Working with the Game Loop
	Keyboard Input
		The Keyboard Support Project
			Add an Input Component to the Engine
			Modify the Engine to Support Keyboard Input
			Test Keyboard Input
	Resource Management and Asynchronous Loading
		The Resource Map and Shader Loader Project
			Add a Resource Map Component to the Engine
			Define a Text Resource Module
			Load Shaders Asynchronously
				Modify Shader Resources for Asynchronous Support
				Modify SimpleShader to Retrieve the Shader Files
				Wait for Asynchronous Loading to Complete
			Test the Asynchronous Shader Loading
	Game Level from a Scene File
		The Scene File Project
			The Scene File
			Define an XML Resource Module
			Modify the Engine to Integrate Client Resource Loading
				Coordinate Client Load and Engine Wait in the Loop Module
				Derive a Public Interface for the Client
				Public Methods of MyGame
			Implement the Client
				Define a Scene File
				Parse the Scene File
				Implement MyGame
	Scene Object: Client Interface to the Game Engine
		The Scene Objects Project
			The Abstract Scene Class
				Modify Game Engine to Support the Scene Class
				Export the Scene Class to the Client
				Implement Engine Cleanup Support
			Test the Scene Class Interface to the Game Engine
				The MyGame Scene
				The BlueLevel Scene
	Audio
		The Audio Support Project
			Define an Audio Resource Module
			Export the Audio Module to the Client
			Testing the Audio Component
				Change MyGame.js
				Change BlueLevel.js
	Summary
		Game Design Considerations
Chapter 5: Working with Textures, Sprites, and Fonts
	Introduction
	Texture Mapping and Texture Coordinates
		The Texture Shaders Project
			Overview
			Extension of SimpleShader/Renderable Architecture
			GLSL Texture Shader
			Define and Set Up Texture Coordinates
			Interface GLSL Shader to the Engine
			Facilitate Sharing with shader_resources
			TextureRenderable Class
				Changes to the Renderable Class
				Define the TextureRenderable Class
			Texture Support in the Engine
				Configure WebGL to Support Textures
				Create the Texture Resource Module
				Export New Functionality to the Client
			Testing of Texture Mapping Functionality
				Modify the BlueLevel Scene File to Support Textures
				Modify SceneFileParser
				Test BlueLevel with JPEGs
				Test MyGame with PNGs
			Observations
	Drawing with Sprite Sheets
		The Sprite Shaders Project
			Interface GLSL Texture Shaders to the Engine with SpriteShader
			SpriteRenderable Class
			Facilitate Sharing with shader_resources
			Export New Functionality to the Client
			Testing the SpriteRenderable
	Sprite Animations
		Overview of Animated Sprite Sheets
		The Sprite Animation Project
			SpriteAnimateRenderable Class
			Export New Functionality to the Client
			Testing Sprite Animation
	Fonts and Drawing of Text
		Bitmap Fonts
		The Font Support Project
			Loading and Storing Fonts in the Engine
			Adding a Default Font to the Engine
			Defining a FontRenderable Object to Draw Texts
			Initialize, Cleaning, and Export Font Functionality
			Testing Fonts
	Summary
		Game Design Considerations
Chapter 6: Defining Behaviors and Detecting Collisions
	Introduction
	Game Objects
		The Game Objects Project
			Define the GameObject Class
			Manage Game Objects in Sets
			Export the Classes to the Client
			Test the GameObject and GameObjectSet
				The DyePack GameObject
				The Hero GameObject
				The Minion GameObject
				The MyGame Scene
			Observation
	Creating a Chase Behavior
		Vectors Review
			The Dot Product
			The Cross Product
		The Front and Chase Project
			Add Vector Rotation to the gl-matrix Library
			Modify GameObject to Support Interesting Behaviors
			Test the Chasing Functionality
				Define the Brain GameObject
				The MyGame Scene
			Observation
	Collisions Between GameObjects
		Axis-Aligned Bounding Box (AABB)
		The Bounding Box and Collisions Project
			Define a Bounding Box Class
			Use the BoundingBox in the Engine
			Test Bounding Boxes with MyGame
			Observation
	Per-Pixel Collisions
		The Per-Pixel Collisions Project
			Overview of Per-Pixel Collision Algorithm
			Modify Texture to Load a Texture as an Array of Colors
			Modify TextureRenderable to Support Per-Pixel Collision
				Organize the Source Code
				Define Access to the Texture Color Array
				Implement Per-Pixel Collision
			Support Per-Pixel Collision in GameObject
			Test the Per-Pixel Collision in MyGame
			Observation
	Generalized Per-Pixel Collisions
		Vector Review: Components and Decomposition
		The General Pixel Collisions Project
			Modify Pixel Collision to Support Rotation
			Modify GameObject to Support Rotation
			Test Generalized Per-Pixel Collision
	Per-Pixel Collisions for Sprites
		The Sprite Pixel Collisions Project
			Implement Per-Pixel Collision for SpriteRenderable
			Support Accesses to Sprite Pixels in TextureRenderable
			Test Per-Pixel Collision for Sprites in MyGame
			Observation
	Summary
		Game Design Considerations
Chapter 7: Manipulating the Camera
	Introduction
	Camera Manipulations
		The Camera Manipulations Project
			Organize the Source Code
			Support Clamping to Camera WC Bounds
			Define Camera Manipulation Operations in camera_manipulation.js File
			Manipulating the Camera in MyGame
	Interpolation
		The Camera Interpolations Project
			Interpolation as a Utility
				The Lerp Class
				The LerpVec2 Class
			Represent Interpolated Intermediate Results with CameraState
			Integrate Interpolation into Camera Manipulation Operations
			Testing Interpolation in MyGame
	Camera Shake and Object Oscillation Effects
		The Camera Shake and Object Oscillate Project
			Abstract the Shake Behavior
				Create the Oscillate Class to Model Simple Harmonic Motion
				Create the Shake Class to Randomize an Oscillation
				Create the ShakeVec2 Class to Model the Shaking of a vec2, or a Position
			Define the CameraShake Class to Abstract the Camera Shaking Effect
			Modify the Camera to Support Shake Effect
			Testing the Camera Shake and Oscillation Effects in MyGame
	Multiple Cameras
		The Multiple Cameras Project
			Modify the Camera
			Testing Multiple Cameras in MyGame
	Mouse Input Through Cameras
		The Mouse Input Project
			Modify index.js to Pass Canvas ID to Input Component
			Implement Mouse Support in input.js
			Modify the Camera to Support Viewport to WC Space Transform
			Testing the Mouse Input in MyGame
	Summary
		Game Design Considerations
Chapter 8: Implementing Illumination and Shadow
	Introduction
	Overview of Illumination and GLSL Implementation
	Ambient Light
		The Global Ambient Project
			Modifying the GLSL Shaders
			Defining as Global Shared Resources
			Modifying SimpleShader
			Testing the Ambient Illumination
			Observations
	Light Source
		GLSL Implementation and Integration into the Game Engine
		The Simple Light Shader Project
			Creating the GLSL Light Fragment Shader
			Defining a Light Class
			Defining the LightShader Class
			Defining the LightRenderable Class
			Defining a Default LightShader Instance
			Modifying the Camera
				Defining a Per-Render Cache for the Camera
				Adding Camera Transform Functions
			Testing the Light
				Modifying the Hero and Minion
				Modifying the MyGame Object
			Observations
	Multiple Light Sources and Distance Attenuation
		The Multiple Lights Project
			Modifying the GLSL Light Fragment Shader
			Modifying the Light Class
			Defining the LightSet Class
			Defining the ShaderLightAt Class
			Modifying the LightShader Class
			Modifying the LightRenderable Class
			Testing the Light Sources with MyGame
			Observations
	Diffuse Reflection and Normal Mapping
		The Normal Maps and Illumination Shaders Project
			Creating the GLSL Illumination Fragment Shader
			Defining the IllumShader Class
			Modifying the Texture Module
			Creating the IllumRenderable Class
			Defining a Default IllumShader Instance
			Testing the Normal Map
				Modifying the Hero and the Minion
				Modifying MyGame
			Observations
	Specular Reflection and Materials
		Integration of Material in the Game Engine and GLSL Shaders
		The Material and Specularity Project
			Modifying the GLSL Illumination Fragment Shader
			Defining the Material Class
			Defining the ShaderMaterial Class
			Modifying the IllumShader Class
			Modifying the IllumRenderable Class
			Modifying the Camera Class
			Testing Specular Reflection
			Observations
	Light Source Types
		The Directional and Spotlights Project
			Supporting New Light Types in GLSL Fragment Shaders
				Modifying the GLSL Illumination Fragment Shader
				Modifying the GLSL Light Fragment Shader
			Modifying the Light Class
			Modifying the ShaderLightAt Class
			Modifying the Camera Transform Class
			Testing the New Light Types
			Observations
	Shadow Simulation
		The Shadow Simulation Algorithm
		The Shadow Shaders Project
			Creating GLSL Fragment Shaders
				Defining the GLSL Shadow Caster Fragment Shader
				Defining the GLSL Shadow Receiver Fragment Shader
			Interfacing the GLSL Shadow Shaders to the Engine
				Creating the Shadow Caster Shader
				Instantiating Default Shadow Caster and Receiver Shaders
			Configuring and Supporting WebGL Buffers
			Defining Shadow Support for Game Developers
				Defining the Shadow Caster Class
				Defining the Shadow Receiver Class
			Updating Engine Support
			Testing the Shadow Algorithm
				Setting Up the Shadow
				Drawing the Shadow
			Observations
	Summary
		Game Design Considerations
Chapter 9: Simulating the World with RigidShapes
	Introduction
		Chapter Overview
	Rigid Shapes and Bounds
		The Rigid Shapes and Bounds Project
			Setting up Implementation Support
				Organizing the Engine Source Code
				Supporting Debug Drawing
					Initialing the Debug Drawing Functionality
				Updating the gl-matrix Library
			Defining the RigidShape Base Class
			Defining the RigidRectangle Class
			Defining the RigidCircle Class
			Modifying the GameObject Class to Integrate RightShape
			Testing of RigidShape Functionality
			Observations
	Collision Detection
		Broad and Narrow Phase Methods
		Collision Information
		The Circle Collisions and CollisionInfo Project
			Defining the CollisionInfo Class
			Modifying the RigidShape Classes
				Modifying the RigidRectangle Class
				Modifying the RigidCircle Class
			Defining the Physics Component
			Modifying the MyGame to Test Circle Collisions
			Observations
		Separating Axis Theorem
			A Simple SAT-Based Algorithm
			An Efficient SAT Algorithm: The Support Points
				Support Point May Not Exist for a Face Normal
				The Axis of Least Penetration and Collision Information
				The Algorithm
		The Rectangle Collisions Project
			Implementing the Support Point SAT
			Observations
		Collision Between Rectangles and Circles
		The Rectangle and Circle Collisions Project
			Defining Rectangle-Circle Collision
				Calling the Newly Defined Function
			Observations
	Movement
		Explicit Euler Integration
		Symplectic Euler Integration
		The Rigid Shape Movements Project
			Completing the RigidShape Implementation
				Modifying the RigidShape Class
				Modifying the RigidCircle Class
				Modifying the RigidRectangle Class
			Defining System Acceleration and Motion Control
			Accessing the Fixed Time Interval
			Implementing Symplectic Euler Integration in the RigidShape class
			Modifying MyGame to Test Movements
			Observations
	Interpenetration of Colliding Objects
		Collision Position Correction
		The Collision Position Correction Project
			Updating the Physics Component
			Testing Positional Correction in MyGame
			Observations
	Collision Resolution
		The Impulse Method
			Components of Velocity in a Collision
			Relative Velocity of Colliding Shapes
			The Impulse
				Normal Component of the Impulse
				Tangent Component of the Impulse
		The Collision Resolution Project
			Updating the Physics Component
			Updating MyGame for Testing Collision Resolution
			Observations
	Angular Components of Collision Responses
		Collisions with Rotation Consideration
		Relative Velocity with Rotation
		Impulse Method with Rotation
			Normal Components of the Impulse
			Tangent Component of the Impulse
		The Collision Angular Resolution Project
			Updating the Physics Component
		Observations
	Summary
		Game Design Considerations
Chapter 10: Creating Effects with Particle Systems
	Introduction
	Particles and Particle Systems
		The Particles Project
			Supporting Drawing of a Particle
				Creating GLSL Particle Fragment Shader
				Defining a Default ParticleShader Instance
				Creating the ParticleRenderable Object
				Loading the Default Particle Texture
			Defining the Engine Particle Component
			Defining the Particle and Particle Game Classes
				Creating a Particle
				Creating the ParticleSet
			Testing the Particle System
			Observations
	Particle Collisions
		The Particle Collisions Project
			Modifying the Particle System
			Initializing the Particle System
			Testing the Particle System
			Observations
	Particle Emitters
		The Particle Emitters Project
			Defining the ParticleEmitter Class
			Modifying the Particle Set
			Testing the Particle Emitter
			Observations
	Summary
		Game Design Considerations
Chapter 11: Supporting Camera Background
	Introduction
	Tiling of the Background
		The Tiled Objects Project
			Define TiledGameObject
			Modify MyGame to Test Tiled Objects
			Observations
	Simulating Motion Parallax with Parallax Scrolling
		The Parallax Objects Project
			Define ParallaxGameObject to Implement Parallax Scrolling
			Testing ParallaxGameObject in MyGame
			Observations
	Layer Management
		The Layer Manager Project
			Layer Management in the Engine
			Modify Engine Components and Objects
				Enhance the GameObjectSet Functionality
				Initialize Layer in index.js
				Define the Update Functions for Layer Membership
			Modify MyGame to Work with the Layer Component
			Observations
	Summary
		Game Design Considerations
Chapter 12: Building a Sample Game: From Design to Completion
	Part 1: Refining the Concept
	Part 2: Integrating a Setting
		Contextual Images Bring the Setting to Life
		Defining the Playable Space
		Adding Layout to the Playable Space
		Tuning the Challenge and Adding Fun
		Further Tuning: Introducing Enemies
		General Considerations
	Part 3: Integrating Additional Design Elements
		Visual Design
		Game Audio
		Interaction Model
		Game Systems and Meta-game
		User Interface (UI) Design
		Game Narrative
	Bonus Content: Adding a Second Stage to the Level
	Summary
Index