3 Star 4 Fork 0

Gitee 极速下载 / littlejs

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/KilledByAPixel/LittleJS
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

NPM Package Build Size NPM Downloads DeepScan Discord

🚂 All aboard!

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

LittleJS Screenshot

About LittleJS

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

✨ Graphics

  • Super fast sprite and tile map rendering engine with WebGL
  • Update and render over 10,000 objects at a solid 60fps
  • Robust particle effect system and effect design tool
  • Apply Shadertoy compatible shaders for post processinge effects

🔊 Audio

  • Positional sound effects with wave or ZzFX sound effect generator
  • Music with mp3, ogg, wave, or ZzFXM

🎮 Input

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

💥 Physics

  • 2D physics engine with collision handling for axis aligned boxes
  • Very fast collision and raycasting for tile maps

🚀 Flexability

  • Compatible with all modern web bowsers and on mobile devices
  • Support for TypeScript and Modules with example projects for both
  • Ideal for size coding competitions like js13kGames, a special example project builds to a 7KB zip file
  • Builds to a Windows executable with Electron for distribution on PC platforms like Steam
  • 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

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

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 contains 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. Some editors can do this automatically like Visual Studio Code with the Live Server plugin. You can also use http-server via npm.

The Breakout Tutorial is provided to demonstrate how to make a simple game from scratch. The tutorial is also available on YouTube.

There is also a GitNation talk that explains how LittleJS works and some tips on how to use it.

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

Engine Source Code

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

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

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

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 are making with LittleJS.

LittleJS Logo

MIT License Copyright (c) 2021 Frank Force Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

LittleJS 是一个超轻量级的 2D JavaScript 游戏引擎,具有快速的 WebGL 渲染 展开 收起
JavaScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/mirrors/littlejs.git
git@gitee.com:mirrors/littlejs.git
mirrors
littlejs
littlejs
main

搜索帮助

14c37bed 8189591 565d56ea 8189591