Hands-On Game Development With WebAssembly by Battagline, Rick -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

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

← Prev
Back
Next →

← Prev
Back
Next →