Melonjs Scenes And State
Use this skill for scene structure and game flow in melonJS, Stage subclasses, the...
Install
npx skills add melonjs/melonJS --skill melonjs-scenes-and-state -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Engineering
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use this skill for scene structure and game flow in melonJS, Stage subclasses, the state manager, transitions, pausing, the update loop, timers and tweens. Covers onResetEvent versus the constructor, state.set before state.change, the camera and world lifecycle per stage, and pause-aware timing. Triggers on: Tween, easing, fade out, flash, pulse, punch, shrink back, ease in, ease out, animate over time, countdown in update, Stage, state, state.set, state.change, state.transition, state.pause, onResetEvent, onDestroyEvent, onActivateEvent, onDeactivateEvent, PLAY, MENU, LOADING, update loop, GAME_UPDATE, timer, setTimeout, setInterval, Tween, freeze.
Scenes, game state and timing
Stages and the state manager
A Stage is a screen. Register it against a state id, then change to it:
import { Stage, state } from "melonjs";
class PlayScreen extends Stage {
onResetEvent(app) { /* build the scene */ }
onDestroyEvent(app) { /* tear it down */ }
}
state.set(state.PLAY, new PlayScreen()); // register first
state.change(state.PLAY); // then switch
Built-in ids: state.LOADING, state.MENU, state.READY, state.PLAY,
state.GAMEOVER (no underscore), state.GAME_END, state.SCORE,
state.CREDITS, state.SETTINGS, state.DEFAULT. state.USER (100) is the
base for your own ids, const CUTSCENE = state.USER + 1.
Build scene content in onResetEvent, not the constructor. onResetEvent
runs on every entry to the state; the constructor runs once. Scene content
created in the constructor exists once and is not rebuilt when you return.
onResetEvent(app) receives the Application, use that rather than importing
the global game.
Extra arguments to state.change are forwarded:
state.change(state.PLAY, false, { level: 2 }); // → onResetEvent(app, { level: 2 })
The second argument is forceChange: pass true to switch immediately instead
of on a deferred tick, which is what you want when changing state right after a
preload completes. It is ignored when a transition is configured, a transition
always drives the switch from its own completion callback.
