# Melonjs 20 Migration

Use this skill when writing melonJS code that may be based on pre-20.x knowledge, when...

- Repository: https://github.com/melonjs/melonJS (6430 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add melonjs/melonJS --skill melonjs-20-migration -g -a claude-code -y`
Codex: `npx skills add melonjs/melonJS --skill melonjs-20-migration -g -a codex -y`
Cursor: `npx skills add melonjs/melonJS --skill melonjs-20-migration -g -a cursor -y`
Gemini CLI: `npx skills add melonjs/melonJS --skill melonjs-20-migration -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add melonjs/melonJS`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

```js
// ✗ 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()`.

The rest: https://github.com/melonjs/melonJS/blob/HEAD/packages/melonjs/skills/melonjs-20-migration/SKILL.md