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

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

by Kelvin Sung, Jebediah Pavleas, Fernando Arnez, Jason Pace
Released October 2015
Publisher(s): Apress
ISBN: 9781484209523

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build Your Own 2D Game Engine and Create Great Web Games teaches you how to develop your own web-based game engine step-by-step, allowing you to create a wide variety of online videogames that can be played in common web browsers. Chapters include examples and projects that gradually increase in complexity while introducing a ground-up design framework, providing you with the foundational concepts needed to build fun and engaging 2D games. By the end of this book you will have created a complete prototype level for a side scrolling action platform game and will be prepared to begin designing additional levels and games of your own.

This book isolates and presents relevant knowledge from software engineering, computer graphics, mathematics, physics, game development, game mechanics, and level design in the context of building a 2D game engine from scratch. The book then derives and analyzes the source code needed to implement these concepts based on HTML5, JavaScript, and WebGL.

After completing the projects you will understand the core-concepts and implementation details of a typical 2D game engine and you will be familiar with a design and prototyping methodology you can use to create game levels and mechanics that are fun and engaging for players. You will gain insights into the many ways software design and creative design must work together to deliver the best game experiences, and you will have access to a versatile 2D game engine that you can expand upon or utilize directly to build your own 2D games that can be played online from anywhere.

Table of contents

  1. Cover
  2. Title
  3. Copyright
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. About the Author
  8. About the Technical Reviewer
  9. Acknowledgments
  10. Introduction
  11. Chapter 1: Introducing 2D Game Engine Development with JavaScript
    1. The Technologies
    2. Setting Up Your Development Environment
      1. Downloading and Installing JavaScript Syntax Checker
    3. Working in the NetBeans Development Environment
      1. Creating an HTML5 Project in NetBeans
      2. The Relationship Between the Project Files and the File System
    4. How to Use This Book
    5. How Do You Make a Great Video Game?
    6. References
      1. Technologies
  12. Chapter 2: Working with HTML5 and WebGL
    1. Introduction
    2. Canvas for Drawing
      1. The HTML5 Canvas Project
    3. Separating HTML and JavaScript
      1. The JavaScript Source File Project
      2. Observations
    4. Elementary Drawing with WebGL
      1. The Draw One Square Project
      2. Observations
    5. Abstraction with JavaScript Objects
      1. The JavaScript Objects Project
      2. Observations
    6. Separating GLSL from HTML
      1. The Shader Source Files Project
      2. Source Code Organization
    7. Changing the Shader and Controlling the Color
      1. The Parameterized Fragment Shader Project
    8. Summary
  13. Chapter 3: Drawing Objects in the World
    1. Introduction
    2. Encapsulating Drawing
      1. The Renderable Objects Project
      2. Observations
    3. Transforming a Renderable Object
      1. Matrices as Transform Operators
      2. The glMatrix Library
      3. The Matrix Transform Project
      4. Observations
    4. Encapsulating the Transform Operator
      1. The Transform Objects Project
      2. The Transform Object
    5. View, Projection, and Viewports
      1. Coordinate Systems and Transformations
      2. The View Projection and Viewport Project
    6. The Camera
      1. The Camera Objects Project
    7. Summary
  14. Chapter 4: Implementing Common Components of Video Games
    1. Introduction
    2. The Game Loop
      1. The Game Loop Project
    3. Keyboard Input
      1. The Keyboard Support Project
    4. Resource Management and Asynchronous Loading
      1. The Resource Map and Shader Loader Project
    5. Game Level from a Scene File
      1. The Scene File Project
    6. Scene Object: Client Interface to the Game Engine
      1. The Scene Objects Project
    7. Audio
      1. The Audio Support Project
    8. Summary
      1. Game Design Considerations
  15. Chapter 5: Working with Textures, Sprites, and Fonts
    1. Introduction
    2. Texture Mapping and Texture Coordinates
      1. The Texture Shaders Project
    3. Drawing with Sprite Sheets
      1. The Sprite Shaders Project
    4. Sprite Animations
      1. Overview of Animated Sprite Sheets
      2. The Sprite Animation Project
    5. Fonts and Drawing of Text
      1. Bitmap Fonts
      2. The Font Support Project
    6. Summary
      1. Game Design Considerations
  16. Chapter 6: Defining Behaviors and Detecting Collisions
    1. Introduction
    2. Game Objects
      1. The Game Objects Project
    3. Chasing of a GameObject
      1. Vectors Review
      2. The Front and Chase Project
    4. Collisions Between GameObjects
      1. Bounding Box
      2. The Bounding Box and Collisions Project
    5. Per-Pixel Collisions
      1. The Per-Pixel Collisions Project
    6. Generalized Per-Pixel Collisions
      1. Vector Review: Components and Decomposition
      2. The General Pixel Collisions Project
    7. Per-Pixel Collisions for Sprites
      1. The Sprite Pixel Collisions Project
    8. Summary
    9. Game Design Considerations
  17. Chapter 7: Manipulating the Camera
    1. Introduction
    2. Camera Manipulations
      1. The Camera Manipulations Project
    3. Interpolation
      1. The Camera Interpolations Project
    4. Camera Shake Effect
      1. The Camera Shake Project
    5. Multiple Cameras
      1. The Multiple Cameras Project
    6. Mouse Input Through Cameras
      1. The Mouse Input Project
    7. Summary
      1. Game Design Considerations
  18. Chapter 8: Implementing Illumination and Shadow
    1. Introduction
    2. Overview of Illumination and GLSL Implementation
    3. Ambient Light
      1. The Global Ambient Project
    4. Light Source
      1. GLSL Implementation and Integration into the Game Engine
      2. The Simple Light Shader Project
    5. Multiple Light Sources and Distance Attenuation
      1. The Multiple Lights Project
    6. Diffuse Reflection and Normal Mapping
      1. The Normal Maps and Illumination Shaders Project
    7. Specular Reflection and Materials
      1. Integration of Material in the Game Engine and GLSL Shaders
      2. The Material and Specularity Project
    8. Light Source Types
      1. The Directional and Spot Lights Project
    9. Shadow Simulation
      1. The Shadow Simulation Algorithm
      2. The Shadow Shaders Project
    10. Summary
      1. Game Design Considerations
  19. Chapter 9: Integrating Physics and Particles
    1. Introduction
    2. Physics Overview
      1. Movement
      2. Collision Detection
      3. Collision Resolution
    3. Detecting Collisions
      1. The Rigid Shape Bounds Project
    4. Resolving Collisions
      1. The Rigid Shape Impulse Project
    5. Particles and Particle Systems
      1. The Particles Project
    6. Particle Emitters
      1. The Particle Emitters Project
    7. Summary
      1. Game Design Considerations
  20. Chapter 10: Supporting Camera Background
    1. Introduction
    2. Tiling of the Background
      1. The Tiled Objects Project
    3. Simulating Motion Parallax with Parallax Scrolling
      1. The ParallaxObjects Project
    4. Layer Management
      1. The Layer Manager Project
    5. Summary
      1. Game Design Considerations
  21. Chapter 11: Building a Sample Game: From Design to Completion
    1. Part 1: Refining the Concept
    2. Part 2: Integrating a Setting
      1. Contextual Images Bring the Setting to Life
      2. Defining the Playable Space
      3. Adding Layout to the Playable Space
      4. Tuning the Challenge and Adding Fun
      5. Further Tuning: Introducing Enemies
      6. General Considerations
    3. Part 3: Integrating Additional Design Elements
      1. Visual Design
      2. Game Audio
      3. Interaction Model
      4. Game Systems and Meta Game
      5. User Interface (UI) Design
      6. Game Narrative
    4. Bonus Content: Adding a Second Stage to the Level
    5. Summary
  22. Index

Product information

  • Title: Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL
  • Author(s): Kelvin Sung, Jebediah Pavleas, Fernando Arnez, Jason Pace
  • Release date: October 2015
  • Publisher(s): Apress
  • ISBN: 9781484209523