Game Development with Rust and WebAssembly

Eric Smith

• Publisher: Packt Publishing
• Year: 2022
• eBook ISBN: 9781801074995
• Edition: 1
• Topic: Design
• Subtopic: Programming Games

Write an endless runner game for the web in Rust and test, deploy, and debug your 2D game using the WebAssembly toolchainKey Features• Build and deploy an endless runner game for the web from scratch through this helpful guide with key images printed in color• Learn how to use Rust for web development with WebAssembly• Explore modern game development and programming techniques to build 2D games using RustBook DescriptionThe 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.What you will learn• Build and deploy a Rust application to the web using WebAssembly• Use wasm-bindgen and the Canvas API to draw real-time graphics• Write a game loop and take keyboard input for dynamic action• Explore collision detection and create a dynamic character that can jump on and off platforms and fall down holes• Manage animations using state machines• Generate levels procedurally for an endless runner• Load and display sprites and sprite sheets for animations• Test, refactor, and keep your code clean and maintainableWho this book is forThis game development book is for developers interested in Rust who want to create and deploy 2D games to the web. Game developers looking to build a game on the web platform using WebAssembly without C++ programming or web developers who want to explore WebAssembly along with JavaScript web will also find this book useful. The book will also help Rust developers who want to move from the server side to the client side by familiarizing them with the WebAssembly toolchain. Basic knowledge of Rust programming is assumed.

Part 1: Getting Started with Rust, WebAssembly, and Game Development

In this part, you'll build the skeleton for the application you'll be using for the rest of this book. You'll create your first WebAssembly app using Rust, and interact with JavaScript using wasm-bindgen. You'll also get started drawing to the Canvas, first with crude shapes and then with Sprites (image files) and even sprite sheets.

In this part, we cover the following chapters:

• Chapter 1, Hello WebAssembly
• Chapter 2, Drawing Sprites

Chapter 1: Hello WebAssembly

Let's cut to the chase – if you're holding this book, you probably already know you love Rust, and you think WebAssembly is a great way to deploy your Rust programs to the web. Good news – you're right! Rust and WebAssembly are a match made in programmer heaven, and while WebAssembly is still in its early days, game development is an ideal candidate for WebAssembly. I am excited to be guiding you through building a game for the web in Stack Overflow's "most-loved" language, Rust.

This chapter is all about equipping yourself with the tools for the game development journey. In this chapter, we'll cover the following topics:

• What is WebAssembly?
• Creating a Rust and WebAssembly project skeleton
• Translating JavaScript code into Rust code
• Drawing to the screen with HTML5 Canvas

Technical requirements

To follow along with the project skeleton, you'll need to install rustup to install the Rust toolchains. This can be found at https://rustup.rs/. While you can install Rust and its various toolchains without using the rustup tool, it's not trivial, and I won't be documenting it here. You'll also need an editor for writing Rust code, and while you can use virtually any editor with rust-analyzer, if you're new to writing Rust, I'd recommend Visual Studio Code and the Rust extension found at https://bit.ly/3tAUyH2. It's easy to set up and works right out of the box.

Finally, you'll need a web browser, and in this chapter, you'll need some familiarity with the terminal and Node.js. If you get stumped, the code for this chapter is available at https://github.com/PacktPublishing/Game-Development-with-Rust-and-WebAssembly/tree/chapter_1. The final code for the entire book is in the main branch at https://github.com/PacktPublishing/Game-Development-with-Rust-and-WebAssembly.

Check out the following video to see the Code in Action: https://bit.ly/3qMV44E

What is WebAssembly?

You picked up this book (thanks!) so in all likelihood, you have some idea of what WebAssembly is, but just in case, let's grab a definition from https://WebAssembly.org:

"WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications."

In other words, Wasm is a binary format that we can compile other languages to so that we can run them in the browser. This is different than transpiling or source-to-source compiling, where languages such as TypeScript are converted into JavaScript for running in JavaScript environments. Those languages are still ultimately running JavaScript, whereas Wasm is bytecode. This makes it a smaller download and parsing and compiling steps are removed when running it, which can lead to significant performance improvements. But let's be honest – you're not using Rust and Wasm for the performance improvements, which aren't guaranteed anyway. You're using it because you like Rust.

And that's okay!

Rust has a great type system, excellent developer tooling, and a fantastic community. While WebAssembly was originally created with C and C++ in mind, Rust is a fantastic language for WebAssembly for all the reasons you love Rust and more. Now, for most of the web's existence, writing applications to run in a browser meant writing JavaScript, and over the years, JavaScript has evolved into a suitably modern language for that purpose. I'm not here to tell you that if you like JavaScript you should stop, but if you love Rust, you should absolutely start compiling to Wasm and running apps in the browser.

Important Note

This book is focused on making web-based games with Rust and Wasm, but you can absolutely run Wasm apps in server-side environments such as Node.js. If you're interested in that, you can check out the book Learn WebAssembly by Mike Rourke, which can be found at https://bit.ly/2N89prp, or the official wasm-bindgen guide at https://bit.ly/39WC63G.

Important Note

This book assumes some familiarity with Rust, although you do not need to be an expert. If at any time you're confused by a Rust concept, I highly encourage you to stop and check "the book", The Rust Programming Language, available for free at https://doc.rust-lang.org/book/.

So, now that I've convinced you to do what you were already going to do anyway, let's go over some of the tools you'll need to write a game for the web in Rust:

• rustup: Most likely you're ...

Table of contents

• Game Development with Rust and WebAssembly
• Contributors
• Preface
• Part 1: Getting Started with Rust, WebAssembly, and Game Development
• Chapter 1: Hello WebAssembly
• Chapter 2: Drawing Sprites
• Part 2: Writing Your Endless Runner
• Chapter 3: Creating a Game Loop
• Chapter 4: Managing Animations with State Machines
• Chapter 5: Collision Detection
• Chapter 6: Creating an Endless Runner
• Chapter 7: Sound Effects and Music
• Chapter 8: Adding a UI
• Part 3: Testing and Advanced Tricks
• Chapter 9: Testing, Debugging, and Performance
• Chapter 10: Continuous Deployment
• Chapter 11: Further Resources and What's Next?
• Other Books You May Enjoy