melonJS 2

A modern & lightweight HTML5 game engine

melonJS is an open-source HTML5 game engine that empowers developers to create 2D games using modern JavaScript and TypeScript. Built with ES6 classes and bundled using esbuild, it provides tree-shaking support for optimal bundle sizes.

melonJS is licensed under the MIT License and actively maintained with the help of a small team of enthusiasts at AltByte in Singapore.

Why melonJS

melonJS is designed so you can focus on making games, not on graphics plumbing.

• Canvas2D-inspired rendering API — If you've used the HTML5 Canvas, you already know melonJS. The rendering API (save, restore, translate, rotate, setColor, fillRect, ...) follows the same familiar patterns — no render graphs, no shader pipelines, no instruction sets to learn.

• True renderer abstraction — Write your game once, run it on WebGL or Canvas2D with zero code changes. The engine handles all GPU complexity behind a unified API, with automatic fallback when WebGL is not available. Designed to support future backends (WebGPU) without touching game code.

• Complete engine, minimal footprint — Physics, tilemaps, audio, input, cameras, tweens, particles, UI — a full 2D game stack in a single tree-shakeable ES module. No dependency sprawl, no library stitching.

• Tiled as a first-class citizen — Deep Tiled integration built into the core: orthogonal, isometric, hexagonal and staggered maps, animated tilesets, collision shapes, object properties, compressed formats — all parsed and rendered natively.

• Batteries included, hackable by design — Get started in minutes with minimal setup. When you need to go deeper: ES6 classes throughout, a plugin system for engine extensions, and a clean architecture that's easy to extend without fighting the framework.

About melonJS

melonJS is a fully featured game engine :

Compatibility

• Standalone library (does not rely on anything else, except a HTML5 capable browser)
• Compatible with all major browsers (Chrome, Safari, Firefox, Opera, Edge) and mobile devices

Graphics

• 2D sprite-based graphic engine
• Fast WebGL renderer for desktop and mobile devices with fallback to Canvas rendering
• High DPI resolution & Canvas advanced auto scaling
• Sprite with 9-slice scaling option, and animation management
• Built-in effects such as tinting, masking and 2D lighting
• Standard spritesheet, single and multiple Packed Textures support
• Compressed texture support (DDS, KTX, KTX2, PVR, PKM) with automatic format detection and fallback
• System & Bitmap Text
• Video sprite playback

Sound

• Web Audio support with 3D spatial audio and stereo panning based on Howler

Physics

• Polygon (SAT) based collision algorithm for accurate detection and response
• Fast Broad-phase collision detection using spatial partitioning (QuadTree)
• Collision filtering for optimized automatic collision detection
• Multiple shapes per body for complex hitboxes

Input

• Mouse and Touch device support (with mouse emulation)
• Gamepad support with button and axes binding
• Keyboard event handling with key binding system
• Device motion & accelerometer support

Camera

• Camera follow with configurable deadzone and damping
• Built-in shake, fade and flash effects

UI

• Clickable, hoverable and draggable UI elements
• Drag-and-drop support
• Text buttons with built-in styling

Level Editor

• Tiled map format version +1.0 built-in support for easy level design
  • Uncompressed and compressed Plain, Base64, CSV and JSON encoded XML tilemap loading
  • Orthogonal, Isometric and Hexagonal maps (both normal and staggered)
  • Multiple layers (multiple background/foreground, collision and Image layers)
  • Parallax scrolling via Image layers
  • Animated and multiple Tileset support
  • Tileset transparency settings
  • Layers alpha and tinting settings
  • Rectangle, Ellipse, Polygon and Polyline objects support
  • Tiled Objects with custom properties
  • Flipped & rotated Tiles
  • Dynamic Layer and Object/Group ordering
  • Dynamic Entity loading
  • Shape based Tile collision support

Assets

• Asynchronous asset loading with progress tracking
• A fully customizable preloader
• Support for images, JSON, TMX/TSX, audio, video, binary and fonts

Core

• A state manager (to easily manage loading, menu, options, in-game state)
• Tween effects with multiple easing functions (Quadratic, Cubic, Elastic, Bounce, etc.) and Bezier/Catmull-Rom interpolation
• Transition effects
• Pooling support for object recycling
• Basic Particle System
• EventEmitter based event system
• Persistent data storage (save/load via localStorage)
• Plugin system for extending engine capabilities

Tools integration

melonJS is supporting the below tools and frameworks natively or through our official plugin(s) :

Tools integration and usage with melonJS is documented in our Wiki.

Getting Started

Start a new project using one of our boilerplate templates :

• ES6 x Vite boilerplate
• TypeScript x Vite boilerplate

Or follow the step-by-step Platformer Tutorial.

For more details, check the wiki Details & Usage guide.

Examples

• Platformer (source)
• Isometric RPG (source)
• SVG Shapes (source)
• Graphics (source)
• Hello World (source)
• Whac-A-Mole (source)
• Compressed Textures (source)

Browse all examples here

--