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

Using SDL in WebAssembly

At this point, I could roll my own system for interaction between the WebAssembly module and the JavaScript WebGL library. That would involve using a function table to call the JavaScript WebGL functions from within C++. Luckily for us, the Emscripten team has done most of this work. They have created a port of a popular 2D C++ graphics library that does this for us. SDL is a 2D graphics Application Programming Interface (API) built on top of OpenGL in most implementations. There is an Emscripten port that is used to help us render our 2D graphics on top of WebGL. If you would like to know what other libraries have been integrated into Emscripten, use the following emcc command:

emcc --show-ports

If you run this command, you will notice that several different SDL libraries are displayed. These include SDL2, SDL2_image, SDL2_gfx, SDL2_ttf, and SDL2_net...