- name
- melonjs-20-migration
- description
- Use this skill when writing melonJS code that may be based on pre-20.x knowledge, when migrating a game from melonJS 19.x or earlier, or when an API you expected does not exist. Covers the mandatory async Application.init(), the WebGL 2 baseline and WebGPU backend, renderable post effects replacing the shader property, and the deprecated exports still present. Triggers on: migration, upgrade, melonJS 19, me.game, me.video.init, renderable.shader, Compositor, CanvasTexture, me.Math, deprecated.
- license
- MIT
Migrating to melonJS 20.x
What changed in melonJS 20.x, and which older APIs are gone, deprecated, or renamed. Read this before writing melonJS code from memory — much of what is published about melonJS predates 20.0.
Why this skill exists: most melonJS material in circulation describes 19.x or earlier. Code written from that knowledge looks correct and fails at runtime. The items below are ordered by how likely they are to be reproduced from memory.
1. Application.init() is mandatory and asynchronous
Since 20.0, constructing an Application no longer initialises it.
// ✗ pre-20.x — the constructor called init(width, height, options) for you
const app = new Application(800, 600, { parent: "screen" });
app.world.addChild(sprite); // added, but nothing ever renders
// ✓ 20.x
const app = new Application(800, 600, { parent: "screen" });
await app.init(); // REQUIRED
app.world.addChild(sprite);
init() is async because acquiring a WebGPU device is async. There is no
synchronous alternative, and no automatic fallback that papers over the missing
call. Nothing that then breaks names it: the constructor still builds
app.world, so children can be added and simply never draw — no canvas is
appended, the app never subscribes to the frame tick, and app.renderer /
app.viewport stay undefined — while constructing a Sprite or Text first
throws a TypeError on the unset global game instead.
The signature changed too: 19.x took init(width, height, options), 20.x takes
none, and anything passed is ignored (settings come from the constructor).
video.init(...) no longer exists. The video module now exports only the
four renderer constants (AUTO, CANVAS, WEBGL, WEBGPU) — there is no
init on it to call. Any code shaped like me.video.init(800, 600, {...}) is
from a removed API. Build an Application and await init().
Note that import * as me from "melonjs" still works, so me.Sprite style is
fine. It is the globals bootstrap that is gone, not the namespace import.