groups-and-containers

A guide to organizing Phaser 4 game objects into logical collections, visual groups, and rendering layers.

In plain words
What is it for?
Use it for enemy collections, reusable object pools, grouped interface elements, nested objects, and controlling which objects appear in front.
Why use it?
It helps manage many objects together and explains when child objects should inherit a parent's position, size, or rotation.

Skill for Claude CodeCodex

▶ Vibe Code a Complete 2D Beat 'Em Up Game From Scratch - Full Tutorial (Codex, Phaser, Images 2.0) Chong-U — AI Oriented Dev · about phaserjs/phaser · on YouTube →
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/phaserjs/phaser/groups-and-containers
Any agent
npx skills add phaserjs/phaser --skill groups-and-containers
Clone the repo
git clone --depth 1 https://github.com/phaserjs/phaser

Made for: Claude Code, Codex.

Per session 52 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,525 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00052 $0.04525
Opus 5 $0.00026 $0.02263
Sonnet 5 $0.00010 $0.00905
Haiku 4.5 $0.00005 $0.00453

Measured 2d ago against content hash abf1e8a02e29, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

groups-and-containers scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/groups-and-containers/SKILL.md · 419 lines

How it starts

The opening of the file, as written. The whole thing — 419 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Groups and Containers

Logical grouping (Group), visual grouping with transform inheritance (Container), render-layer grouping (Layer), object pooling, and when to use each in Phaser 4.

Key source paths: src/gameobjects/group/, src/gameobjects/container/, src/gameobjects/layer/ Related skills: ../sprites-and-images/SKILL.md, ../physics-arcade/SKILL.md

Quick Start

// In a Scene's create() method:

// --- Group: logical collection, no transform, great for pooling ---
const enemies = this.add.group();
enemies.create(100, 200, 'enemy');       // creates Sprite at (100,200)
enemies.create(300, 200, 'enemy');

// --- Container: visual parent with inherited transform ---
const hud = this.add.container(10, 10);
const icon = this.add.image(0, 0, 'heart');
const label = this.add.text(20, 0, 'x3');
hud.add([icon, label]);                  // children move/scale/rotate with hud

// --- Layer: render-ordering bucket, no position/scale ---
const bgLayer = this.add.layer();
const fgLayer = this.add.layer();
bgLayer.add(this.add.image(400, 300, 'sky'));
fgLayer.add(this.add.sprite(400, 300, 'player'));

Core Concepts

Group vs Container vs Layer

Feature Group Container Layer
Purpose Logical collection / pool Visual parent with transform Render-order bucket
On display list No (children are) Yes (renders children) Yes (renders children)
Position/rotation/scale No Yes (children inherit) No
Children storage children (Set) list (Array) List (Structs.List)
Physics Via physics.add.group() Limited (offsets if not at 0,0) No
Input No (children can) Yes (needs hit area shape) No
Object pooling Yes (getFirstDead, kill) No No
Masks No Yes (not per-child in Canvas) Yes
Alpha/blend/visible No (batch via setVisible) Yes Yes
Nesting N/A Container in Container Cannot go in Container
Extends EventEmitter GameObject List
Factory this.add.group() this.add.container(x, y) this.add.layer()

Read the full file on GitHub · 419 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 419 lines · 52 tokens per session scan A abf1e8a02e29

Subscribe to this mod's changes

groups-and-containers is a skill published in the GitHub repository phaserjs/phaser (40,246 stars, last pushed 12d ago), licensed MIT. It adds 52 tokens to every session and 4,525 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

THREE.Terrain

Use this guide when an agent must build, modify, inspect, or document a terrain scene with THREE.Terrain. The library creates heightmapped Three.js terrain and provides procedural generators, filters, material blending, decoration tools, grass, image conversion, analysis, and seeded randomness.

IceCreamYou/THREE.Terrain · 0 tokens

onejs-setup-and-overview

Use this skill whenever the user wants to build or set up user interface in a Unity project using OneJS, React, TypeScript, or JSX, e.g. 'add a main menu to my game', 'build a settings screen', 'make a HUD', 'set up OneJS', 'my OneJS panel is blank', 'the UI is not hot reloading'. Covers confirming OneJS is installed…

Singtaa/OneJS · 199 tokens

Install PuerTS for Unity

Guide for downloading and installing PuerTS UPM packages into a Unity project — covers version selection, package dependencies, download/extract and git URL installation methods, and Editor Assistant setup.

Tencent/puerts · 44 tokens

puerts_changelogs

指引如何为 puerts 项目编写 Unity 和 Unreal 的 changelog.

Tencent/puerts · 22 tokens

vtj-ui-integration

Integrates Vue UI with Three.js while maintaining strict separation. Use when building HUDs, menus, or handling UI-to-scene communication via events.

hexianWeb/Third-Person-MC · 36 tokens

photo-sphere-viewer

Use when displaying 360-degree panoramic images (equirectangular/cubemap/dual-fisheye) in web applications, building virtual tours with markers and transitions, embedding interactive panoramas in Vue/React/vanilla JS, or creating 360-degree video players with gyroscope VR support. Photo-Sphere-Viewer v5: JavaScript…

znlgis/opengis-skills · 99 tokens