LittleJS

LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

All aboard!

LittleJS is a super lightweight JavaScript game engine designed for modern web development. With its fast hybrid rendering system, it offers a comprehensive suite of game development tools from rendering to sound effects. The code is very clean and well documented with a variety of examples to get you started. Choo-Choo! 🚂

## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial)

LittleJS Screenshot

Demos

Starter Project - Clean example 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 post processing effect

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

Particle System Designer - Particle system editor and visualizer

About LittleJS

LittleJS is a small but powerful game engine with many features and no depenencies.

Graphics

Audio

Input

Physics

Flexability

Extra Systems

How to use LittleJS

To use LittleJS download the latest package from GitHub or call npm install littlejsengine. This package contains the engine and several small examples.

You can use the empty example template as a starting point. This file contians just the minimal setup to start the engine. You can also download and include littlejs.js or littlejs.min.js.

If your game loads any files like images you will need to run a local web server. I recommend an editor that does this automatically like Visual Studio Code with the Live Server plugin. You can also use http-server via npm.

Tutorial

Builds

To easily include LittleJS in your game, you can use one of the 3 pre-built js files. These are also built automatically by the build scripts.

LittleJS can also be imported as a module. There are two module flavors that are automatically built.

To rebuild the engine you must first run npm install to setup the necessary npm dependencies. Then call npm run build to build the engine.

The starter project example also includes a batch file build.bat that compresses everything into a tiny zip file using Google Closure, UglifyJS, Roadroller, and ECT.

LittleJS Setup

To start LittleJS, you must create 5 functions and pass them to engineInit. A canvas will automatically be created and added to the document.

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 Engine
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)
    {
        super(pos, size, tileIndex, tileSize, angle);
    }

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

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

Engine Source Code

This engine is made with simplicity in mind using clean easy to read code. There are only a few files used by the entire engine.

Optional Components, these components are built to synergize with the rest of the engine but are not necessary.

Debugging

Debug builds of LittleJS have a special menu that can be opened by pressing the Esc key.

Games Made With LittleJS

Here are a few of the amazing games people are making with LittleJS.

LittleJS Logo

This site is open source. Improve this page.