# Melonjs Getting Started

Use this skill when starting or bootstrapping a melonJS game, creating the Application...

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

## Install

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

## Description

Use this skill when starting or bootstrapping a melonJS game, creating the Application, choosing a renderer, or setting up the first scene. Covers the mandatory async init, the world container, adding renderables, and the WebGPU/WebGL 2/Canvas fallback. Triggers on: melonjs, new Application, app.init, app.world, video.AUTO, video.WEBGL, video.CANVAS, Stage, state.change, getting started, bootstrap.

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

# Getting started with melonJS

> Bootstrapping a melonJS 20.x game: the `Application` lifecycle, the mandatory
> `await app.init()`, the world container, and what the renderer fallback means
> for feature availability.

**Applies to:** melonJS 20.x. Older major versions differ, see the
`melonjs-20-migration` skill.

## The bootstrap

`Application` construction is synchronous but **initialisation is not**. `init()`
returns a promise and must be awaited before building any renderable, loading
assets, or entering a scene.

```js
import { Application, Text } from "melonjs";

const app = new Application(1218, 562, {
    parent: "screen",      // id of the DOM element to mount into
    scale: "auto",
    backgroundColor: "#202020",
});
await app.init();          // ← REQUIRED. Nothing below works without it.

app.world.addChild(
    new Text(609, 281, {
        font: "Arial",
        size: 160,
        fillStyle: "#FFFFFF",
        textAlign: "center",
        textBaseline: "middle",
        text: "Hello World !",
    }),
);
```

**This is the single most common thing to get wrong.** On 19.x the constructor
called `init(width, height, options)` for you; on 20.x `init()` takes no
arguments and calling, and awaiting, it is your job. Nothing that follows
names the missing call. The constructor does build `app.world`, so adding a
plain renderable succeeds and simply never draws, no canvas is appended and the
app never subscribes to the frame tick, while constructing a `Sprite` or a
`Text` throws `Cannot read properties of undefined (reading 'renderer')`,
because the global `game` those two fall back on is only set once the first
`init()` resolves. Either way `app.renderer` and `app.viewport` stay `undefined`
and the page stays blank.

`init()` is asynchronous because acquiring a WebGPU device is asynchronous. There
is no synchronous alternative.

## Top-level await

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