Hands-On Game Development with WebAssembly

Learn WebAssembly C++ programming by building a retro space game

Rick Battagline

• Publisher: Packt Publishing
• Year: 2019
• Print ISBN: 9781838644659
• eBook ISBN: 9781838646837
• Edition: 1
• Topic: Computer Science
• Subtopic: Digital Media
• Index: Computer Science

Make your WebAssembly journey fun while making a game with it

Key Features

• Create a WebAssembly game that implements sprites, animations, physics, particle systems, and other game development fundamentals
• Get to grips with advanced game mechanics in WebAssembly
• Learn to use WebAssembly and WebGL to render to the HTML5 canvas element

Book Description

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.

What you will learn

• Build web applications with near-native performance using WebAssembly
• Become familiar with how web applications can be used to create games using HTML5 Canvas, WebGL, and SDL
• Become well versed with game development concepts such as sprites, animation, particle systems, AI, physics, camera design, sound effects, and shaders
• Deploy C/C++ applications to the browser using WebAssembly and Emscripten
• Understand how Emscripten HTML shell templates, JavaScript glue code, and a WebAssembly module interact
• Debug and performance tune your WebAssembly application

Who this book is for

Web developers and game developers interested in creating applications for the web using WebAssembly.

Game developers interested in deploying their games to the web

Web developers interested in creating applications that are potentially orders of magnitude faster than their existing JavaScript web apps

C/C++ developers interested in using their existing skills to deploy applications to the web

Improved Particle Systems

The particle system we developed in the previous chapter was a good start, but the effects you can create with it are rather bland. Our particles do not rotate or scale, they are not animated, and they are relatively consistent in the way they look over time.

For this chapter, you will need to include several images in your build to make this project work. Make sure that you include the /Chapter09/sprites/ folder from this project's GitHub repository. If you would like to build the particle system tool from GitHub, the source for the tool is located in the /Chapter09/advanced-particle-tool/ folder. If you haven't downloaded the GitHub project yet, you can get it online here: https://github.com/PacktPublishing/Hands-On-Game-Develop.

If we want the most out of our particle system, we are going to need to add more features to it. In this chapter, we will be adding the following additional features:

• Particle scale over its lifetime
• Particle rotation
• Animated particles
• Color change over time
• Support for particle bursts
• Support for looping and non-looping emitters

Modifying our HTML shell file

The first thing we need to do is add some new inputs into the HTML shell file. We are going to copy the basic_particle_shell.html file to a new shell file that we will call advanced_particle_shell.html. We will be adding a second container class div element and a lot of new inputs to the HTML portion of the shell file between the original container and the canvas element. Here is what that new container element looks like:

<div class="container">
<div class="empty_box">&nbsp;</div><br/>
<span class="label">min start scale:</span>
<input type="number" id="min_starting_scale" max="9.9" min="0.1" step="0.1" value="1.0" class="em_input"><br/>
<span class="label">max start scale:</span>
<input type="number" id="max_starting_scale" max="10.0" min="0.2" step="0.1" value="2.0" class="em_input"><br/>
<span class="label">min end scale:</span>
<input type="number" id="min_end_scale" max="9.9" min="0.1" step="0.1" value="1.0" class="em_input">
<br/>
<span class="label">max end scale:</span>
<input type="number" id="max_end_scale" max="10.0" min="0.2" step="0.1" value="2.0" class="em_input">
<br/>
<span class="label">start color:</span>
<input type="color" id="start_color" value="#ffffff" class="color_input"><br/>
<span class="label">end color:</span>
<input type="color" id="end_color" value="#ffffff" class="color_input"><br/>
<span class="label">burst time pct:</span>
<input type="number" id="burst_time" max="1.0" min="0.0" step="0.05" value="0.0" class="em_input">
<br/>
<span class="label">burst particles:</span>
<input type="number" id="burst_particles" max="100" min="0" step="1" value="0" class="em_input">
<br/>
<label class="ccontainer"><span class="label">loop:</span>
 <input type="checkbox" id="loop" checked="checked">
 <span class="checkmark"></span>
</label>
<br/>
<label class="ccontainer"><span class="label">align rotation:</span>
 <input type="checkbox" id="align_rotation" checked="checked">
 <span class="checkmark"></span>
</label>
<br/>
<span class="label">emit time ms:</span>
<input type="number" id="emit_time" max="10000" min="100" step="100" value="1000" class="em_input">
<br/>
<span class="label">animation frames:</span>
<input type="number" id="animation_frames" max="64" min="1" step="1" value="1" class="em_input">
<br/>
<div class="input_box">
<button id="update_btn" class="em_button" onclick="UpdateClick()">Update Emitter</button>
</div>
</div>

Scaling values

Scaling a sprite means modifying that sprite's size by some multiple of its original size. For example, if we scale a 16 x 16 sprite by a scaling value of 2.0, the sprite will render to the canvas as a 32 x 32 image. This new container starts with four input elements, as well as their labels, which tell the particle system how to scale the particles over their lifetimes. The min_starting_scale and max_starting_scale elements are the starting range scale of the particles. If you want the particle to always start with a scale of 1.0 (1 to 1 scale with the .png image size), you should put 1.0 in both of these fields. The actual starting scale value will be a randomly chosen value that falls between the two values you put in those fields. We haven't added any checks in this interface to verify that max is larger than min, so make sure that max is the same value or larger than the min value or this will break the emitter. The next two input elements are min_end_scale and max_end_scale. Like the starting scale values, the actual ending scale will be a randomly chosen value that falls between the two values we put in these fields. At any given point in a particle's lifetime, it will have a scale that is a value interpolated between the scale value assigned to the start of that particle's lifetime and the scale value at the end. So, if I start with a scale value of 1.0 and end with a scale value of 3.0, when the lifetime of the particle is half over, the scale value of the particle will be 2.0.

Here is what those elements look like in the HTML file:

<span class="label">min start scale:</span>
<input type="number" id="min_starting_scale" max="9.9" min="0.1" step="0.1" value="1.0" class="em_input"><br/>
<span class="label">max start scale:</span>
<input type="number" id="max_starting_scale" max="10.0" min="0.2" step="0.1" value="2.0" class="em_input"><br/>
<span class="label">min end scale:</span>
<input type="number" id="min_end_scale" max="9.9" min="0.1" step="0.1" value="1.0" class="em_input">
<br/>
<span class="label">max end scale:</span>
<input type="number" id="max_end_scale" max="10.0" min="0.2" step="0.1" value="2.0" class="em_input">
<br/>

Color-blending values

SDL has a function called SDL_SetTextureColorMod that is capable of modifying the red, green, and blue color channels of a texture. This function can only reduce color channel values, so using these values works best on grayscale images. The next two inputs in the HTML are start_color and end_color. These values will be used to modify the color channels of the particle over its lifetime. Each color channel (red, green, and blue) interpolated over the lifetime of the particle.

Here is what those elements look like in the HTML file:

<span class="label">start color:</span>
<input type="color" id="start_color" value="#ffffff" class="color_input"><br/>
<span class="l...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Introduction to WebAssembly and Emscripten
• HTML5 and WebAssembly
• Introduction to WebGL
• Sprite Animations in WebAssembly with SDL
• Keyboard Input
• Game Objects and the Game Loop
• Collision Detection
• Basic Particle System
• Improved Particle Systems
• AI and Steering Behaviors
• Designing a 2D Camera
• Sound FX
• Game Physics
• UI and Mouse Input
• Shaders and 2D Lighting
• Debugging and Optimization
• Other Books You May Enjoy