Hands-On Game Development with WebAssembly电子书

Dedication

About Packt

Why subscribe?

Packt.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Conventions used

Get in touch

Reviews

Introduction to WebAssembly and Emscripten

What is WebAssembly?

Why do we need WebAssembly?

Why is WebAssembly faster than JavaScript?

Will WebAssembly replace JavaScript?

What is asm.js?

A brief introduction to LLVM

A brief introduction to WebAssembly text

Emscripten

Installing Emscripten on Windows

Installing Emscripten on Ubuntu

Using Emscripten

Additional installation resources

Summary

HTML5 and WebAssembly

The Emscripten minimal shell file

Creating a new HTML shell and C file

Defining the CSS

HTML5 and game development

Immediate mode versus retained mode

Adding a canvas to the Emscripten template

Summary

Introduction to WebGL

WebGL and canvas contexts

An introduction to WebGL shaders

WebGL and JavaScript

WebGL coordinate system versus 2D canvas

Vertex and UV data

2D canvas to WebGL

Minor tweaks to the head tag

Major JavaScript changes

WebGL global variables

The return of vertex and texture data

Buffer constants

Defining the shaders

The ModuleLoaded function

The ShipPosition function

The MoveShip function

Summary

Sprite Animations in WebAssembly with SDL

Using SDL in WebAssembly

Initializing SDL

Clearing the SDL renderer

Using the WebAssembly virtual filesystem

Rendering a texture to the HTML5 canvas

Cleaning up SDL

Compiling hello_sdl.html

Render a sprite to the canvas

Animating a sprite

Moving the sprite

Compiling sprite.html

Summary

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

Understanding the game loop

Writing a basic game loop

Compiling gameloop.html

Game objects

The player's spaceship game object

Object pooling

Pooling the player's projectiles

Creating an enemy

Compiling game_objects.html

Summary

Collision Detection

Types of 2D collision detection

Circle collision detection

Rectangle collision detection

A short refresher on trigonometry

Line collision detection

Compound colliders

Implementing circle collision detection

Destroying a spaceship on collision

Pointers in memory

Implementing compound circle colliders

Compiling collider.html

Summary

Basic Particle System

Adding to the virtual file system

A brief introduction to SVG

Vector versus raster graphics

Trigonometry again?

Adding the JavaScript

The simple particle emitter tool

The Point class

The Particle class

The Emitter class

WebAssembly interface functions

C++ name mangling

Dead code elimination

Updating the emitter

The looping function

Initialization

Compiling and testing the particle emitter

Summary

Improved Particle Systems

Modifying our HTML shell file

Scaling values

Color-blending values

Particle burst

Looping the emitter

Aligning particle rotation

Emission time

Animation frames

Modifying the JavaScript

The JavaScript UpdateClick function

Coercing color values

Additional variable coercions

Modifying the handleFiles function

Modifying the Particle class

New attributes

Aligning rotation attributes

Color attributes

Animation attributes

Size and scale attributes

The source rectangle attribute

Additional constructor parameters

The Update function's parameters

The Spawn function's parameters

Changes to particle.cpp

Particle constructor logic

Particle Update logic

Particle Spawn function

Particle Move function

Particle Render function

Modifying the Emitter class

The Emitter constructor function

Emitter update logic

Emitter Move function

External functions

Random floating-point numbers

Adding an emitter

Updating an emitter

Configuring the particle emitter

HTML shell and WebAssembly module interaction

Compiling and running the new tool

Creating a particle emitter

Changes to game.hpp

Adding the Particle class definition

Emitter class definition

Changes to emitter.cpp

Changes to the constructor function

Changes to the Update function

Adding a Run function

Changes to the Move function

Changes to ship.cpp

The Ship class' constructor function

The Ship class' Acceleration function

The Ship class' Render function

Changes to projectile_pool.cpp

Changes to main.cpp

Compiling the new particle_system.html file

Taking it further

Summary

AI and Steering Behaviors

What is Game AI?

Autonomous agents versus top-down AI

What is an FSM?

Introducing steering behaviors

The seek behavior

The flee behavior

The arrival behavior

The pursuit behavior

The evade behavior

Obstacle avoidance

The wander behavior

Combining forces

Modifying game.hpp

Adding obstacles to our game

Adding force fields

More collision detection

Circle-line collision detection

Vector projection

The Vector2D class

Writing an FSM

The AvoidForce function

Compiling the ai.html file

Summary

Designing a 2D Camera

Creating a camera for our game

Camera for tracking player movement

Projected focus and camera attractors

Modifying our code

Modifying the game.hpp file

The Vector2D class definition

The Locator class definition

The Camera class definition

The RenderManager class definition

The camera.cpp file

The render_manager.cpp file

Modifying main.cpp

New global variables

Modifying the move function

Modifying the render function

Modifying the main function

Modifying asteroid.cpp

Modifying collider.cpp

Modifying enemy_ship.cpp

Modifying finite_state_machine.cpp

Modifying particle.cpp

Modifying player_ship.cpp

Modifying projectile.cpp

Modifying shield.cpp

Modifying ship.cpp

Modifying star.cpp

Modifying vector.cpp

Compiling and playing with a locked-on camera

A more advanced camera

Changes to games.hpp

Changes to camera.cpp

Compiling and playing with the advanced camera

Summary

Sound FX

Where to get sound effects

Simple audio with Emscripten

Adding sound to our game

Updating game.hpp

Updating main.cpp

Updating ship.cpp

The new audio.cpp file

Compiling and running

Summary

Game Physics

Newton's third law

Adding gravity

Improving collisions

Modifying the code

Changing the game.hpp file

Changing collider.cpp

Changes to star.cpp

Changing the main.cpp file

Changes to asteroid.cpp and projectile.cpp

Changes to the ship.cpp file

Compiling the physics.html file

Summary

UI and Mouse Input

UI requirements

Opening screen

Play screen

Game over screen

Mouse input

Creating a button

Screen states

Changes to games.hpp

Modifying the RenderManager class

New external variables

Changes to main.cpp

Adding global variables

Input functions

The end_input function

The render functions

The collisions function

The transition state

The game loop

Play and play again callbacks

Changes to the main function

ui_button.cpp

The MouseMove function

The MouseClick function

The MouseUp function

The KeyDown function

The RenderUI function

ui_sprite.cpp

Defining the constructor

The RenderUI function

Compile ui.html

Summary

Shaders and 2D Lighting

Using OpenGL with WebAssembly

More about shaders

GLSL ES 1.0 and 3.0

WebGL app redux

Shader code

OpenGL global variables

SDL global variables

The main function

The game loop

Compiling and running our code

Mixing textures for a glow effect

Fragment shader changes

OpenGL global variable changes

Other global variable changes

Changes to main()

Updating game_loop()

Compiling and running our code

3D lighting

Ambient light

Diffuse light

Specular light

Normal maps

Creating a 2D lighting demo app

Fragment shader updates

OpenGL global variables

SDL global variables

Function prototypes

The main function

The game_loop function

The input function

The draw_light_icon function

Compiling and running our lighting app

Summary

Debugging and Optimization

Debug macro and stack trace

Source maps

Browser debugging

Compiling your code for debugging

Using asm.js as an alternative for debugging

Debugging using Chrome

Debugging using Firefox

Firefox Developer Edition

Optimizing for WebAssembly

Optimization flags

Optimizing for performance

Optimizing for size

Unsafe flags

Profiling

Problems with try/catch blocks

Optimizing OpenGL for WebAssembly

Using WebGL 2.0 if possible

Minimizing the number of OpenGL calls

Emscripten OpenGL flags

Summary

This is the end

Other Books You May Enjoy

Leave a review - let other readers know what you think