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.

Related Content you might be interested in

Current Title:

Small book image
Hands-On Game Development with WebAssembly
Rick Battagline
May, 2019 | 596 pages
Small book image
Learn WebAssembly
Mike Rourke
Sep, 2018 | 328 pages
Small book image
Real-Time 3D Graphics with WebGL 2
Diego Cantor | Farhad Ghayour
Oct, 2018 | 500 pages
Small book image
Android Game Programming by Example
John Horton
Jun, 2015 | 388 pages
Table of Contents (18 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
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
Emscripten
Additional installation resources
Summary
2
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
Summary
3
Introduction to WebGL
Introduction to WebGL
WebGL and canvas contexts
An introduction to WebGL shaders
WebGL and JavaScript
Summary
4
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
Summary
5
Keyboard Input
Keyboard Input
JavaScript keyboard input
Adding SDL keyboard input to WebAssembly
Using keyboard input to move a sprite
Summary
6
Game Objects and the Game Loop
Game Objects and the Game Loop
Understanding the game loop
Game objects
Object pooling
Pooling the player's projectiles
Creating an enemy
Summary
7
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
Summary
8
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
Summary
9
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
Summary
10
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
Writing an FSM
Summary
11
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
Summary
12
Sound FX
Sound FX
Where to get sound effects
Simple audio with Emscripten
Adding sound to our game
Compiling and running
Summary
13
Game Physics
Game Physics
Newton's third law
Adding gravity
Improving collisions
Modifying the code
Summary
14
UI and Mouse Input
UI and Mouse Input
UI requirements
Mouse input
Creating a button
Screen states
Changes to games.hpp
Changes to main.cpp
ui_button.cpp
ui_sprite.cpp
Summary
15
Shaders and 2D Lighting
Shaders and 2D Lighting
Using OpenGL with WebAssembly
More about shaders
WebGL app redux
Mixing textures for a glow effect
3D lighting
Normal maps
Creating a 2D lighting demo app
Summary
16
Debugging and Optimization
Debugging and Optimization
Debug macro and stack trace
Source maps
Browser debugging
Optimizing for WebAssembly
Optimizing OpenGL for WebAssembly
Summary
This is the end
17
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Adding a canvas to the Emscripten template

In an earlier part of this chapter, we discussed making calls to the Emscripten WebAssembly app from a shell template. Now that you know how to make the interaction work between JavaScript and WebAssembly, we can add a canvas element back into the template and start to manipulate that canvas using the WebAssembly module. We are going to create a new .c file that will call a JavaScript function passing it an x and y coordinate. The JavaScript function will manipulate a spaceship image, moving it around the canvas. We will also create a brand new shell file called canvas_shell.html.

As we did for the previous version of our shell, we will start by breaking this file down into four sections to discuss it at a high level. We will then discuss the essential parts of this file a piece at a time.

  1. The beginning of the HTML file starts with...
Previous Section
End of Section 6
Next Section