Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Hands-On Game Development with WebAssembly

By : Rick Battagline

4.7 (9)

Hands-On Game Development with WebAssembly

4.7 (9)

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.

Preface

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Introduction to WebAssembly and Emscripten

Introduction to WebAssembly and Emscripten

What is WebAssembly?

What is asm.js?

A brief introduction to LLVM

A brief introduction to WebAssembly text

Emscripten

Additional installation resources

Summary

HTML5 and WebAssembly

HTML5 and WebAssembly

The Emscripten minimal shell file

Creating a new HTML shell and C file

Defining the CSS

HTML5 and game development

Adding a canvas to the Emscripten template

Summary

Introduction to WebGL

Introduction to WebGL

WebGL and canvas contexts

An introduction to WebGL shaders

WebGL and JavaScript

Summary

Sprite Animations in WebAssembly with SDL

Sprite Animations in WebAssembly with SDL

Using SDL in WebAssembly

Render a sprite to the canvas

Animating a sprite

Moving the sprite

Summary

Keyboard Input

Keyboard Input

JavaScript keyboard input

Adding SDL keyboard input to WebAssembly

Using keyboard input to move a sprite

Summary

Game Objects and the Game Loop

Game Objects and the Game Loop

Understanding the game loop

Game objects

Object pooling

Pooling the player's projectiles

Creating an enemy

Summary

Collision Detection

Collision Detection

Types of 2D collision detection

Implementing circle collision detection

Destroying a spaceship on collision

Pointers in memory

Implementing compound circle colliders

Summary

Basic Particle System

Basic Particle System

Adding to the virtual file system

A brief introduction to SVG

Trigonometry again?

Adding the JavaScript

The simple particle emitter tool

The Point class

The Particle class

The Emitter class

WebAssembly interface functions

Compiling and testing the particle emitter

Summary

Improved Particle Systems

Improved Particle Systems

Modifying our HTML shell file

Modifying the JavaScript

Modifying the Particle class

Modifying the Emitter class

External functions

Configuring the particle emitter

Creating a particle emitter

Summary

AI and Steering Behaviors

AI and Steering Behaviors

What is Game AI?

Autonomous agents versus top-down AI

What is an FSM?

Introducing steering behaviors

Modifying game.hpp

Adding obstacles to our game

Adding force fields

More collision detection

Writing an FSM

Summary

Designing a 2D Camera

Designing a 2D Camera

Creating a camera for our game

Camera for tracking player movement

Projected focus and camera attractors

Modifying our code

A more advanced camera

Summary

Sound FX

Sound FX

Where to get sound effects

Simple audio with Emscripten

Adding sound to our game

Compiling and running

Summary

Game Physics

Game Physics

Newton's third law

Adding gravity

Improving collisions

Modifying the code

Summary

UI and Mouse Input

UI and Mouse Input

UI requirements

Mouse input

Creating a button

Screen states

Changes to games.hpp

Changes to main.cpp

ui_button.cpp

ui_sprite.cpp

Summary

Shaders and 2D Lighting

Shaders and 2D Lighting

Using OpenGL with WebAssembly

More about shaders

WebGL app redux

Mixing textures for a glow effect

3D lighting

Normal maps

Creating a 2D lighting demo app

Summary

Debugging and Optimization

Debugging and Optimization

Debug macro and stack trace

Source maps

Browser debugging

Optimizing for WebAssembly

Optimizing OpenGL for WebAssembly

Summary

This is the end

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Collision Detection

Right now, our spaceships can fly around and shoot at each other, but nothing happens.

Collision detection is used in the vast majority of video games to determine whether game objects intersect. There are a large number of methods for detecting collisions between different game objects. Various methods can work better in different situations. There is also a trade-off between the amount of computation time and how accurate our collision detection will be.

You will need to include several images in your build to make this project work. Make sure you include the /Chapter07/sprites/ folder from the project's GitHub. If you haven't yet downloaded the GitHub project, you can get it online here: https://github.com/PacktPublishing/Hands-On-Game-Develop ment-with-WebAssembly.

In this chapter, we will discuss the following:

Collision detection
Collider objects...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Hands-On Game Development with WebAssembly

Search

Your notes and bookmarks