Book Image

Hands-On Game Development with WebAssembly

By : Rick Battagline

Book Image

Hands-On Game Development with WebAssembly

By: Rick Battagline

Overview of this book

Within the next few years, WebAssembly will change the web as we know it. It promises a world where you can write an application for the web in any language, and compile it for native platforms as well as the web. This book is designed to introduce web developers and game developers to the world of WebAssembly by walking through the development of a retro arcade game. You will learn how to build a WebAssembly application using C++, Emscripten, JavaScript, WebGL, SDL, and HTML5. This book covers a lot of ground in both game development and web application development. When creating a game or application that targets WebAssembly, developers need to learn a plethora of skills and tools. This book is a sample platter of those tools and skills. It covers topics including Emscripten, C/C++, WebGL, OpenGL, JavaScript, HTML5, and CSS. The reader will also learn basic techniques for game development, including 2D sprite animation, particle systems, 2D camera design, sound effects, 2D game physics, user interface design, shaders, debugging, and optimization. By the end of the book, you will be able to create simple web games and web applications targeting WebAssembly.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Introduction to WebAssembly and Emscripten

Introduction to WebAssembly and Emscripten

What is WebAssembly?

What is asm.js?

A brief introduction to LLVM

A brief introduction to WebAssembly text

Additional installation resources

HTML5 and WebAssembly

HTML5 and WebAssembly

The Emscripten minimal shell file

Creating a new HTML shell and C file

Defining the CSS

HTML5 and game development

Adding a canvas to the Emscripten template

Introduction to WebGL

Introduction to WebGL

WebGL and canvas contexts

An introduction to WebGL shaders

WebGL and JavaScript

Sprite Animations in WebAssembly with SDL

Sprite Animations in WebAssembly with SDL

Using SDL in WebAssembly

Render a sprite to the canvas

Animating a sprite

Moving the sprite

Keyboard Input

JavaScript keyboard input

Adding SDL keyboard input to WebAssembly

Using keyboard input to move a sprite

Game Objects and the Game Loop

Game Objects and the Game Loop

Understanding the game loop

Pooling the player's projectiles

Creating an enemy

Collision Detection

Collision Detection

Types of 2D collision detection

Implementing circle collision detection

Destroying a spaceship on collision

Pointers in memory

Implementing compound circle colliders

Basic Particle System

Basic Particle System

Adding to the virtual file system

A brief introduction to SVG

Trigonometry again?

Adding the JavaScript

The simple particle emitter tool

The Point class

The Particle class

The Emitter class

WebAssembly interface functions

Compiling and testing the particle emitter

Improved Particle Systems

Improved Particle Systems

Modifying our HTML shell file

Modifying the JavaScript

Modifying the Particle class

Modifying the Emitter class

External functions

Configuring the particle emitter

Creating a particle emitter

AI and Steering Behaviors

AI and Steering Behaviors

What is Game AI?

Autonomous agents versus top-down AI

What is an FSM?

Introducing steering behaviors

Modifying game.hpp

Adding obstacles to our game

Adding force fields

More collision detection

Designing a 2D Camera

Designing a 2D Camera

Creating a camera for our game

Camera for tracking player movement

Projected focus and camera attractors

Modifying our code

A more advanced camera

Sound FX

Where to get sound effects

Simple audio with Emscripten

Adding sound to our game

Compiling and running

Game Physics

Newton's third law

Improving collisions

Modifying the code

UI and Mouse Input

UI and Mouse Input

UI requirements

Creating a button

Changes to games.hpp

Changes to main.cpp

Shaders and 2D Lighting

Shaders and 2D Lighting

Using OpenGL with WebAssembly

More about shaders

WebGL app redux

Mixing textures for a glow effect

Creating a 2D lighting demo app

Debugging and Optimization

Debugging and Optimization

Debug macro and stack trace

Browser debugging

Optimizing for WebAssembly

Optimizing OpenGL for WebAssembly

This is the end

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Trigonometry again?

OMG yes, there is more trigonometry. I have already covered basic trigonometry in, Chapter 7, Collision Detection, but believe it or not, trigonometry is really useful in game development. Trigonometry happens to be very useful for particle systems and we will be using SVG and some trig to build a little pie chart we can use to visualize the direction of our particle emitter. So, let's take a second to quickly review things one more time:

Sine = Opposite/Hypotenuse (SOH)
Cosine = Adjacent/Hypotenuse (CAH)
Tangent = Opposite/Adjacent (TOA)

Remember the word SOHCAHTOA?

If we are using a 2D Cartesian coordinate system (spoiler alert, we are) the opposite edge in our scenario is just the Y coordinate, and the adjacent edge is the X coordinate. So, in terms of a 2D Cartesian coordinate system, our ratios look like this:

Sine = Y/Circle Radius
Cosine = X...