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.
Table of Contents (18 chapters)

Modifying game.hpp

Before we get too far into our new code, I want to make some quick changes to the game.hpp file to add some functionality we will be using later in this chapter. The first thing I want to add near the top of the game.hpp file is a few macros that will let us quickly convert from an angle in degrees to radians, and also from radians to degrees. I find myself doing this a lot when using SDL because SDL, for some reason, wants rotations in degrees, and every other library out there uses radians. So, let's go ahead and add the following two lines of code somewhere near the top of the game.hpp file:

#define DEG_TO_RAD(deg) ((float)deg/180.0)*3.14159
#define RAD_TO_DEG(rad) ((float)rad*180.0)/3.14159

We will be changing the size of our canvas from 320 x 200 to 800 x 600. To make this easy to switch later, let's go ahead and define a few macros we will use...