▶Book Description
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.
▶What You Will Learn
- Build web applications with near-native performance using WebAssembly
- Become familiar with how web applications can be used to create games using HTML5 Canvas, WebGL, and SDL
- Become well versed with game development concepts such as sprites, animation, particle systems, AI, physics, camera design, sound effects, and shaders
- Deploy C/C++ applications to the browser using WebAssembly and Emscripten
- Understand how Emscripten HTML shell templates, JavaScript glue code, and a WebAssembly module interact
- Debug and performance tune your WebAssembly application
▶Key Features
- Create a WebAssembly game that implements sprites, animations, physics, particle systems, and other game development fundamentals
- Get to grips with advanced game mechanics in WebAssembly
- Learn to use WebAssembly and WebGL to render to the HTML5 canvas element
▶Who This Book Is For
This book is not an introduction to programming. It is intended for people who know how to code in at least one programming language. It would be helpful, but is not strictly necessary, to have at least a rudimentary understanding of some web-based technologies, such as HTML. This book contains instructions on how to install the required tools on Windows or Ubuntu Linux, and, out of the two, I would recommend using Ubuntu, as its installation process is much simpler.
▶What this book covers
- Chapter 1, Introduction to WebAssembly and Emscripten, introduces WebAssembly, why the web needs it, and why it is so much faster than JavaScript. We will introduce Emscripten, why we need it for WebAssembly development, and how to install it. We will also discuss technologies related to WebAssembly, such as asm.js, LLVM, and WebAssembly Text.
- Chapter 2, HTML5 and WebAssembly, discusses how WebAssembly modules integrate with HTML using the JavaScript "glue code". We will learn how to create our own Emscripten HTML shell file, and we will learn how to make calls to and from our WebAssembly module, which we will write in C. Finally, we will learn how to compile and run an HTML page that interacts with our WebAssembly module, and we will learn how to build a simple HTML5 Canvas app with Emscripten.
- Chapter 3, Introduction to WebGL, introduces WebGL and the new canvas contexts that support it. We will learn about shaders, what they are, and how WebGL uses them to render geometry to the canvas. We will learn how to use WebGL and JavaScript to draw a sprite to the canvas. And finally, we will write an app that integrates WebAssembly, JavaScript, and WebGL that displays a sprite and moves it across the canvas.
- Chapter 4, Sprite Animations in WebAssembly with SDL, teaches you about the SDL library and how we use it to simplify calls to WebGL from WebAssembly. We will learn how to use SDL to render, animate, and move sprites on the HTML5 canvas.
- Chapter 5, Keyboard Input, looks at how to take input from the keyboard from JavaScript and make calls to the WebAssembly module. We will also learn how to accept keyboard input using SDL inside our WebAssembly module, and use the input to move a sprite around the HTML5 canvas.
- Chapter 6, Game Objects and the Game Loop, explores some basic game design. We will learn about the game loop, and how a game loop in WebAssembly is different than in other games. We will also learn about game objects and how to create an object pool from within our game. We will end the chapter by coding the beginning of our game, with two spaceships that move about the canvas and shoot projectiles at each other.
- Chapter 7, Collision Detection, introduces collision detection into our game. We will explore the types of 2D collision detection, implement a basic collision detection system, and learn a little about the trigonometry that makes it work. We will modify our game so that projectiles destroy the spaceships when they collide.
- Chapter 8, Basic Particle System, introduces particle systems and discusses how they can visually improve our game. We will talk about the virtual filesystem, and we learn how to add files to it through a web page. We will briefly introduce SVG and Vector graphics, and how to use them for data visualization. We will further discuss trigonometry and how we will be using it in our particle systems. We will build a new HTML5 WebAssembly app that will help us to configure and test particle systems that we will later add to our game.
- Chapter 9, Improved Particle Systems, goes into improving our particle system configuration tool by adding particle scaling, rotation, animation, and color transitions. We will modify the tool to allow the particle systems to loop, and add a burst effect. We will then update our game to support particle systems and add in particle system effects for our engine exhaust and explosions.
- Chapter 10, AI and Steering Behaviors, introduces the concept of AI and game AI and discusses the difference between them. We will discuss the AI concepts of finite state machines, autonomous agents, and steering behaviors, and we will implement these behaviors in an enemy AI that will avoid obstacles and combat the player.
- Chapter 11, Designing a 2D Camera, brings in the concept of 2D camera design. We will begin by adding a render manager to our game and creating a camera that locks on to the player's spaceship, following it around an expanded gameplay area. We will then add the advanced 2D camera features of projected focus and camera attractors.
- Chapter 12, Sound FX, covers the use of SDL Audio in our game. We will discuss where we can get our sound effects online, and how to include those sounds in our WebAssembly module. We will then add sound effects to our game.
- Chapter 13, Game Physics, introduces the concept of physics in computer games. We will be adding elastic collisions between our game objects. We will add Newton's third law to the physics of our game in the form of recoil when the spaceships launch projectiles. We will add a gravitational field to our star that will attract the spaceships.
- Chapter 14, UI and Mouse Input, discusses adding a user interface to be managed and rendered within our WebAssembly module. We will gather requirements and translate them into new screens for our game. We will add a new button object and learn how we can manage mouse input from within our WebAssembly module using SDL.
- Chapter 15, Shaders and 2D lighting, dives into how to create a new app that mixes OpenGL and SDL. We will create a new shader that loads and renders multiple textures to a quad. We will learn about normal maps, and how we can use normal maps to approximate the Phong lighting model in 2D, using OpenGL in our WebAssembly module.
- Chapter 16, Debugging and Optimization, introduces the basic methods for debugging and optimizing WebAssembly modules. We will start with debug macros and stack traces from WebAssembly. We will introduce the concepts of source maps and how web browsers use them to debug WebAssembly modules. We will learn about optimizing WebAssembly code using optimization flags. We will discuss using a profiler to optimize our WebAssembly code.
