Home

Welcome to the melonJS wiki — your guide to building 2D and 3D games with melonJS.

---

Getting Started

New to melonJS? Start here:

npm create melonjs my-game
cd my-game
npm install
npm run dev

• FAQ — common questions and answers
• Beginner Tutorial: Platformer Game — step-by-step guide to building your first game
• Boilerplate — ready-to-go project template with TypeScript and Vite
• Live Examples — interactive demos showcasing engine features

---

Core Concepts

• The Core Engine — game loop, states, and the Application class
• Renderables — Renderable, Sprite, Text, and BitmapText
• Container — scene graph, child management, and nesting
• Adding and Managing Game Objects — world container, z-ordering, object pool, persistence
• Resources & Asset Loading — preloading images, audio, maps, and fonts

---

Rendering

• Rendering API — full API reference with Canvas 2D comparison, gradients, dashed lines, bezier curves, and more
• Shader Effects — built-in WebGL post-processing effects (glow, shine, blur, …) and writing your own
• API Documentation — auto-generated API docs

---

Working in 3D

• Working in 3D — general concepts: Camera3d opt-in, conventions (Y-down + +Z forward), Mesh / OBJ rendering, sprites + depth, and frame-rate-independent smoothing (math.damp). Worked example: AfterBurner showcase.
• Loading & supported 3D assets — the asset pipeline (OBJ/MTL), and what's supported vs. not across geometry, materials/textures, animation, and lighting.
• Loading glTF / GLB scenes — import a whole Blender-authored scene (node graph, meshes, camera) and place each node as a Mesh.
• 3D spatial queries — Sphere, world.adapter.querySphere, raycast3d, and bulk frustum culling (Camera3d.queryVisible).
• 2.5D games (Paper Mario-style) — perspective camera for depth, gameplay on a flat Z plane.

---

Physics & Collision

• Adding a Physics Body — body, shapes, velocity, friction, and collision types
• Collision Shapes — Rect, Ellipse, Polygon, Line, and RoundRect
• Defining Collision Shapes in Tiled — drawing collision layers in the Tiled map editor
• Migrating to the Physics Adapter API — moving from the legacy new me.Body(this, shape) pattern to the 19.5 declarative bodyDef + body method API (all on the built-in adapter)
• Switching Physics Adapters — using @melonjs/matter-adapter, expected differences, porting checklist, recipes
• BuiltinAdapter Quirks — SAT-specific behaviors that don't carry to other engines — patterns to avoid baking into code that might switch adapters later

---

Tiled Map Editor

• Tiled Map Editor — the map editor used by melonJS
• Defining Collision Shapes in Tiled — collision layers and shape types
• melonJS Particle Studio — visual particle editor

---

Third-Party Tools

• Using TexturePacker — create and use texture atlases
• Using SpriteIlluminator — per-pixel sprite lighting with normal maps
• Using PhysicsEditor — import complex collision shapes
• Using Bitmap Fonts — generate and render bitmap fonts

---

Platform Deployment

• Capacitor (iOS & Android)
• Cordova (iOS & Android)
• Facebook Instant Games
• WeChat Mini Games

---

Community & Resources

• Discord — chat with the melonJS community
• Made with melonJS — games and demos built with melonJS
• Upgrade Guide — API changes between versions
• Upgrading to melonJS 2 — migrating from ES5/Legacy to ES6 classes
• Contributing — how to contribute to melonJS

---

Tutorials

• Beginner Tutorial: Platformer Game
• Space Invaders with ConfigCat
• Building a Typing Game

---

Learning JavaScript

• MDN JavaScript Guide — comprehensive reference by Mozilla
• Eloquent JavaScript — free online book