Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL2 [2 ed.] 1484273761, 9781484273760

Table of contents :
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