search

KilledByAPixel / LittleJS

LittleJS is a fast HTML5 game engine with many features and no dependencies. šŸš‚ Choo-Choo!
MIT License
2.82k stars 142 forks source link
canvas codegolf game-development game-engine game-frameworks gamedev html5-game-development javascript js13k littlejs physics-engine sizecoding webgl

readme

LittleJS Logo LittleJS - The Tiny Fast JavaScript Game Engine

![LittleJS Screenshot](examples/logo.png) [![NPM Package][npm]][npm-url] [![Build Size][build-size]][build-size-url] [![NPM Downloads][npm-downloads]][npmtrends-url] [![DeepScan][deepscan]][deepscan-url] [![Discord][discord]][discord-url]

šŸš‚ All aboard!

LittleJS is a fast lightweight open source HTML5 game engine for modern web development. It's small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound effects, music, and input handling. The code is very clean and well documented with some fun examples to get you started. Choo-Choo! šŸš‚

šŸš€ Join the First Ever LittleJS Game Jam

The LittleJS Game Jam will take place From Nov 11 to Dec 12! Unleash your creativity and develop amazing games using the LittleJS game engine. šŸ•¹ļøšŸŽ® Sign up today and get more info about the jam on itch.io!

## [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/blob/main/examples/breakoutTutorial/README.md)

LittleJS Screenshot

About LittleJS

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

āœØ Graphics

šŸ”Š Audio

šŸŽ® Input

šŸ’„ Physics

šŸš€ Flexibility

šŸ› ļø And more...

How to use LittleJS

To get started download the latest LittleJS package from GitHub or install via npm: npm install littlejsengine

Learn how to make a simple game from scratch with The Breakout Tutorial.

Watch this GitNation talk to hear more about LittleJS works and get some tips on how to use it.

Join our vibrant community on Discord to get help, share your projects, and collaborate with others!

Demos

These examples are for both learning and using as starter projects to create your own games.

Starter Project - Clean example with only a few things to get you started

Breakout - Block breaking game with post-processing effects

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

Platformer - Platformer/shooter with procedural generation and destruction

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

Particle System Designer - Particle system editor and visualizer

Builds

To easily include LittleJS in your game, you can use one of the pre-built js files.

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 example project includes a node js file build.js that compresses everything into a tiny zip file using Google Closure, UglifyJS, and ECT Zip.

LittleJS Setup

To start LittleJS, you need to create these 5 functions and pass them to engineInit.

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

LittleJS Objects

LittleJS can 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. These objects are added to the global list of objects where they will automatically 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, tileInfo, angle)
    {
        super(pos, size, tileInfo, angle);
        // setup object
    }

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

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

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 made using LittleJS...

LittleJS Logo