LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

All aboard!

LittleJS is a super lightweight 2D JavaScript game engine with fast WebGL rendering. It is designed to be small, simple, and easy to use for various applications, from game jams to commercial releases. This engine has everything necessary to make high-quality games, including fast rendering, physics, particles, sound effects, music, keyboard/mouse/gamepad input handling, update/render loop, and debug tools. 🚂

Example Projects

Hello World - Clean project with only a few things to get you started

Puzzle Game - Match 3 puzzle game with HD rendering and high score tracking

Platformer - Platformer/shooter with procedural generation and destruction

Breakout - Breakout game with mouse/touch or gamepad control

Stress Test - Max sprite/object test and music system demo

How to use LittleJS

It is recommended that you start by copying the LittleJS Starter Project This file is mostly empty with just a few things you can use to get started or remove. You can also download and include engine.all.js or engine.all.min.js.

In order to load files like images you will need to run a small web server like http-server on npm. I recommend an editor that does this for me automatically like Brackets or VS Code with the Live Server plugin.

To startup LittleJS, you must create 5 functions and pass them to engineInit. A canvas will automatically be created and added to the document. You can use this template to get started.


function gameInit()
{
    // called once after the engine starts up
    // setup the game
}

function gameUpdate()
{
    // called every frame at 60 frames per second
    // handle input and update the game state
}

function gameUpdatePost()
{
    // called after physics and objects are updated
    // setup camera and prepare for render
}

function gameRender()
{
    // called before objects are rendered
    // draw any background effects that appear behind objects
}

function gameRenderPost()
{
    // called after objects are rendered
    // draw effects or hud that appear above all objects
}

// startup LittleJS with your game functions after the tile image is loaded
engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

LittleJS Objects

Though not required, LittleJS is intended to be used as an object oriented system by extending the base class EngineObject with your own. This lightweight class provides many useful features including physics, collision, parent/child system, and sorted rendering. Engine objects are automatically added to the global list of objects where they will be updated and rendered until destroyed.

Here is a template you can use to make objects that behave however you want. See the examples for a complete demonstration.

class MyObject extends EngineObject 
{
    constructor(pos, size, tileIndex, tileSize, angle, color)
    {
        super(pos, size, tileIndex, tileSize, angle, color);
        // your object init code here
    }

    update()
    {
        super.update(); // update object physics and position
        // your object update code here
    }

    render()
    {
        super.render(); // draw object as a sprite
        // your object render code here
    }
}

Engine Configuration

All engine configuration is in engineSettings.js. Here are the most important settings...

  • canvasFixedSize - use a fixed canvas resolution if set (disabled by default)
  • cavasPixelated - disable anti-aliasing for pixel art style games (enabled by default)
  • glOverlay - fix slow rendering in some browsers by making the WebGL canvas visible instead of compositing (enabled by default)
  • glEnable - run without WebGL, though it is slower to render sprites and textured coloring is disabled (enabled by default)
  • soundVolume - adjust volume of sound effects, music, and speech (.5 or less recommended)

Builds

To easily include LittleJS in your game! Just include one of the 3 flavors of pre-built js files. These are also built automatically by the build scripts...

To build with LittleJS you will need to install several NPM packages. This is only necessary for building and not required to use the engine. You can install these packages globally with the following commands...

npm install -g google-closure-compiler
npm install -g uglify-js
npm install -g roadroller
npm install -g ect-bin
npm install -g typescript

Building

LittleJS games do not need to be built, it's perfectly fine to publish your game using the prebuilt engine! However there are build files provided for the engine and also to build the example program to a zip file...