Book Image

Game Development with Rust and WebAssembly

By : Eric Smith
Book Image

Game Development with Rust and WebAssembly

By: Eric Smith

Overview of this book

The Rust programming language has held the most-loved technology ranking on Stack Overflow for 6 years running, while JavaScript has been the most-used programming language for 9 years straight as it runs on every web browser. Now, thanks to WebAssembly (or Wasm), you can use the language you love on the platform that's everywhere. This book is an easy-to-follow reference to help you develop your own games, teaching you all about game development and how to create an endless runner from scratch. You'll begin by drawing simple graphics in the browser window, and then learn how to move the main character across the screen. You'll also create a game loop, a renderer, and more, all written entirely in Rust. After getting simple shapes onto the screen, you'll scale the challenge by adding sprites, sounds, and user input. As you advance, you'll discover how to implement a procedurally generated world. Finally, you'll learn how to keep your Rust code clean and organized so you can continue to implement new features and deploy your app on the web. By the end of this Rust programming book, you'll build a 2D game in Rust, deploy it to the web, and be confident enough to start building your own games.
Table of Contents (16 chapters)
1
Part 1: Getting Started with Rust, WebAssembly, and Game Development
4
Part 2: Writing Your Endless Runner
11
Part 3: Testing and Advanced Tricks

Sprite sheets

Creating a game where every sprite is its own individual file is certainly possible, but it would mean making the player wait for every file to load individually when the game started. One common way to organize sprites for a game is a sprite sheet, which is made up of two parts. The first is an image file with many sprites in it, like this one:

Figure 2.4 – The top of the sprite sheet

Figure 2.4 – The top of the sprite sheet

The second part is a map of coordinates and metadata that lets us "cut out" each image we need, like a cookie cutter. For instance, if we want to show the first sprite in the preceding figure (which happens to be named Dead (7).png), we'll need to know its location and dimensions:

Figure 2.5 – One sprite in the sheet

Figure 2.5 – One sprite in the sheet

I've drawn a box marking the frame you'd want to "cut out" of the image when you want to draw Dead (7).png. When you want to draw a different file, say Slide (1).png...