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

Source maps

Now, let's briefly discuss source maps. Back in the early days of the web, it was decided that users should be able to view all of the source code on every web page. Early on, this was always HTML, but later, JavaScript was added and became something a user could view in an attempt to understand the workings of a given web page. Today, this is not possible in most cases. Some code today, such as TypeScript, is transpiled into JavaScript from another language. If you are writing JavaScript, you may use Babel to convert the latest JavaScript to run on older web browsers. Uglify or Minify may be used to remove white space and shorten variable names. If you need to debug the original source code, a source map is a tool you can use to map the JavaScript running in your browser back to the original source.

A source map is a JSON file that contains data mapping for the...