Build Your Own 2D Game Engine

Chapter 2: Working with HTML5 and WebGL

2.1. HTML5 Canvas: Draws and clears a HTML5 canvas.
2.2. JavaScript Source Files: Separates source code into appropriate files.
2.3. Elementary Drawing with WebGL: Draws one square using WebGL.
2.4. Abstraction with JavaScript Objects: Enhances the draw square project with data abstraction.
2.5. Shader Source Files: Separates the GLSL shaders into different files.
2.6. Parameterized Fragment Shader: Supports drawing with any color.

Chapter 4: Implementing Common Components of Video Games

4.1. Game Loop: Incorporates a game loop into your game engine.
4.2. Keyboard Support: Supports receiving input from the keyboard.
- Right/Up/Down Arrow: to manipulate
4.3 Resource Map and Shader Loader: Develops infrastructure for resource management, and loads shader files asynchronously.
- Right/Up/Down Arrow: to manipulate
4.4 Scene File: Works with external scene files.
- Right/Up/Down Arrow: to manipulate
4.5 Scene Objects: Interfaces with the Game Engine via the Scene object.
- Left/Right Arrow: to move the center rectangle
- Move left out of bound to change level
4.6 Audio Support: Supports loading and playing of audio cues and musics.
- Left/Right Arrow: to move the center rectangle
- Move left out of bound to change level

Chapter 5: Working with Textures, Sprites, and Fonts

5.1. Texture Shaders: Loads, renders, and unloads textures.
- Left/Right Arrows: to move the center rectangle
- Cross the Left boundary to change level
5.2. Sprite Shaders: Draws sprite elements as objects.
- Left/Right Arrows: to move Dye
5.3. Sprite Animation: Creates animation with sprite elements.
- Left/Right Arrows: to move Dye
- 1/2/3 Keys click: to animate forward, swing, and backward
- 4 Key clicks: to speed up animation
- 5 Key clicks: to slow down animation
5.4. Font Support Draws with bitmap fonts.
- Left/Right Arrows: to move Dye
- 0/1/2/3 Keys click: to select font size, 16, 24, 32, 72
- Up/Down Arrows with X/Y Keys: to increase/decrease the selected font width/height size

Chapter 6: Defining Behaviors and Detecting Collisions

6.1. Game Objects: Abstracts game object behavior.
- WASD Keys: to move Dye. Yeah, boring.
6.2. Front and Chase:
- H: to select drive mode for the Brain
  - Arrow Keys: to drive the Brain
- J: to select immidiate point mode for the Brain
  - WASD Keys: to move Dye and observe Brain pointing/moving to Dye
  - Observe: When Brain eventually reaches Dye, it oscillates
- K: to select gradual turn mode for the Brain
  - WASD Keys: to move Dye and observe Brain turning smoothly towards Dye
  - Observe: When Brain eventually reaches Dye, it orbits around Dye
- Observe: Would be nice if we can detect collision and stop
6.3. Bounding Box and Collisions: Defines bounding box for game objects and detects collisions.
- Exactly the same control as above
- Observe:
  - Brain: now stops when it touches Dye's bound (not touching Dye)
  - Dye: touching of WC bound is detected (but nothing is done)
6.4. Per-Pixel Collisions: Implements per-pixel accurate collisions.
- WASD Keys: to move the larger object
- Arrow Keys: to move the smaller object
- Observe: When pixel touches, observe DyePack displayed at the first intersection pixel found
6.5. General Pixel Collisions : Supports per-pixel accurate collisions with rotated images.
- Exactly the same control as above
- E/P Keys: to rotate the larger/smaller objects
6.6. Sprite Pixel Collisions: Supports for per-pixel accurate collision between sprite elements.
- Arrows and P Keys: to move and roate Portal minion
- WASD Keys: to move Dye
- L/R/H/B Keys: to slect the garge tor colliding with the Portal minion

Chapter 7: Manipulating the Camera

7.1. Camera Manipulations: Implements intuitive camera manipulation operations.
- WASD Keys: to move hero to push window (at 90% of the bound region)
- Arrow Keys: to move the Potal object (clamp at 80% of bound)
- L/R: to pan the center of the camera to left/right minion
- H/P/L/R: to select the zoom focus
- N/M: to zoom with respect to the center of the window
- J/K: to zoom with respect to either Hero (H), Portal (P), or left/right minion (L/R)
- Observe:
  - Portal and Brain: are always kept within the window bound
  - Put your finger on the screen over the Hero, select H, and then J/K to see hero's relative position does not change as the window zooms
7.2. Camera Interpolations: Implements smooth camera movements.
- Exactly the same control as above
- Observe: camera interpolates and does not jump
7.3. Camera Shake: Creates the camera shake effect.
- Exactly the same control as above
- Q Key: to shake the camera
7.4. Multiple Cameras: Supports viewing the game world with multiple cameras.
- Exactly the same control as above
7.5. Mouse Input: Supports receiving input from the mouse.
- LMB Press in Main Window: to drag the Portal
- MMB Press in HeroCam Window: to drag the hero
- RMB Click in Main Window: to hide the Portal
- MMB Click in Main Window: to reappear the Portal

Chapter 8: Implementing Illumination and Shadow

8.1. Global Ambient: Illuminates the scene with a global ambient light source.
- LMB/MMB: to increase/decrease global red ambient
- Left/Right Arrow Keys: to increase/decrease global ambient intensity
- Observe: it is possible to create negative light!
8.2. Simple Light Shader: Illuminates with one light source.
- WASD Keys: to move Dye
- WASD Keys + LMB: to move Dye with the light source
- Left/Right Arrows: to increase/decrease the light intensity
- Z/X Keys: to increase/decrease light Z position
- C/V Keys: to increase/decrease light radius
- Observe:
  - Negative light can be interesting (since we are only adding)
  - Right-Minion is not illumindated
8.3. Multiple Lights: Illuminates with multiple light sources.
- WASD Keys: to move Dye
- 0/1/2/3 Keys: to select a light
- Selected light control:
  - H Key: to toggle current selected light on/off
  - Arrow Keys: to move the light position
    - Z/X Keys: to inc/dec z of the light
    - C/V Keys: to inc/dec near cut-off
    - B/N Keys: to inc/dec far cut-off
    - K/L Keys: to inc/dec intensity (try negative light!)
  - Observe: illumination
    - Light-0/3: illuminates Dye + background
    - Light-1: illuminates left minion + background
    - Light-2: illuminates right minion + background
- 8.4. Normal Maps and Illumination Shader: Supports 3D illumination effects.
  - ◦Exactly the same control as above.
- 8.5. Materials and Specularity: Implements a simple Phong Illumination model.
  - Same controls as 8.4 with the following additional controls
  - 5/6 Keys: to select the left minion or Dye (for changing material properties)
  - Material control of the selected object (left minion or Dye):
    - 7/8/9 Keys: to select Ka, Kd, or Ks
    - E/R, T/Y, U/I Keys: to increase/decrease the R, G, or B channel of the selected component
    - O/P Keys: to increase/decrease the shinngingness
- 8.6. Directional and Spot Lights: Supports additional light types.
  - Same controls as 8.5 with the following additional controls
  - Space Key + Arrow Keys: to move light direction
  - Observe: Light-0 is a point light and direction of the light is not used.
- 8.7. Shadow Shaders: Simulates shadows.
  - Same controls as 8.6
  - Observe:
    - Background and Large Space craft (on lower left) are shadow receivers
    - Large space craft casts shadow on background
    - Left-Illuminated hero does NOT cast shadow on background

Chapter 9: Integrating Physics and Particles

9.1. Rigid Shape Bounds: Implements bounds for rigid shapes for collision detection.
- H/M/P Keys: to select one of Hero, Minion, or Platform
- RMB: to drag the selected bound
- Observe:
  - Selected object will only draw its bounds (for better visual inspection of results)
  - Collision turns bounds red
9.2. Rigid Shapes Impulse: Implements impulse respose when rigid shapes collided.
- WASD Keys: to fly Dye
- LMB Click: to send one dye pack chasing Dye
- Testing of Rigid body stability (creating dumb minions with white bounds). Dumb minions only interact with dumb minions.
  - Z Key: to create dumb minions (with white bounds). WARNING: cost is N^2!!
  - X Key: to select and move the dumb minion under the mouse
  - C Key: to agitate the dumb minions by injecting random velocity (press and hold to injet large random velocity)
  - V Key: to clear the dumb minions
- Observe: dye pack when traveling fast may shoot through the floor. This is a well-known problem with fast traveling objects resulting in missed collisions.
9.3. Particles: Creates particles.
- WASD Keys: to fly Dye
- LMB Click: to send one dye pack chasing Dye
- Z Key: to generate particles under the mouse pointer
9.4. Particle Emitters: Creates particle via defined emitters.
- Same controls as 9.3
- Observe: explosions when dye pack touches Dye

Chapter 10: Supporting Camera Background

10.1. Tiled Objects: Tiles the background.
- WASD Keys: to move the hero and pan the WC window bounds
- Observe: can never reach the bounds of the world
10.2. Parallax Objects: Supports parallax.
- WASD Keys: to move the hero and pan the WC window bounds
- P Key: to toggle the drawing of the parallax camera
- Observe: observe layered background moves at different speeds
10.3. Layer Manager: Supports HUD, Foreground, Actor, Shadow Receiver, and Background layers.
- Same controls as 10.2

Second edition of this book now is available

Build your own 2D Game Engine

Useful links

Other Relevant links

Chapter 1: Introduction

Chapter 2: Working with HTML5 and WebGL

Chapter 3: Drawing objects in the World

Chapter 4: Implementing Common Components of Video Games

Chapter 5: Working with Textures, Sprites, and Fonts

Chapter 6: Defining Behaviors and Detecting Collisions

Chapter 7: Manipulating the Camera

Chapter 8: Implementing Illumination and Shadow

Chapter 9: Integrating Physics and Particles

Chapter 10: Supporting Camera Background

Chapter 11: Building a Simple Game: From Design to Completion