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

HTML5 and WebAssembly

In this chapter, we will show you how the C code we write to target WebAssembly comes together with HTML5, JavaScript, and CSS to create a web page. We will teach you how to create a new HTML shell file to be used by Emscripten in the creation of our WebAssembly app. We will discuss the Module object and how Emscripten uses it as an interface between our JavaScript and the WebAssembly module. We will show you how to call WebAssembly functions written in C from within JavaScript on our HTML page. We will also show you how to call JavaScript functions from our C code. We will discuss how to use CSS to improve the look of our web page. We will introduce you to the HTML5 Canvas element and show how it is possible to display images to the canvas from within JavaScript. We will briefly discuss moving those images around the canvas from our WebAssembly module. This...