MCPInstall

data-manager

Use this skill when using the Phaser 4 DataManager to store custom key-value data on game objects, listen for data change events, or manage game state. Triggers on: setData, getData, data events, custom data storage.

Installs
759
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/phaserjs/phaser --skill data-manager
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads data-manager automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

DataManager

Phaser's DataManager provides key-value storage with event-driven change tracking. It operates at three levels: per-GameObject (sprite.setData/getData), per-Scene (this.data), and global (this.registry). Every set/change/remove operation emits events, enabling reactive data binding between game systems without tight coupling.

Key source paths: src/data/DataManager.js, src/data/DataManagerPlugin.js, src/data/events/, src/gameobjects/GameObject.js (setData/getData/incData/toggleData) Related skills: ../scenes/SKILL.md, ../events-system/SKILL.md

Quick Start

// Per-GameObject data (auto-creates DataManager on first use)
const gem = this.add.sprite(100, 100, 'gem');
gem.setData('value', 50);
gem.setData({ color: 'red', level: 2 });
gem.getData('value');            // 50
gem.getData(['value', 'color']); // [50, 'red']

// Increment / toggle helpers
gem.incData('value', 10);       // value is now 60
gem.incData('value', -5);       // value is now 55 (negative to decrement)
gem.toggleData('active');        // false -> true (starts from false if unset)

// Scene-level data (this.data is a DataManagerPlugin)
this.data.set('score', 0);
this.data.get('score');          // 0
this.data.values.score += 100;   // triggers changedata event

// Global registry (shared across ALL scenes)
this.registry.set('highScore', 9999);
// Any scene can read it:
this.registry.get('highScore');  // 9999

Core Concepts

DataManager (Phaser.Data.DataManager)

The base class that stores key-value pairs in an internal list object. It provides:

  • set(key, value) -- stores a value; emits setdata (new key) or changedata + changedata-{key} (existing key). Accepts an object to set multiple keys at once.
  • get(key) -- retrieves a value, or pass an array of keys to get an array of values.
  • inc(key, amount) -- increments a numeric value (defaults to +1). Creates from 0 if key does not exist.
  • toggle(key) -- flips a boolean value. Creates from false if key does not exist.
  • remove(key) -- deletes a key; emits removedata. Accepts an array of keys.
  • has(key) -- returns true if the key exists.
  • getAll() -- returns a shallow copy of all key-value pairs as a plain object.
  • query(regex) -- returns all entries whose keys match the given RegExp.
  • each(callback, context, ...args) -- iterates all entries. Callback signature: (parent, key, value, ...args).
  • merge(data, overwrite) -- bulk-imports from an object. overwrite defaults to true; set false to skip existing keys.
  • pop(key) -- retrieves and deletes a key in one call; emits removedata.
  • reset() -- clears all data and unfreezes.
  • freeze / setFreeze(bool) -- when frozen, all set/remove/inc/toggle operations silently no-op.
  • count -- read-only property returning the number of stored entries.

The values proxy object allows direct property access with event emission:

// After set('gold', 100), you can do:
data.values.gold += 50; // emits changedata and changedata-gold
// But you MUST use set() to create a key first -- direct assignment
// to values for a new key will NOT set up the event proxy.

Scene Data Plugin (Phaser.Data.DataManagerPlugin)

Extends DataManager. Registered as the data scene plugin, accessible as this.data in any Scene. It uses the Scene's event emitter (scene.sys.events), so data events fire on the Scene's event bus.

// In a Scene's create():
this.data.set('lives', 3);

// Listen on the scene's event emitter
this.events.on('changedata-lives', (scene, value, previousValue) => {
    console.log('Lives changed from', previousValue, 'to', value);
});

The plugin auto-cleans on scene shutdown (removes its shutdown listener) and fully destroys on scene destroy.

Registry (Global Data Store)

The registry is a plain DataManager instance on the Game object (game.registry). It has its own dedicated EventEmitter (not shared with any scene). Every scene gets a reference as this.registry via the injection map.

// Scene A sets global data
this.registry.set('currentLevel', 1);

// Scene B reads it
const level = this.registry.get('currentLevel');

// Listen for registry changes (note: events fire on registry.events, NOT this.events)
this.registry.events.on('changedata-currentLevel', (game, value, previousValue) => {
    console.log('Level changed to', value);
});

The registry persists for the lifetime of the Game. It is never automatically cleared on scene restart or shutdown.

Per-GameObject Data

GameObjects do NOT have a DataManager by default. It is created lazily on first call to setData(), getData(), incData(), or toggleData(). You can also explicitly call setDataEnabled().

The DataManager's event emitter is the GameObject itself (which extends EventEmitter), so data events fire directly on the GameObject:

const player = this.add.sprite(0, 0, 'player');
player.setData('hp', 100);

// Listen directly on the game object
player.on('changedata-hp', (gameObject, value, previousValue) => {
    if (value <= 0) {
        gameObject.destroy();
    }
});

Common Patterns

Setting and Getting Data

// Single key
sprite.setData('speed', 200);
sprite.getData('speed'); // 200

// Multiple keys at once (object form)
sprite.setData({ speed: 200, direction: 'left', hp: 100 });

// Batch get with destructuring
const [speed, hp] = sprite.getData(['speed', 'hp']);

// Direct values access (read and write after initial set)
sprite.data.values.speed = 300; // emits changedata event
const s = sprite.data.values.speed; // 300

Listening for Changes

// Listen for ANY data change on a game object
sprite.on('changedata', (gameObject, key, value, previousValue) => {
    console.log(key, 'changed to', value);
});

// Listen for a SPECIFIC key change (preferred -- more efficient)
sprite.on('changedata-hp', (gameObject, value, previousValue) => {
    this.hpBar.setValue(value);
});

// Listen for new data being set (first time only)
sprite.on('setdata', (gameObject, key, value) => {
    console.log('New data key:', key);
});

// Listen for data removal
sprite.on('removedata', (gameObject, key, value) => {
    console.log('Removed:', key, 'was', value);
});

Global Registry for Cross-Scene State

// HUD scene watches for score changes set by the Game scene
// In HUDScene.create():
this.registry.events.on('changedata-score', (game, value) => {
    this.scoreText.setText('Score: ' + value);
});
this.events.once('shutdown', () => {
    this.registry.events.off('changedata-score');
});

// In GameScene.update():
this.registry.set('score', this.score);

Complex Data and Objects

// You can store any value type: numbers, strings, booleans, objects, arrays
sprite.setData('inventory', ['sword', 'shield']);
sprite.setData('stats', { str: 10, dex: 8, int: 12 });

// CAUTION: mutating a stored object/array does NOT trigger changedata
const inv = sprite.getData('inventory');
inv.push('potion');
// No event fired! The reference didn't change.

// To trigger the event, re-set the key:
sprite.setData('inventory', [...inv]); // new array reference triggers changedata

Merging Data

// Merge defaults -- only sets keys that don't already exist
sprite.data.merge({ hp: 100, speed: 200, armor: 0 }, false);

// Merge and overwrite existing values
sprite.data.merge(savedState, true);

Querying Data by Pattern

// Find all keys matching a regex
this.data.set('enemy_1_hp', 50);
this.data.set('enemy_2_hp', 80);
this.data.set('player_hp', 100);

const enemyData = this.data.query(/^enemy_/);
// { enemy_1_hp: 50, enemy_2_hp: 80 }

Freezing Data

// Prevent all modifications (set, remove, inc, toggle all become no-ops)
sprite.data.freeze = true;
sprite.setData('hp', 0); // silently ignored
sprite.data.freeze = false;
sprite.setData('hp', 0); // works again

// Also available as a chainable method
sprite.data.setFreeze(true);

Data Persistence Pattern

// Save to localStorage
function saveGame(scene) {
    const state = scene.data.getAll();
    localStorage.setItem('saveData', JSON.stringify(state));
}

// Restore from localStorage
function loadGame(scene) {
    const raw = localStorage.getItem('saveData');
    if (raw) {
        scene.data.merge(JSON.parse(raw), true);
    }
}

Events

All data events are defined in Phaser.Data.Events. The emitter depends on context: for GameObjects it is the GameObject itself; for scene data it is scene.sys.events; for the registry it is registry.events.

ConstantStringFired WhenCallback Args
SET_DATA'setdata'A new key is created(parent, key, value)
CHANGE_DATA'changedata'An existing key's value changes(parent, key, value, previousValue)
CHANGE_DATA_KEY'changedata-'Specific key changes (append key name)(parent, value, previousValue)
REMOVE_DATA'removedata'A key is removed(parent, key, value)
DESTROY'destroy'DataManager's parent is destroyed(none)

The parent argument is the owner of the DataManager (the GameObject, Scene, or Game instance).

Note: CHANGE_DATA_KEY is a prefix. The actual event string is 'changedata-' + the key name. For example, setting a key called score emits 'changedata-score'.

API Quick Reference

GameObject Convenience Methods

MethodReturnsDescription
setDataEnabled()thisExplicitly creates the DataManager (normally auto-created)
setData(key, value)thisSet one key or pass an object for multiple
getData(key)*Get one value or pass an array for multiple
incData(key, amount?)thisIncrement numeric value (default +1, negative to decrement)
toggleData(key)thisToggle boolean value

DataManager Methods

MethodReturnsDescription
set(key, value)thisSet single key or object of key-value pairs
get(key)*Get value(s) -- string or array of strings
getAll()objectShallow copy of all entries
query(regex)objectAll entries with keys matching the RegExp
each(cb, ctx, ...args)thisIterate all entries
merge(data, overwrite?)thisBulk import; overwrite defaults to true
remove(key)thisDelete key(s) -- string or array
pop(key)*Get and delete in one call
has(key)booleanCheck if key exists
inc(key, amount?)thisIncrement (default +1)
toggle(key)thisToggle boolean
setFreeze(bool)thisFreeze/unfreeze modifications
reset()thisClear all data and unfreeze
countnumberRead-only entry count
freezebooleanGet/set frozen state
valuesobjectProxy object for direct property access

get() vs values -- Copies vs Live References

Understanding the difference between get() and values is critical for correct data updates:

// get() returns a copy for primitives -- modifying the local variable does NOT update the DataManager
let score = this.data.get('score');
score += 10;  // local copy only, DataManager still has the old value

// values provides a live proxy -- assignment triggers CHANGE_DATA event
this.data.values.score += 10;  // updates the DataManager AND emits changedata-score

// For objects, get() returns the stored reference (not a deep copy)
const stats = this.data.get('stats');
stats.hp -= 10; // mutates the stored object but does NOT trigger events
this.data.set('stats', { ...stats }); // re-set with new reference to trigger event

Event Emitter Routing

Data events emit on different targets depending on where the DataManager lives:

DataManager OwnerEvents Emit OnExample Listener
GameObjectThe GameObject itselfsprite.on('changedata-hp', ...)
Scene (this.data)Scene event bus (this.events)this.events.on('changedata-score', ...)
Registry (this.registry)Registry's own emitterthis.registry.events.on('changedata-score', ...)

The key-specific event 'changedata-{key}' fires only for that exact key, while the generic 'changedata' fires for every key change. Always prefer key-specific listeners for performance.

Gotchas

Keys Are Case-Sensitive

'gold' and 'Gold' are two different keys. Be consistent with naming conventions.

values Proxy Requires set() First

You must call set(key, value) to create a key before modifying it via data.values.key. Direct assignment to values for a brand-new key will NOT create the event proxy -- it creates a plain property that emits no events.

Object/Array Mutation Does Not Trigger Events

Mutating a stored object or array in place does not emit changedata because the reference has not changed. You must re-set the key with a new reference to trigger the event.

Registry Listeners Persist Across Scene Restarts

The registry lives on the Game object. Listeners added to this.registry.events are NOT cleaned up when a scene restarts. Always remove them on SHUTDOWN:

create() {
    const handler = (game, value) => { this.updateHUD(value); };
    this.registry.events.on('changedata-score', handler);
    this.events.once('shutdown', () => {
        this.registry.events.off('changedata-score', handler);
    });
}

Frozen DataManagers Fail Silently

When freeze is true, all write operations (set, remove, inc, toggle, pop, merge) silently do nothing. No error is thrown and no event is emitted. This can be confusing if you forget you froze the data.

Scene Data Plugin Shutdown vs Destroy

The DataManagerPlugin removes its shutdown listener on shutdown but does NOT clear data on shutdown. Data persists if the scene restarts. It only fully resets on scene destroy. If you need a clean slate on restart, manually reset in a shutdown listener:

this.events.once('shutdown', () => {
    this.data.reset();
});

inc() on Non-Numeric Values

inc() uses the + operator internally. On strings it concatenates rather than adds numerically. On booleans, they coerce to 0 or 1 before incrementing. Only use inc() on keys you know hold numbers.

reset() Emits No Events

Calling reset() clears all data silently -- no removedata events fire for the deleted keys. If you need removal events for each key, iterate and call remove() individually instead.

Freezing Can Interrupt Batch Operations

setFreeze(true) takes effect immediately. If you freeze mid-way through a series of set() calls, subsequent calls in the batch silently no-op. Always freeze only after all writes are complete.

getAll() Returns a Snapshot

getAll() returns a new plain object each time. It is a shallow copy -- primitive values are independent, but object/array values still share references with the DataManager's internal storage.

First Argument in changedata-key Callbacks

For the generic changedata event, the callback receives (parent, key, value, previousValue). For the key-specific changedata-{key} event, the key argument is omitted: (parent, value, previousValue). This difference is easy to miss.

Source File Map

PathDescription
src/data/DataManager.jsCore DataManager class -- set, get, each, merge, remove, query, freeze, events
src/data/DataManagerPlugin.jsScene plugin extending DataManager; registered as this.data
src/data/events/index.jsEvent constant exports (CHANGE_DATA, SET_DATA, REMOVE_DATA, CHANGE_DATA_KEY, DESTROY)
src/data/events/SET_DATA_EVENT.js'setdata' -- emitted when a new key is created
src/data/events/CHANGE_DATA_EVENT.js'changedata' -- emitted when an existing key's value changes
src/data/events/CHANGE_DATA_KEY_EVENT.js'changedata-' -- per-key change event prefix
src/data/events/REMOVE_DATA_EVENT.js'removedata' -- emitted when a key is removed
src/data/events/DESTROY_EVENT.js'destroy' -- DataManager listens for this from its parent
src/gameobjects/GameObject.jssetData, getData, incData, toggleData, setDataEnabled convenience methods
src/core/Game.jsCreates game.registry -- the global DataManager instance
src/scene/Scene.jsExposes this.registry (injected from Game) and this.data (DataManagerPlugin)

FAQ

What does the data-manager skill do?

Use this skill when using the Phaser 4 DataManager to store custom key-value data on game objects, listen for data change events, or manage game state. Triggers on: setData, getData, data events, custom data storage.

How do I install data-manager?

Run npx skills add https://github.com/phaserjs/phaser --skill data-manager in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/data-manager/ (personal) or .claude/skills/data-manager/ (project).

Which AI agents can use data-manager?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is data-manager safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains data-manager?

It is published by phaserjs in phaserjs/phaser. It has 759 recorded installs.

More from phaserjs/phaser

View all →

game-setup-and-config

phaserjs/phaser

Use this skill when creating a new Phaser 4 game instance or configuring GameConfig options. Covers renderer selection, canvas setup, scaling, pixel art, FPS settings, boot sequence, and all config sub-objects. Triggers on: new Phaser.Game, GameConfig, game setup, renderer, pixel art, FPS.

Media & Creative1.2K installs

sprites-and-images

phaserjs/phaser

Use this skill when creating Sprites or Images in Phaser 4. Covers factory methods, texture/frame selection, position, scale, rotation, tint, flip, alpha, origin, depth, and the component mixin system. Triggers on: Sprite, Image, this.add.sprite, this.add.image, texture, setTint, setAlpha.

Media & Creative1.1K installs

animations

phaserjs/phaser

Use this skill when creating or controlling sprite animations in Phaser 4. Covers spritesheets, atlases, AnimationManager, AnimationState, play/stop/chain, frame callbacks, and animation events. Triggers on: sprite animation, spritesheet, play animation, animation frames.

Frontend & Design1.1K installs

tilemaps

phaserjs/phaser

Use this skill when working with tilemaps in Phaser 4. Covers loading Tiled JSON maps, creating tilemap layers, tile collision, dynamic tiles, tile properties, and tilemap camera culling. Triggers on: Tilemap, Tiled, tilemap layer, tile collision, tile properties.

972 installs

v4-new-features

phaserjs/phaser

Use this skill when learning about new features, game objects, components, and rendering capabilities added in Phaser 4. Covers Filters, RenderNodes, CaptureFrame, Gradient, Noise, SpriteGPULayer, TilemapGPULayer, Lighting component, RenderSteps, and new tint modes. Triggers on: new in v4, Phaser 4 features, RenderNode, SpriteGPULayer, CaptureFrame, Gradient game object, Noise game object, new tint modes. For migrating v3 code to v4, see the v3-to-v4-migration skill instead.

Media & Creative965 installs

scenes

phaserjs/phaser

Use this skill when working with Phaser 4 scenes. Covers scene lifecycle methods, scene transitions, parallel scenes, scene communication, sleeping, pausing, restarting, and the SceneManager. Triggers on: Scene, scene lifecycle, preload, create, update, scene transition, SceneManager.

956 installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs