Build your own 2D Game Engine and Create Great Web Games Using HTML5 JavaScript and WebGL 1st Edition by Kelvin Sung, Jebediah Pavleas, Fernando Arnez, Jason Pace 9781484209523 1484209524

Build your own 2D Game Engine and Create Great Web Games Using HTML5 JavaScript and WebGL 1st Edition Kelvin Sung Jebediah Pavleas Fernando Arnez Jason Pace – Ebook PDF Instant Download/Delivery, ISBN: 9781484209523 ,1484209524

Product details:

• ISBN 10:1484209524
• ISBN 13:9781484209523
• Author: Kelvin Sung, Jebediah Pavleas, Fernando Arnez, Jason Pace

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 thes

e 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.

• Assists the reader in understanding the core-concepts behind a 2D game engine

• Guides the reader in building a functional game engine based on these concepts

• Leads the reader in exploring the interplay between technical design and game experience design

• Teaches the reader how to build their own 2D games that can be played across internet via popular browsers

Table contents:

Chapter 1: Introducing 2D Game Engine Development with JavaScript
The Technologies
Setting Up Your Development Environment
Downloading and Installing JavaScript Syntax Checker
Working in the NetBeans Development Environment
Creating an HTML5 Project in NetBeans
The Relationship Between the Project Files and the File System
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 Objects
The JavaScript Objects Project
Source Code Organization
Abstracting the Game Engine
The Core of the Game Engine: gEngine.Core
The Shared Vertex Buffer
The Shader Object
The Client Source Code
Observations
Separating GLSL from HTML
The Shader Source Files 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 SimpleFS.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
The Renderable Object
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 Object to Set the Transform Operator
Testing the Transforms
Observations
Encapsulating the Transform Operator
The Transform Objects Project
The Transform Object
Transformable Renderable Objects
Modify Drawing to Support Transform Object
View, Projection, and Viewports
Coordinate Systems and Transformations
Modeling and Normalized Device Coordinate Systems
The World Coordinate System
The Viewport
The View Projection and Viewport Project
Modifying the Vertex Shader to Support the View-Projection Transform
Modifying SimpleVertex to Support the View-Projection Transform
Modifying RenderObject to Support the View-Projection Transform
Testing the View-Projection Transform and the Viewport
Designing the Scene
Implementing the Design
The Camera
The Camera Objects Project
The Camera Object
Testing 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
Using 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 ResourceMap Component to the Engine
Define a Text File Loader as an Engine Component
Load Shaders Asynchronously
Implement Default Resources Support
Modify SimpleShader to Retrieve Shader Files
Initialize Engine Core
Modify index.html for Proper Engine Core Initialization
Test the Asynchronous Shader Loading
Game Level from a Scene File
The Scene File Project
The Scene File
Parser for the Scene File
Integrate Game Resource Loading
Public Methods of MyGame
Integration with the Game Engine
Scene Object: Client Interface to the Game Engine
The Scene Objects Project
The Abstract Scene Object
Modify Game Engine to Support the Scene Object
Test the Scene Object Interface to the Game Engine
The BlueLevel Scene
The MyGame Scene
Audio
The Audio Support Project
Define AudioClips Component with Web Audio API
Counting Resource References
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 Shader/Renderable Architecture
GLSL Texture Shader
Define and Set Up Texture Coordinates
Interface GLSL Shader to the Engine
Facilitate Sharing with Engine_DefaultResources
Renderable Texture Object
Changes to the Renderable Object
The TextureRenderable Object
Texture Support in the Engine
Configure WebGL to Support Textures
Create the Texture Management Engine Component
Testing of Texture Mapping Functionality
Modify the BlueLevel Scene File to Support Textures
Modify SceneFileParser
Test BlueLevel with JPEGs
Test MyGame with PNGs
Observations
Interface GLSL Texture Shaders to the Engine with SpriteShader
SpriteRenderable Object
SpriteShader as a Default Resource
Testing the SpriteRenderable
Drawing with Sprite Sheets
The Sprite Shaders Project
Sprite Animations
Overview of Animated Sprite Sheets
The Sprite Animation Project
SpriteAnimateRenderable Object
Testing Sprite Animation
Fonts and Drawing of Text
Bitmap Fonts
The Font Support Project
Loading and Storing Fonts in the Engine
Defining a FontRenderable Object to Draw Texts
Adding a Default Font to the Engine
After Game Cleanup
Testing Fonts
The GameOver Scene
The MyGame Scene
Summary
Game Design Considerations
Chapter 6: Defining Behaviors and Detecting Collisions
Introduction
Game Objects
The Game Objects Project
Modify Renderable and Shader Objects to Draw with a Camera
Define the GameObject
Manage Game Objects in Sets
Test the GameObject and GameObjectSet
The DyePack GameObject
The Hero GameObject
The Minion GameObject
MyGame Scene
Chasing of a GameObject
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
Collisions Between GameObjects
Bounding Box
The Bounding Box and Collisions Project
Define a Bounding Box Object
Use the BoundingBox in the Engine
Test Bounding Boxes with MyGame
Per-Pixel Collisions
The Per-Pixel Collisions Project
Overview of Per-Pixel Collision Algorithm
Modify Engine_Textures to Load a Texture as an Array of Color
Modify TextureRenderable to Support Per-Pixel Collision
Create TextureRenderable_PixelCollision.js File to Implement Per-Pixel Collision
Support GameObject Per-Pixel Collision in GameObject_PixelCollision.js
Test the Per-Pixel Collision in MyGame
Generalized Per-Pixel Collisions
Vector Review: Components and Decomposition
The General Pixel Collisions Project
Modify TextureRenderable_PixelCollision to Support Rotation
Modify the GameObject_PixelCollision.js to Support Rotation
Test Generalized Per-Pixel Collision
Per-Pixel Collisions for Sprites
The Sprite Pixel Collisions Project
Create SpriteRenderable_PixelCollision.js file to Implement Per-Pixel Collision
Modify Existing SpriteRenderable Functions to Support Per-Pixel Collision
Modify TextureRenderable to Support Accesses to Sprite Pixels
Test Per-Pixel Collision for Sprites in MyGame
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 an Utility
The Interpolate Object
The InterpolateVec2 Object
Represent Interpolated Intermediate Results with the CameraState Object
Integrate Interpolation into Camera Manipulation Operations
Testing Interpolations in MyGame
Camera Shake Effect
The Camera Shake Project
Create the ShakePosition Class to Model the Shaking of a Position
Define the CameraShake Object to Abstract Camera Shaking Effect
Modify the Camera to Support Shake Effect
Testing the Camera Shake Effect 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 gEngine_Core to Pass Canvas ID to Input Component
Implement Mouse Support in gEngine_Input
Modify the Camera to Support Transformation to WC Space
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
Modifying SimpleShader
Modifying the Engine
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
Creating a Light Object
Creating the LightShader Object
Creating the LightRendererable Object
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 Object
Creating the LightSet Object
Creating the ShaderLightAtIndex Object
Modifying the LightShader Object
Modifying the LightRenderable Object
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
Creating the IllumShader Object
Modifying the TextureShader Object
Creating the IllumRenderable Object
Modifying the Engine
Defining the Default in Engine_DefaultResources
Configuring WebGL Texture Units in Engine_Textures
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
Creating the Material Object
Defining the ShaderMaterial Object
Modifying the IllumShader Object
Modifying the IllumRenderable Object
Modifying the Camera Object
Observations
Light Source Types
The Directional and Spot Lights Project
Supporting New Light Types in GLSL Fragment Shaders
Modifying the GLSL Illumination Fragment Shader
Modifying the GLSL Light Fragment Shader
Modifying the Light Object
Modifying the ShaderLightAtIndex Object
Modifying the Camera Transform Object
Testing the New Light Types
Observations
Shadow Simulation
The Shadow Simulation Algorithm
The Shadow Shaders Project
Create GLSL Fragment Shaders
Creating the GLSL Shadow Caster Fragment Shader
Creating the GLSL Shadow Receiver Fragment Shader
Interfacing the GLSL Shaders to the Engine
Creating the Shadow Caster Shader
Modifying the Engine Core
Configuring and Maintaining the WebGL Stencil and Depth Buffers
Instantiating Default Shadow Caster and Receiver Shaders
Creating the Shadow Caster Object
Creating the Shadow Receiver Object
Defining the Shadow Receiver Operations
Defining the Shadow Receiver Stencil Operations
Updating Engine Supporting Objects
Modifying the Renderable
Modifying the SpriteShader
Modifying the Light
Modifying the Camera
Modifying the Transform Object
Testing the Shadow Algorithm
Setting Up the Shadow
Drawing the Shadow
Observations
Summary
Game Design Considerations
Chapter 9: Integrating Physics and Particles
Introduction
Physics Overview
Movement
Collision Detection
Collision Resolution
Detecting Collisions
The Rigid Shape Bounds Project
Creating the Rigid Shape Base Class
Creating the Rigid Rectangle Object
Creating the Rigid Circle Object
Detecting Collisions Between the Rigid Objects
Collision Detection Between a Rectangle and a Circle
Collision Detection Between Two Rectangles
Collision Detection Between Two Circles
Modifying the Game Object
Testing the Collision Detection
Modifying the Game Objects
Modifying the MyGame Object
Observations
Resolving Collisions
The Rigid Shape Impulse Project
Implementing Symplectic Euler Integration
Modifying the RigidShape Class
Creating the Rigid Shape Behavior
Extracting Collision Information
Creating the CollisionInfo object
Modifying the RigidShape Collision
Modifying the RigidRectangle Collision
Modifying the Rigid Circle Collision
Defining the Engine Physics Component
Resolving Collisions and Applying Friction
Adding the Relaxation Loop for Stability
Supporting the Engine Physics Component
Testing Impulse Resolution
Observations
Creating GLSL Particle Fragment Shader
Defining a Default ParticleShader Instance
Creating the ParticleRenderable Object
Particles and Particle Systems
The Particles Project
Defining the Particle and Particle Game Object
Creating a Particle
Creating the ParticleGameObject
Creating the ParticleGameObjectSet
Defining the Engine Particle Component
Interacting Particles with RigidShape
Testing the Particle System
Observations
Particle Emitters
The Particle Emitters Project
Creating the ParticleEmitter Object
Modifying the Particle Game Object Set
Testing the Particle Emitter
Observations
Summary
Game Design Considerations
Chapter 10: Supporting Camera Background
Introduction
Tiling of the Background
The Tiled Objects Project
Define TiledGameObject
Modify MyGame to Test Tiled Objects
Simulating Motion Parallax with Parallax Scrolling
The ParallaxObjects Project
Define ParallaxGameObject to Implement Parallax Scrolling
Testing ParallaxGameObject in MyGame
Layer Management
The Layer Manager Project
Layer Management in the Engine
Modify Engine Components and Objects
Enhance the GameObjectSet Functionality
Initialize LayerManager in gEngine_Core
Define the Update Function for Layer Membership Objects
Modify MyGame to Work with LayerManager
Summary
Game Design Considerations
Chapter 11: 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

People also search:

build your own 2d game engine

build your own 2d game engine pdf

building your own game engine

how to make a 2d game engine from scratch

how much does it cost to make a game engine