LittleJS

KilledByAPixelMIT活跃维护

超轻量的 HTML5 2D/3D 游戏引擎,零依赖、体积小、运行快,内置 WebGL2 渲染、Box2D 物理和 Three.js 3D 支持,适合做 js13k 这类极限小游戏。

Tiny fast 2D/3D HTML5 game engine with many features and no dependencies.

v1.29.0发布于 2026-11-02 02:35 UTC4,378star +6 / 7 天238fork同步于 2026-11-10 11:38 UTC

怎么上手

从 README 代码块原样提取,可能是其中一种安装方式
npm install littlejsengine
npx degit KilledByAPixel/LittleJS/examples/vite-starter my-game
npm install
npm run dev
硬件要求

README 没有说明硬件要求。

下载:源码 zip·GitHub Releases(安装包)本站不镜像安装包

项目说明

这个项目的说明还在生成中,先参考下面「最近发版」和 README。

最近发版

5 个版本v1.29.0
  1. v1.29.0LittleJS 1.29.0 - Normal Maps and Decals最新正式版2026-11-02 · 2026-11-02 02:35 UTC

    New Demos

    • Normal Maps - Balls and bevelled tiles that catch a light following the mouse, with a sun on Space and the wheel raising the light
    • Decals - Paint trails and splats drawn into a canvas layer on the GPU, click to splat

    New Changes

    • 2D normal maps: give an object a normalMap and turn on lightSystem.normalMaps, and every light shades it from its height above the scene, the sun too; turned, mirrored and animated sprites shade as they should
    • Draw into a CanvasLayer in world space with drawRect and drawTile, for decals, paint or fog of war with no tile grid, and scroll(offset) moves the layer through the world while what is drawn stays put
    • Tile layers draw themselves: a new layer draws on its first render with no redraw() needed, and a cell changed with setData shows on the next render
    • textureInfo.updateData uploads only part of a texture, for a texture the game changes every frame
    • cameraShake(amount, direction) can shake along one axis, vec2(0, 1) for a heavy landing
    • FirstPersonCamera3D works on a gamepad and the touch gamepad: left stick moves, right stick looks
    • randPick(items) and randWeighted(items, weights) pick from an array or a Set, with seeded versions on RandomGenerator
    • setMouseScreenTransform makes clicks land on a curved screen, with postProcessCurveMouse for postProcessCurve
    • touchGamepadButtonPos(button) says where a touch gamepad button is, to draw an icon in it
    • soundPauseWhenBlurred pauses sound while the window has no focus
    • A 3D Shader can set its own depth with viewProjection
    • Much more precise TypeScript types: particle effects, the 3D level format and Tiled maps are typed, from 203 any down to 86

    Breaking Changes

    • setData and clearData with no redraw argument now draw the cell on the next render; a game that paints its own cells over the tiles passes false
    • A turned or mirrored TileLayer's drawRect and drawTile now land where they show in the world

    Fixes

    • tileInfo.frame, and so SpriteAnimation, carries on to the next row of the sheet instead of asserting
    • The touch gamepad keeps working when the browser refuses its pointer capture, and a camera with lockPointer no longer locks on a phone
    • engineStep under a timeScale other than 1 runs the right number of updates from its first frame

    Check out the latest on GitHub to see everything we've been working on!

  2. v1.28.0LittleJS 1.28.0 - Cameras, Screen Shake and Box2D Platforms2026-10-20 · 2026-10-20 22:18 UTC
    查看更新说明

    New Demos

    • 3D Third Person - Run a ball around a field of blocks with a camera that swings around behind it and pulls in at walls
    • Camera Shake - A bump on Space and a blast on a click, shakes that add up and fade on their own
    • Box2D Platformer - Jump up through one way ledges, drop back down through them and ride conveyor belts with crates, all in Box2D
    • 3D Plugin - The island's ball now rolls the way the camera looks, with the camera swinging around behind it
    • Platforming Game - The camera now looks ahead the way you run, stays over the level, and explosions shake the screen

    New Changes

    • Cameras: the new camera plugin follows things for you. new FollowCamera(player) follows in 2D with smooth movement, a dead zone, level bounds, zoom, and a look ahead that shows more of the way the player is going and slides across when they turn. new ThirdPersonCamera3D(player) puts the 3D camera on a pole behind the player that swings around as they move, turns with the mouse or a gamepad stick, and pulls in when a wall gets in the way. Smoothing is in seconds, so it feels the same at any frame rate
    • cameraShake(amount): screen shake for hits and explosions, in 2D and 3D, with or without a camera; shakes add up and fade by themselves, and hold through a pause or a hit stop at time scale 0
    • A child object's pos and angle can be set: it stays where you put it and moves with its parent from there, where before the parent put it straight back
    • setWorldPos3D, setWorldRotation3D and getWorldRotation3D put a 3D child at a place or rotation in the world
    • Box2D: beginContact tells where two objects touched and how hard they hit; oneWay platforms, conveyor belts with setSurfaceSpeed, and preSolve for letting a contact pass, as for dropping through a ledge
    • engineAddPlugin takes an updatePost function, called after every object has moved each update

    Breaking Changes

    • CameraControl3D and FirstPersonCamera3D now set the 3D camera after every object has moved, not in their own update(); code that calls their update() by hand and reads the camera calls updateCamera() after it

    Check out the latest on GitHub to see everything we've been working on!

  3. v1.27.1LittleJS 1.27.1 - Faster Post Processing in Firefox and Physics Helpers2026-10-14 · 2026-10-14 23:24 UTC
    查看更新说明

    1.27.1 - 2026-10-14

    New Changes

    • debugLineWidth and setDebugLineWidth(width): the width in pixels of the outlines debug shapes are drawn with, the physics boxes and the tile collision view among them, 2 as before, larger to make them easier to see
    • render3D.fogDepth measures fog by depth along the view instead of distance from the camera, and render3D.fogFadeStart / fogFadeEnd fade see through draws to transparent with distance, so a scene can melt into its sky instead of a fog color
    • getVelocityAtPoint(pos) on an object: the velocity of a point on it, its velocity and its spin together, so the tip of a spinning blade moves faster than its middle; a Box2dObject asks Box2D, about its center of mass
    • collideWithTile gets a third argument, isHit: true when the object overlaps the tile where its move put it, or a bullet's ray goes into it, and false for the places the physics only tries to find which side it hit, so a game can act on a hit once and ignore the rest
    • The Object Collect short: balls drifting through a square and a circle, colored by engineObjectsCallback while inside and counted by engineObjectsCollect, and a click pushes away the balls near the mouse
    • A debug build warns once when a game sets a child object's pos or angle, which its parent puts back every frame, naming localPos or localAngle to set instead
    • The example browser's Share button copies a link to the code as it is in the editor, crushed into the link with JSONCrush so nothing is stored anywhere; the link opens the example it was made from and runs the shared code
    • PostProcessPlugin and setShaderCode take a built in effect on its own, new PostProcessPlugin(postProcessVignette()), joining it with postProcessEffects as they would have needed; before, that failed to compile with an error about uv
    • emitter.finishCallback on ParticleEmitter and ParticleEmitter3D: called once with the emitter when it finishes, done emitting and its last particle gone, so a game can play a sound or start the next effect when an explosion is over; not when it is destroyed immediately, as a scene clear does
    • Box2D beginContact gets a fourth argument, impactSpeed: how fast the two bodies were closing along the contact normal as they touched, spin included, so a game can tell a hard hit from a graze; the Box2D Pool short's click goes by it

    Fixes

    • PostProcessPlugin copies the frame into its texture on the GPU with copyTexImage2D instead of uploading the canvas, which Firefox read back to the CPU every frame; a game with a post process there ran several times slower, AstroBlast's glow at 7 fps where it now runs at 31
    • particleEffect's assert for an option it does not have lists the options it does, and names the one meant when only its case is off, emitrate for emitRate
    • The build scripts, the engine's and the starter, module and TypeScript examples', run their tools with node and no shell, so a file name can not run as a command; a data file with a space in its name no longer breaks the examples' zip, and a tool that is not installed fails with a message to run npm install instead of being downloaded by npx
  4. v1.27.0LittleJS 1.27.0 - One-Way Platforms, Light Cones and Cloud Saves2026-10-09 · 2026-10-09 00:42 UTC
    查看更新说明

    New Demos

    • Platform Physics - Platforms you jump up through and drop down from, a one way door, a lift, a crate to push, a bouncy ball and an ice floor
    • Light System - Now with a swinging searchlight cone
    • Light Shadows - The mouse light now shines through a window of colored panes

    New Changes

    • 2D light cones and gels: light.coneAngle makes a light a cone, like a flashlight or a car's headlights, turning with the light, and light.gel is a picture the light shines through, so one light can be a car's headlights and tail lights; shadows still fall through both
    • One way collision: layer.setOneWay(tile, direction) makes a tile a platform you jump up through and land on, or one way in any direction, and it turns and mirrors with the tile's art; objects, particles and raycasts all follow it, and a solid object's oneWay does the same for moving platforms
    • Swept bullets: obj.isBullet moves a small fast object along a ray, so it never passes through a wall at any speed, and collideWithTile sees it right where it hits; the platformer's bullets use it
    • Cloud saves on Newgrounds and Wavedash, the same on both: cloudSave(slot, data) and cloudLoad(slot), which tells an empty slot (null) from a load that failed (undefined) so a game never saves over a save it could not load; Wavedash stats and presence, and Newgrounds events. The Wavedash calls are tested on Wavedash; the Newgrounds ones are built from its API docs and not yet tried on the site

    Fixes

    • A light pass or tile layer redraw whose callback throws hands back the screen, where a game that caught the error went on drawing into the lightmap or the layer
    • A shader disposed before its first draw is let go of, and a 3D particle callback that changes a particle's age or life time keeps the change
    • An object of no size is no longer held to the speed cap by solid collision it never has
    • 3D level editor: a scale drag keeps a mirrored axis mirrored, a turned object lands and pastes by its turned box, and opening the editor lets go of a mouse the game captured

    Check out the latest on GitHub to see everything we've been working on!

  5. v1.26.0LittleJS 1.26.0 - Environment Maps and 2D Directional Light2026-10-08 · 2026-10-08 01:15 UTC
    查看更新说明

    New Demos

    • 3D Reflections - A chrome ball reflecting the scene around it, captured live, and balls from polished to rough under a sky painted in code
    • Light Shadows - Now with a sun throwing long shadows across the room

    New Changes

    • 3D environment maps: render3D.environment is a cube map that reflective surfaces reflect, sharp or blurred by their shininess, and render3D.skyBox draws one as the sky; makeCubeMap paints one in code, loadCubeMap loads six images, and a cube map with no faces captures the scene around a point, like three.js's CubeCamera. An object's roughness sets its shininess the way glTF measures it, and glTF models read theirs
    • DirectionalLight, a sun for the 2D light system: long shadows across open space, a background marked castBackgroundShadow lit only at its edges facing the sun, its sunDirection toward the sun as in 3D; one per scene, nothing changes without one
    • Wavedash plugin: achievements and leaderboards on Wavedash, the same shape as the Newgrounds plugin, doing nothing off Wavedash
    • Object collision with many solids is far faster, through a grid: 2000 movers went from about 1.3 s a frame to 12 ms, every contact resolved exactly as before
    • A failed assert's error says what went wrong, and common mistakes say what to pass: a color where a tile goes, a number where a vec2 goes, arguments out of order, changing a color constant
    • Shader.dispose() frees a shader's programs; skinned glTF models bend about a fifth faster; the level editors autosave a big map once the edits stop for a moment
    • The package exports littlejsengine/plugins/* and littlejsengine/src/*

    Breaking Changes

    • The built in video capture is removed (key 8, debugVideoCaptureStart and the rest); the FAQ shows how to save a game frame by frame with engineStep
    • Node 22.12 or later to install the package; a game in the browser needs no Node
    • The Electron example is removed
    • render3d.js is in three files, render3d.js, render3dMesh.js and render3dObject.js; nothing changes for a game on a build in dist

    Fixes

    • 3D solids meet as in 2D: a fast object no longer goes through a thin wall, two movers no longer pass through each other, and a pusher stops against a crate held by a wall; the speed cap applies after gravity in 2D and 3D, and setEnablePhysicsSolver(false) stops 3D collision too
    • Tile collision stops an object at a wall or ceiling where it hits, not up to a frame's move short of it
    • Text counts characters as a reader does: an emoji is one, an accent draws on its letter, and Windows line endings break lines
    • A release build goes on past an error in its first frame, and its sounds, Box2D joints and UI shrug off NaN, Infinity and quick taps where they threw, stopped Box2D for good, or lost a click
    • Particle effects: the same count whichever frame they start on, a moving emitter's particles spread along its path, and an option of the wrong kind keeps the effect's own value
    • A glTF model's parts, an attached prefab's and a voxel map's see-through blocks take the settings set on the model
    • Medals: an unlock in one tab is kept by another tab, and one unlocked before medalsInit stays unlocked
    • A sound whose file fails to load calls its callback, a lens flare hidden at the start stays hidden, a tween that throws is ended, and many smaller fixes across the engine, the editors and the examples

    Check out the latest on GitHub to see everything we've been working on!

用户点评

登录用户的真实使用记录,可按版本和硬件筛选
共 0 条

    还没有人点评。第一个说出真实体验的人最有价值。

    README 原文

    未翻译

    LittleJS - The Tiny Fast JavaScript Game Engine

    LittleJS Logo

    NPM Package Build Size NPM Downloads DeepScan MIT License Discord

    🚂 All Aboard!

    LittleJS is a fast, lightweight, and fully open source HTML5 game engine designed for simplicity and performance. Its small footprint is packed with a comprehensive feature set including 2D and 3D rendering, physics, particles, sound, and input handling. The code is very clean and well documented with many examples to get you started quickly.

    Examples | Arcade | Docs | Reference | FAQ | Trailer | Discord | AI

    LittleJS Screenshot1

    LittleJS Screenshot2

    LittleJS Features

    ✨ Graphics

    • Blazing fast WebGL2 + Canvas2D hybrid rendering system
    • Apply Shadertoy style shaders for post-processing effects, or on any object or draw
    • 2D lights with soft shadows, tinted glass and emissive objects, a sun with long shadows, spotlight cones and gels, and normal maps
    • Robust particle effect system with a library of ready made effects and an effect design tool
    • Parallax background layers that repeat across a level of any size
    • Load sprites and animations into texture sheets at runtime, or import TexturePacker and Aseprite atlases

    🧊 LittleJS 3D

    • Built-in 3D renderer that shares the canvas with your 2D game
    • 3D objects with the same physics, children and timers as 2D
    • Shape builders, extruded sprites and text, and OBJ and glTF model loading
    • Height map terrain and voxel maps with collision and raycasts
    • 3D levels and prefabs, built in the 3D level editor and loaded with one call
    • Shadow maps, colored lights, spotlights, lens flares, specular, emissive glow and fog
    • Reflections of a sky box or the scene itself, from mirror sharp to rough
    • Particles, trails, billboards and instanced drawing
    • Orbit, chase and first person cameras with mouse picking
    • Custom shaders on any object
    • Optional Three.js plugin as an alternative renderer

    🔊 Audio

    • Sound and music with mp3, ogg, or wave files
    • Use ZzFX sound generator to play sounds without asset files
    • Spatial audio with stereo panning
    • Audio effects plugin with filter, reverb, delay, distortion and compressor

    🎮 Input

    • Comprehensive input handling for mouse, keyboard, gamepad, and touch
    • Customizable on screen gamepad designed for mobile devices
    • Pinch to zoom on touch screens, read the same way as the mouse wheel

    💥 Physics

    • Robust arcade physics system with collision handling
    • Fast tilemap collision and raycasting, with one-way platforms that turn with their tiles
    • Swept bullet collision, so small fast objects never pass through a wall
    • Object collision that stays fast with thousands of objects
    • Full Box2D integration for realistic physics using Box2D v2.3.1 wasm
    • Grid-based A* pathfinding plugin with optional path smoothing

    🚀 Flexibility

    • Compatible with all modern web browsers and mobile devices
    • Full TypeScript and Module support with example projects for both
    • Vite starter template for instant dev server with hot reload
    • Great for size coding competitions like Js13kGames
    • Open Source and MIT licensed

    🛠️ Developer Tools

    • Live example browser with code editor
    • Built-in 2D and 3D level editors that edit your game while it runs, with undo, autosave and prefabs
    • Make the editors your own with your game's own object types, keys, buttons and tools, see the editor guide
    • 2D levels load and save as Tiled JSON, so Tiled can edit them too
    • UI system with buttons, sliders, text input and nine-slice skins
    • Tween system with easing curves, and a scene system for titles, menus and game states
    • Debug overlay and primitive rendering system
    • Medals, leaderboards and cloud saves on Newgrounds and Wavedash
    • Node.js build system

    🤖 AI Friendly

    • The entire API is small and well documented so LLMs can produce high quality results
    • LittleJS AI Tools - Templates, examples, and prompts tuned for AI + LittleJS workflows
    • LittleJS GPT - Build LittleJS games right inside ChatGPT

    How To Use LittleJS

    To get started download the latest release from GitHub, the engine's builds and source as npm has them (the examples are in the repository), or install via npm:

    npm install littlejsengine
    

    or use degit for an empty Vite template

    npx degit KilledByAPixel/LittleJS/examples/vite-starter my-game
    cd my-game
    npm install
    npm run dev
    

    The examples are only in the repository: clone it, or use Download ZIP on its GitHub page; the npm package and the release zip hold the engine alone. A page that loads images or modules needs a local web server, as browsers block them from a file on disk: serve the repository's root, for example with npx http-server, then open http://localhost:8080/examples/starter/, the place to start. The FAQ has more.

    Here is a minimal Hello World example game, with the script path pointing at the engine file from the download or npm package; it loads nothing, so it runs straight from the file.

    <!DOCTYPE html>
    <script src="node_modules/littlejsengine/dist/littlejs.js"></script>
    <script>
    function gameInit() {}
    function gameUpdate() {}
    function gameUpdatePost() {}
    function gameRender() {}
    function gameRenderPost() { drawTextScreen('Hello World!', mainCanvasSize.scale(.5), 80); }
    engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
    </script>
    

    Tutorials

    Examples

    LittleJS comes with several demos both for learning and using as starter projects to create new games.

    • Example Browser - Live example browser with all examples and editable source
    • LittleJS Arcade - Over 50 example games you can use as starter projects
    • Short Examples - 100+ single-file demos showing off individual engine features
    • Breakout - Block breaking game with post-processing effects
    • Puzzle Game - Match 3 puzzle game with HD rendering and high score tracking
    • Platformer - Platformer/shooter demo that loads level data
    • Box2D Demo - Box2D plugin demonstration and testbed
    • 3D Example - The 3D plugin in one scene: terrain, shadows, lights, sprites, particles and bloom
    • 3D Racing Game - Built-in 3D plugin: terrain, shadows and a chase camera in one short file
    • Three.js Platformer - 3D platformer with LittleJS gameplay and Three.js rendering
    • Particle System Designer - Particle system editor and visualizer

    Builds

    FileModeModuleUse case
    littlejs.jsDebugNoDebug mode with asserts
    littlejs.release.jsReleaseNoOptimized for release
    littlejs.min.jsReleaseNoOptimized for release and minified
    littlejs.esm.jsDebugESMDebug mode with asserts
    littlejs.esm.min.jsReleaseESMOptimized for release and minified

    Every build includes the plugins. littlejs.min.js is about 135 KB gzipped, and the 3D plugins are a large part of that. A bundler like Vite leaves out the plugins a game does not use, so a small 2D game comes to about 26 KB gzipped, and a lit 3D scene to about 47 KB.

    Games Made With LittleJS

    Here are a few of the many amazing games created with LittleJS...

    A collage of screenshots from games made with LittleJS

    A sample of games built with LittleJS.

    LittleJS pixel-art favicon