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)

Introduction to WebGL

After Apple created the Canvas element, the Mozilla Foundation began working on a Canvas 3D prototype in 2006, and by 2007, there were implementations of this early version, which would eventually become WebGL. In 2009, a consortium called the Kronos Group began a WebGL Working Group. By 2011, this group had produced the 1.0 version of WebGL, which is based on the OpenGL ES 2.0 API.

As I stated earlier, WebGL was seen as a 3D rendering API that would be used with the HTML5 Canvas element. Its implementation eliminates some of the rendering bottlenecks of the traditional 2D canvas API and gives near-direct access to the computer's GPU. Because of this, it is typically faster to use WebGL to render 2D images to the HTML5 canvas than it is to use the original 2D canvas implementation. However, WebGL is significantly more complicated to use due to the added...