Skip to content
Stephen Whitmore edited this page Nov 20, 2015 · 33 revisions

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 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.

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.

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

A small module-oriented 2D game framework.

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

Development/Tools

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

A module system for GLSL that operates similarly to browserify.

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

General

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

Use HTML5 web workers with the node stream API.

Algorithms

A* search algorithm.

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

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

Handling Time

requestAnimationFrame wrapper/polyfill.

Game loop-friendly timeout/interval methods.

A simple FPS counter.

Semi-fixed timestep for more robust game loops.

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

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

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

Procedural Generation

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

A JS Perlin Noise implementation.

Simple perlin noise generator.

A JS Simplex Noise implementation.

Generates caves in a 2D grid using cellular automata.

Input

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

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

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

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

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

Convert between keyboard keycodes and keynames and vice versa.

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

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

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

Simple library for handling keyboard shortcuts in Javascript.

Head-tracking in JavaScript using WebRTC's getUserMedia.

Fullscreen API wrapper/polyfill.

A virtual game controller overlay for use on touchscreen devices.

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

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

Bare-bones undo/redo key event check.

Local Storage and Offline

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

Physics

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

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

Collision handling for bounding boxes and a tile map.

2d tilemap collisions made simple-ish.

3d tilemap collisions made simple-ish.

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

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

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

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

A CommonJS-friendly version of box2dweb.

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

A jumping player for quick prototyping/demos.

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

2D physics engine. See chipmunk-physics.

A lightweight implementation of Craig Reynold's Boids algorithm.

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

Return true if a point is inside a circle.

Return true if a circle and line collide.

Data Structures

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

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

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.

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.

A convenience module for pooling/recycling objects easily.

Gameplay

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

Graphics

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

Bare-bones linear interpolation and smoothstep functions.

Cubic Hermite splines for smooth curves and interpolation.

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

Splits a canvas into smaller canvas "sprite" elements.

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

Detect if an image/canvas has any transparent pixels.

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

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

Geometry

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

Generate smooth 3D meshes of an isosurface volume.

Generates polyhedra described with Conway polyhedral notation.

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

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.

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

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

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

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

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).

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.

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

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

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

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

A lightweight wrapper for WebGL framebuffers.

A lightweight wrapper for WebGL shaders.

An ndarray-compatible wrapper for WebGLTexture objects.

Finds all the uniforms and attributes for a fragment shader.

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

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!

Workaround GLSL function for using 3D textures in WebGL.

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

Shader for use with ao-mesher.

Draws a quad to the screen.

Draws a textured quad to the screen.

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

WebAudio analyser for frequencies and waveform data.

Low-level pitch detection module.

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

Asset Managment/Wrangling

Calls a callback once/if an image has loaded.

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

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

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.

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

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

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

A streaming API for WebSocket module sockjs.

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

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

UI

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

Add commas to numbers to turn them into amounts.

Simple function to pad a number with zeroes.

Design Patterns

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.

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

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

Clone this wiki locally