Basic Particle System

A particle system is a graphics technique where we emit a large number of sprites from an emitter and have those sprites go through a life cycle where they change in a variety of ways. We build some randomness into our sprite life cycle to create a wide range of interesting effects such as explosions, sparks, snow, dust, fire, engine exhaust, and so on. Some particle effects can interact with their environment. In our game, we are going to use particle effects to create nice-looking engine exhaust and ship explosion effects.

This chapter and the beginning of the next one are going to feel like a digression at first. We will be spending a lot of time in the following two chapters working on something other than our game. If you are interested in particle systems, I promise it will be worth it. When you create a particle system, you spend a lot of time tweaking them and playing with them to get them to look right. To do this directly within the game will result in a lot of compiling and testing. What we need is a tool where we can configure and test a particle system before we add it to our game. This chapter and half of the next chapter are dedicated to building this tool. If you are not interested in learning how to build the tool, you can skim the text in this chapter, and download and compile the tool from GitHub. If you are as interested in learning how JavaScript, HTML, and WebAssembly can interact in an application, this chapter and the first half of Chapter 9, Improved Particle Systems, are a good tutorial for learning how to write an application and not just a game with WebAssembly.

In this chapter, we're going to cover the following topics:

• 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