Modules

Stephen Whitmore edited this page Nov 20, 2015 · 33 revisions
Clone this wiki locally

Here's a list of modules that work well for games with browserify. Feel free to add your own, the more the merrier.

Projects/Frameworks

stack.gl

stack.gl is an open software ecosystem for WebGL. You can find a full list of packages here, many of which would be useful for game development.

voxel.js

Modular minecraft in the browser! A lot of these modules were written for and/or used in voxel.js - if you're getting started, you should try playing with this first and consider creating a module.

chem

A canvas-based 2D game engine and toolchain optimized for rapid development using browserify as its module system.

crtrdg

A small module-oriented 2D game framework.

Excalibur

Extensive framework, which added browserify support in v0.3.

Development/Tools

beefy

A quick-setup development server for building projects with browserify.

glslify

A module system for GLSL that operates similarly to browserify.

webworkify

launch a web worker that can require() in the browser with browserify.

General

game-shell

Ready to go JavaScript shell for games or other interactive demos.

workerstream

Use HTML5 web workers with the node stream API.

Algorithms

a-star

A* search algorithm.

fov-2d

Test whether a point is in an observer's field-of-view.

lsb

Hide string data in the least-significant bits of an array - useful for embedding save files in screenshots, for example.

Handling Time

raf

requestAnimationFrame wrapper/polyfill.

tic

Game loop-friendly timeout/interval methods.

fps

A simple FPS counter.

ticker

Semi-fixed timestep for more robust game loops.

delta-timer

A small module for keeping track of time in animations and games.

right-now

Get the most accurate possible timestamp available to your environment: useful for animation loops and precision benchmarking.

gameloop

The core methods/events of a game loop: start, end, pause, resume, update, draw. Uses requestAnimationFrame for updates.

Procedural Generation

spatial-noise

Spatially deterministic noise generators - 1D, 2D, 3D and 4D - in JavaScript.

js.perlin

A JS Perlin Noise implementation.

perlin-noise

Simple perlin noise generator.

simplex-noise

A JS Simplex Noise implementation.

cave-automata-2d

Generates caves in a 2D grid using cellular automata.

Input

vkey

An attempt to tame ev.keyCode across browsers, mapping keyboard keys to human-readable names.

kb-controls

Poll keyboard state during your game loop, instead of listening to keyboard events directly.

gkey

Human-readable button names for different brands of browser-compatible Gamepads.

gp-controls

A module for the HTML5 gamepad API, with a similar API to kb-controls.

interact

A readable stream of mouse view events, wrapping up pointer-lock and drag-stream. Used for FPS controls in voxel.js.

keycode

Convert between keyboard keycodes and keynames and vice versa.

drag-stream

A streaming API for mouse drag data, which can act as a substitute for pointer lock if it's not available.

pointer-lock

Pointer lock polyfill/wrapper API - take control of the user's mouse.

pointer-trap

"Trap" the player's cursor within a canvas element, to avoid accidentally clicking outside of the screen and losing focus.

mousetrap

Simple library for handling keyboard shortcuts in Javascript.

headtrackr

Head-tracking in JavaScript using WebRTC's getUserMedia.

fullscreen

Fullscreen API wrapper/polyfill.

game-controller

A virtual game controller overlay for use on touchscreen devices.

drag-and-drop-files

Handle file drag-and-drop events without all the Yak shaving.

mouse-event-offset

Get relative offsetX/offsetY for mouse events within a DOM element.

is-undo-redo

Bare-bones undo/redo key event check.

Local Storage and Offline

level.js

Offers levelup's API in the browser for easier persistent storage with IndexedDB.

Physics

aabb-2d

2d axis aligned bounding boxes, for basic collision handling.

aabb-3d

3d axis aligned bounding boxes, for basic collision handling.

collide-2d-aabb-tilemap

Collision handling for bounding boxes and a tile map.

collide-2d-tilemap

2d tilemap collisions made simple-ish.

collide-3d-tilemap

3d tilemap collisions made simple-ish.

raycast-2d-tilemap

Test a ray for intersections against a 2D tile map.

spatial-events

A spatially-aware EventEmitter, designed to work in 3d space with aabb-3d.

spatial-trigger

Trigger events by combining aabb-3d and spatial-events.

topdown-physics

Basic, grid-based, 2D top-down player physics for continuous ndarrays.

box2dweb-commonjs

A CommonJS-friendly version of box2dweb.

box2d-events

Wraps box2dweb's ContactListeners to enable an EventEmitter API for both the whole world and individual fixtures.

box2d-player

A jumping player for quick prototyping/demos.

continuous-box2d

Automatically create and remove bodies to fit a continuous ndarray, so you can get an infinite grid with realistic physics.

chipmunk

2D physics engine. See chipmunk-physics.

boids

A lightweight implementation of Craig Reynold's Boids algorithm.

box-collide

Return whether two boxes or points are colliding in 2d.

point-circle-collision

Return true if a point is inside a circle.

line-circle-collision

Return true if a circle and line collide.

Data Structures

ndarray

A very flexible multi-dimensional array for JavaScript, worthy of its own section...

segment-tree

A minimal implementation of a segment tree for storing run-length encoded arrays with updates.

morton-page

A data structure for maintaining a list of pages keyed by (also known as z-order or interleaving). Useful for increasing speed and reducing object allocations.

circular-list

A circular linked list - handy for situations when you're adding/removing a lot of objects in quick succession, and don't need to be able to index them.

object-pool

A convenience module for pooling/recycling objects easily.

Gameplay

leveler

A streaming stat leveling API, for classic RPG XP stats systems.

Graphics

cam3d

3D perspective and orthographic camera utilities for Canvas, Dom, or WebGL.

interpolation

Bare-bones linear interpolation and smoothstep functions.

cubic-hermite

Cubic Hermite splines for smooth curves and interpolation.

vishull2d

Computes the visible region from a point. Useful for 2D lighting.

canvas-splitter

Splits a canvas into smaller canvas "sprite" elements.

lut

Render RGB lookup tables to a canvas, e.g. for color grading.

opaque

Detect if an image/canvas has any transparent pixels.

atlaspack

Pack rectangles (or images) into a rectangle (or canvas texture atlas).

sprite-2d

Loop through frames of a spritesheet for 2d games & animations.

Geometry

greedy-mesher

An n-dimensional greedy mesher for simplifying grid- or voxel-based meshes. More info on why you'd want to use this on 0fps.

isosurface

Generate smooth 3D meshes of an isosurface volume.

conway-hart

Generates polyhedra described with Conway polyhedral notation.

box-frustum

Used to detect if an axis-aligned bounding box is within a camera's view.

eye-vector

Extract the eye vector (camera position) from a view matrix - useful if you're using something like orbit-camera where the resulting position isn't provided for you.

orbit-camera

A simple arcball camera built on top of gl-matrix.

triangle-normal

Computes the normal vector of a single triangle's face.

heightmap-mesher

Takes a heightmap stored as a 2D ndarray and generates a 3D mesh for you to use (stored in a Float32Array).

face-normals

Given an array of triangles' vertices, return a Float32Array of their normal vectors. Used for purely "flat" shading, e.g. in low-poly art.

normals

Given a list of vertices and faces, generate the normals for a triangle mesh. Offers methods for both flat and smooth shading (face and vertex normals, respectively).

mesh-normals

Given a list of vertices and faces, generate the normals for a triangle mesh. Intended for semi-flat shading: it calculates both the vertex and face normals, and lerps them based on a "smoothness" variable.

unindex-mesh

Takes a list of vertices and faces, giving you back an array of individual triangles. Can use this to properly calculate face normals, making it possible to pull off the "low poly" look.

WebGL/GLSL

kami

A lightweight WebGL renderer and set of low-level utilities for context management, sprite batching, texture handling, shader compilation, and vertex data.

gl-matrix

Javascript Matrix and Vector library for High Performance WebGL apps. Also see gl-mat4 and gl-mat3.

gl-now

An extension of game-shell that includes a WebGL-enabled canvas.

gl-fbo

A lightweight wrapper for WebGL framebuffers.

gl-shader

A lightweight wrapper for WebGL shaders.

gl-texture2d

An ndarray-compatible wrapper for WebGLTexture objects.

glsl-exports

Finds all the uniforms and attributes for a fragment shader.

gl-catch-context

Retrieve any newly created WebGL contexts as they're being created. Useful for instrumentation.

gl-shader-hook

Instruments WebGL shaders to keep track of updates and modify existing shaders on the fly. Basically all you need to build a basic version of Firefox's GLSL shader editor!

webgl-texture3d

Workaround GLSL function for using 3D textures in WebGL.

ao-mesher

A voxel mesher for ndarrays that handles ambient occlusion and transparency.

ao-shader

Shader for use with ao-mesher.

gl-quad

Draws a quad to the screen.

gl-textured-quad

Draws a textured quad to the screen.

gl-vignette-background

Draws a soft vignette background, using gl-quad.

glslify

These repos won't work directly with browserify, but instead with Chris Dickinson's glslify: the equivalent for GLSL code.

List of glslify modules

Audio

web-audio-analyser

WebAudio analyser for frequencies and waveform data.

detect-pitch

Low-level pitch detection module.

jsynth

Generate audio purely with JavaScript in the browser. Has a baudio-compatible API. WebKit/Blink only.

Asset Managment/Wrangling

image-loaded

Calls a callback once/if an image has loaded.

load-images

Pre-load images for games, animations, etc. before the game starts.

tmx

A simple streaming TMX file parser - can be used to import maps made with the Tiled editor into your HTML5 games.

tmx-parser

Parse and load tiled map editor files into a JavaScript object. Supports all encoding types and all fields. See also chem-tmx for a plugin that works directly with chem.

envify

Browserify transform to bake Node-style environment variables into a script.

uglifyify

A browserify transform to minify modules as they're loaded, resulting in slightly smaller builds - best used with envify to allow for conditional builds.

Network I/O

socket.io

Realtime application framework for Node.JS, with HTML5 WebSockets and cross-browser fallbacks support.

shoe

A streaming API for WebSocket module sockjs.

sse-stream

A streaming module for Server-Sent Events, an HTTP read-only alternative to websockets (it's much easier to deploy).

peerjs

Peer-to-peer data in the browser. A complete API wrapper for WebRTC's P2P functionality.

UI

cettings

HTML settings inputs that work well for a game, e.g. setting keyboard bindings.

comma-it

Add commas to numbers to turn them into amounts.

zfill

Simple function to pad a number with zeroes.

Design Patterns

bindle

An EventEmitter-style base class, which lets you use a similar API without worrying about duplicate the functions/objects that come with each listener/event. Useful in situations where you might want a lot of listeners with matching events and handlers.

bindlestiff

A light entity/component system that should integrate easily with other projects.

nano-ecs

A nano-sized entity-component-system module that does one thing well: creating and managing a set of entities and their components.