npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

littlejsengine

v1.10.2

Published

LittleJS - Tiny and Fast HTML5 Game Engine

Downloads

452

Readme

LittleJS - The Tiny Fast JavaScript Game Engine

LittleJS Screenshot

NPM Package Build Size NPM Downloads DeepScan Discord

🚂 All aboard!

LittleJS is a fast lightweight open source HTML5 game engine for modern web development. Its 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 | Docs | Trailer | Discord | Tutorial | Quick Reference

LittleJS Screenshot

About LittleJS

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

✨ Graphics

  • Super fast sprite and tile map rendering engine with WebGL
  • Update and render 100,000+ sprites at a solid 60fps
  • Apply Shadertoy compatible shaders for post-processing effects
  • Robust particle effect system and effect design tool

🔊 Audio

  • Positional sound effects with wave files or ZzFX
  • Use ZzFX sound effect generator to play sounds without asset files
  • Music with mp3, ogg, wave, or ZzFXM

🎮 Input

  • Comprehensive input handling for keyboard, mouse, gamepad, and touch
  • On screen touch gamepad designed for mobile devices

💥 Physics

🚀 Flexibility

  • Compatible with all modern web browsers and on mobile devices
  • Support for TypeScript and Modules with example projects for both
  • Ideal for size coding competitions like js13kGames, starter project builds to a 7KB zip
  • Builds to an executable with Electron for distribution on Windows, macOS, and Linux
  • Open Source with the MIT license so it can be used for anything you want forever

🛠️ And more...

  • Node.js build system
  • 2D vector math library
  • Debug primitive rendering system
  • Particle effects system and design tool
  • Bitmap font rendering and includes a built in engine font
  • Medal system tracks and displays achievements with Newgrounds integration

How to use LittleJS

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

You will need to run a local web server to run LittleJS games!

This is because web browsers just have protection from loading local files. You may see a console error like "The image element contains cross-origin data." Don't panic, it's easy to fix! If you are using Visual Studio Code there is a Live Preview Extension that will handle this for you automatically. Another option is to setup a simple local web server like http-server via npm.

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

LittleJS Engine Quick Reference Sheet - This cheat sheet can help you get started.

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!

Examples

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

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.

  • Esc: Debug Overlay
  • 1: Debug Physics
  • 2: Debug Particles
  • 3: Debug Gamepads
  • 4: Debug Raycasts
  • 5: Save Screenshot

Games Made With LittleJS

Here are a few of the amazing games people made using LittleJS...

LittleJS Logo