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)

WebGL and canvas contexts

WebGL is a rendering context for drawing to the HTML5 element, and is an alternative to the 2D rendering context. Often, when someone mentions the canvas, they are referring to the 2D rendering context, which is accessed by calling getContext and passing in the string 2d. Both contexts are methods of rendering to the HTML5 canvas element. A context is a type of API for immediate mode rendering. Two different WebGL contexts can be requested, both of which provide access to different versions of the WebGL API. These contexts are webgl and webgl2. In the following examples, I will be using the webgl context and will be using the WebGL 1.0 API. There is also a rarely used context for rendering a bitmap to the canvas that we can access by passing in bitmaprenderer as a string value.

I want to point out that the term canvas is sometimes used to refer to the...