Menu
Use this skill when working with Phaser 4 utility functions, actions, alignment, grid layout, or batch operations on game objects. Triggers on: align, grid layout, actions, set operations on groups of game objects.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | actions-and-utilities |
| description | Use this skill when working with Phaser 4 utility functions, actions, alignment, grid layout, or batch operations on game objects. Triggers on: align, grid layout, actions, set operations on groups of game objects. |
Phaser.Actions namespace for batch operations on Game Object arrays, plus Phaser.Utils.Array, Phaser.Utils.Objects, and Phaser.Utils.String helper functions.
Related skills: ../groups-and-containers/SKILL.md, ../sprites-and-images/SKILL.md
// Create 20 sprites and batch-position them in a grid
const sprites = [];
for (let i = 0; i < 20; i++) {
sprites.push(this.add.sprite(0, 0, 'gem'));
}
// Arrange into a 5x4 grid
Phaser.Actions.GridAlign(sprites, {
width: 5,
height: 4,
cellWidth: 64,
cellHeight: 64,
x: 100,
y: 100
});
// Fade alpha from 0 to 1 across all sprites
Phaser.Actions.Spread(sprites, 'alpha', 0, 1);
// Offset each sprite's x by 10, with a step of 2 per item
Phaser.Actions.IncX(sprites, 10, 2);
// Works with Groups too
const group = this.add.group({ key: 'star', repeat: 11 });
Phaser.Actions.PlaceOnCircle(group.getChildren(), new Phaser.Geom.Circle(400, 300, 200));
Every Action in Phaser.Actions follows the same pattern:
x, y, alpha, etc.).group.getChildren().Most Set/Inc actions delegate to two core functions:
PropertyValueSet(items, key, value, step, index, direction) -- Sets items[i][key] = value + (i * step).PropertyValueInc(items, key, value, step, index, direction) -- Adds items[i][key] += value + (i * step).The step parameter adds an incremental offset per item. The index and direction parameters control iteration start point and order (1 = forward, -1 = backward).
Actions like PlaceOnCircle, PlaceOnLine, RandomRectangle, etc. accept Phaser geometry objects (Phaser.Geom.Circle, Phaser.Geom.Line, etc.), NOT Game Object shapes. If using a Phaser.GameObjects.Circle, pass its .geom property instead.
| Action | Signature | Description |
|---|---|---|
SetX | (items, value, step?, index?, direction?) | Set x property |
SetY | (items, value, step?, index?, direction?) | Set y property |
SetXY | (items, x, y?, stepX?, stepY?, index?, direction?) | Set both x and y; y defaults to x |
SetAlpha | (items, value, step?, index?, direction?) | Set alpha |
SetBlendMode | (items, value, index?, direction?) | Set blend mode |
SetDepth | (items, value, step?, index?, direction?) | Set render depth |
SetHitArea | (items, hitArea?, callback?) | Set interactive hit area |
SetOrigin | (items, originX, originY?, stepX?, stepY?, index?, direction?) | Set origin point |
SetRotation | (items, value, step?, index?, direction?) | Set rotation (radians) |
SetScale | (items, scaleX, scaleY?, stepX?, stepY?, index?, direction?) | Set both scale axes |
SetScaleX | (items, value, step?, index?, direction?) | Set scaleX |
SetScaleY | (items, value, step?, index?, direction?) | Set scaleY |
SetScrollFactor | (items, x, y?, stepX?, stepY?, index?, direction?) | Set scroll factor |
SetScrollFactorX | (items, value, step?, index?, direction?) | Set horizontal scroll factor |
SetScrollFactorY | (items, value, step?, index?, direction?) | Set vertical scroll factor |
SetTint | (items, topLeft, topRight?, bottomLeft?, bottomRight?) | Set tint color(s) |
SetVisible | (items, value, index?, direction?) | Set visibility |
PropertyValueSet | (items, key, value, step?, index?, direction?) | Generic: set any named property |
| Action | Signature | Description |
|---|---|---|
IncX | (items, value, step?, index?, direction?) | Add to x |
IncXY | (items, x, y?, stepX?, stepY?, index?, direction?) | Add to x and y |
IncY | (items, value, step?, index?, direction?) | Add to y |
IncAlpha | (items, value, step?, index?, direction?) | Add to alpha |
Angle | (items, value, step?, index?, direction?) | Add to angle (degrees) |
Rotate | (items, value, step?, index?, direction?) | Add to rotation (radians) |
ScaleX | (items, value, step?, index?, direction?) | Add to scaleX |
ScaleXY | (items, scaleX, scaleY?, stepX?, stepY?, index?, direction?) | Add to both scale axes |
ScaleY | (items, value, step?, index?, direction?) | Add to scaleY |
PropertyValueInc | (items, key, value, step?, index?, direction?) | Generic: increment any named property |
| Action | Signature | Description |
|---|---|---|
PlaceOnCircle | (items, circle, startAngle?, endAngle?) | Evenly space on circle perimeter |
PlaceOnEllipse | (items, ellipse, startAngle?, endAngle?) | Evenly space on ellipse perimeter |
PlaceOnLine | (items, line) | Evenly space along a line |
PlaceOnRectangle | (items, rect, shift?) | Evenly space on rectangle perimeter |
PlaceOnTriangle | (items, triangle, stepRate?) | Evenly space on triangle perimeter |
RandomCircle | (items, circle) | Random positions within a circle |
RandomEllipse | (items, ellipse) | Random positions within an ellipse |
RandomLine | (items, line) | Random positions along a line |
RandomRectangle | (items, rect) | Random positions within a rectangle |
RandomTriangle | (items, triangle) | Random positions within a triangle |
| Action | Signature | Description |
|---|---|---|
GridAlign | (items, config) | Arrange in grid; config: { width, height, cellWidth, cellHeight, position, x, y } |
AlignTo | (items, position, offsetX?, offsetY?) | Chain-align each item next to the previous one using Phaser.Display.Align constants |
FitToRegion | (items, scaleMode?, region?, itemCoverage?) | Scale/position each GO to fill a rectangle (v4.0.0+). scaleMode: 0=stretch, -1=fit inside, 1=cover outside |
| Action | Signature | Description |
|---|---|---|
Spread | (items, property, min, max, inc?) | Linearly distribute a property from min to max across all items |
SmoothStep | (items, property, min, max, inc?) | Distribute using Hermite smoothstep interpolation |
SmootherStep | (items, property, min, max, inc?) | Distribute using Ken Perlin's smootherstep |
| Action | Signature | Description |
|---|---|---|
RotateAround | (items, point, angle) | Rotate all items around a point (radians) |
RotateAroundDistance | (items, point, angle, distance) | Rotate around a point at a fixed distance |
ShiftPosition | (items, x, y, direction?, output?) | Snake-like: move head to x/y, each item takes position of the previous |
WrapInRectangle | (items, rect, padding?) | Wrap x/y to stay within rectangle bounds |
| Action | Signature | Description |
|---|---|---|
GetFirst | (items, compare, index?) | Find first item matching all properties in compare object |
GetLast | (items, compare, index?) | Find last item matching all properties in compare object |
Call | (items, callback, context) | Invoke callback for each item |
Shuffle | (items) | Randomly reorder the array (Fisher-Yates) |
ToggleVisible | (items) | Toggle visible on each item |
PlayAnimation | (items, key, ignoreIfPlaying?) | Play animation on all items with an anims component |
| Action | Signature | Description |
|---|---|---|
AddEffectBloom | (items, config?) | Add Bloom filter effect to a Camera or GO. Returns { parallelFilters, threshold, blur }[] |
AddEffectShine | (items, config?) | Add Shine filter effect |
AddMaskShape | (items, config?) | Apply a shape-based mask (circle, square, rectangle, ellipse) with optional blur |
Namespace: Phaser.Utils.Array
| Function | Signature | Description |
|---|---|---|
Add | (array, item, limit?, callback?, context?) | Add item(s) if not already present; optional size limit |
AddAt | (array, item, index?, limit?, callback?, context?) | Insert item(s) at index |
BringToTop | (array, item) | Move item to end of array |
CountAllMatching | (array, property, value, startIndex?, endIndex?) | Count items where property equals value |
Each | (array, callback, context, ...args) | Iterate with callback; passes item + extra args |
EachInRange | (array, callback, context, startIndex, endIndex, ...args) | Iterate a slice with callback |
FindClosestInSorted | (value, array, key?) | Binary-search style closest match in sorted array |
Flatten | (array, output?) | Flatten nested arrays into a single array |
GetAll | (array, property?, value?, startIndex?, endIndex?) | Filter items matching property/value |
GetFirst | (array, property?, value?, startIndex?, endIndex?) | First item matching property/value |
GetRandom | (array, startIndex?, length?) | Return a random element |
MoveAbove | (array, item1, item2) | Move item2 directly above item1 |
MoveBelow | (array, item1, item2) | Move item2 directly below item1 |
MoveDown | (array, item) | Move item one position toward index 0 |
MoveTo | (array, item, index) | Move item to specific index |
MoveUp | (array, item) | Move item one position toward end |
NumberArray | (start, end, prefix?, suffix?) | Generate [start..end] range; optional string prefix/suffix |
NumberArrayStep | (start?, end?, step?) | Generate range with custom step size |
QuickSelect | (array, k, left?, right?, compare?) | Partial sort: kth smallest element in-place |
Range | (a, b, options?) | Generate array from range config |
Remove | (array, item, callback?, context?) | Remove item(s) from array |
RemoveAt | (array, index, callback?, context?) | Remove item at index |
RemoveBetween | (array, startIndex, endIndex, callback?, context?) | Remove items in range |
RemoveRandomElement | (array, startIndex?, length?) | Remove and return a random element |
Replace | (array, oldItem, newItem) | Swap one item for another |
RotateLeft | (array, total?) | Shift elements left; last wraps to front |
RotateRight | (array, total?) | Shift elements right; first wraps to end |
SafeRange | (array, startIndex, endIndex, throwError?) | Validate index range is within bounds |
SendToBack | (array, item) | Move item to index 0 |
SetAll | (array, property, value, startIndex?, endIndex?) | Set a property on all items in range |
Shuffle | (array) | Fisher-Yates shuffle; modifies in-place |
SortByDigits | (array) | Sort strings by embedded numeric values |
SpliceOne | (array, index) | Fast single-element splice |
StableSort | (array, compare?) | Guaranteed stable sort (merge sort fallback for engines without native stable sort) |
Swap | (array, item1, item2) | Swap two items in-place |
Also includes Phaser.Utils.Array.Matrix sub-namespace for 2D matrix operations.
Namespace: Phaser.Utils.Objects
| Function | Signature | Description |
|---|---|---|
Clone | (obj) | Shallow clone of object |
DeepCopy | (obj) | Recursive deep copy of object or array |
Extend | (target, ...sources) | jQuery-style extend; copies properties from sources to target |
GetAdvancedValue | (source, key, defaultValue) | Like GetValue but resolves random/callback config values |
GetFastValue | (source, key, defaultValue?) | Top-level-only property lookup; no dot-path support. Faster than GetValue |
GetMinMaxValue | (source, key, min, max, defaultValue) | Get value clamped between min and max |
GetValue | (source, key, defaultValue, altSource?) | Dot-path property lookup (e.g. 'render.screen.width'). Falls back to altSource then defaultValue |
HasAll | (source, keys) | True if source has ALL listed keys |
HasAny | (source, keys) | True if source has ANY listed key |
HasValue | (source, key) | True if source has the key |
IsPlainObject | (obj) | True if obj is a plain {} object (not DOM, not window) |
Merge | (obj1, obj2) | Merge obj2 into a clone of obj1 |
MergeRight | (obj1, obj2) | Merge obj1 into a clone of obj2 |
Pick | (source, keys) | Return new object with only the specified keys |
SetValue | (source, key, value) | Set a dot-path property value |
Namespace: Phaser.Utils.String
| Function | Signature | Description |
|---|---|---|
Format | (string, values) | Replace %1, %2, etc. markers with array values |
Pad | (str, len?, pad?, dir?) | Pad string to length. dir: 1=left, 2=right, default=both |
RemoveAt | (string, index) | Remove character at index |
Reverse | (string) | Reverse the string |
UppercaseFirst | (string) | Capitalize first character |
UUID | () | Generate RFC4122 v4 UUID string |
const enemies = this.add.group({ key: 'enemy', repeat: 9 });
// Position all children in a grid
Phaser.Actions.GridAlign(enemies.getChildren(), {
width: 5, height: 2,
cellWidth: 80, cellHeight: 80,
x: 100, y: 50
});
// Fan out alpha across all enemies
Phaser.Actions.Spread(enemies.getChildren(), 'alpha', 0.3, 1);
// Place sprites starting at x=100, each one 50px further right
Phaser.Actions.SetX(sprites, 100, 50);
// Result: items[0].x=100, items[1].x=150, items[2].x=200, ...
// Increment rotation with increasing step
Phaser.Actions.Rotate(sprites, 0.1, 0.05);
// Result: items[0].rotation += 0.1, items[1].rotation += 0.15, items[2].rotation += 0.2, ...
const bounds = new Phaser.Geom.Rectangle(0, 0, 800, 600);
// Random scatter
Phaser.Actions.RandomRectangle(sprites, bounds);
// Keep wrapped in bounds during update
Phaser.Actions.WrapInRectangle(sprites, bounds);
// Deep property access with fallback
const width = Phaser.Utils.Objects.GetValue(config, 'render.screen.width', 800);
// Fast top-level lookup (no dot-path, better performance)
const speed = Phaser.Utils.Objects.GetFastValue(config, 'speed', 100);
// Generate frame key strings
const keys = Phaser.Utils.Array.NumberArray(1, 10, 'frame_', '.png');
// Result: ['frame_1.png', 'frame_2.png', ..., 'frame_10.png']
group.getChildren() to get the array.Phaser.Geom objects, not Game Object shapes. For a Phaser.GameObjects.Circle, pass circle.geom.SetXY defaults y to x if y is undefined or null. Pass 0 explicitly if you want y=0 and x=something else.Spread with a single item places it at the midpoint (min + max) / 2, not at min.step is multiplied by iteration index, not added cumulatively. Item 0 gets value + 0*step, item 1 gets value + 1*step, etc.StableSort uses native Array.sort when the engine supports stable sorting, falling back to merge sort only when needed.Shuffle (both Actions and Utils.Array) modifies the array in-place and returns it.GetValue vs GetFastValue: Use GetFastValue when the key is always top-level (no dots). It skips dot-path parsing and is faster in hot loops.AddEffectBloom / AddEffectShine / AddMaskShape are v4-only filter-based effects. They return arrays of created effects instead of the input.| Area | Path |
|---|---|
| All Actions | src/actions/ |
| Actions index | src/actions/index.js |
| Core set/inc helpers | src/actions/PropertyValueSet.js, src/actions/PropertyValueInc.js |
| GridAlign config typedef | src/actions/typedefs/ |
| Array utilities | src/utils/array/ |
| Array matrix utils | src/utils/array/matrix/ |
| Object utilities | src/utils/object/ |
| String utilities | src/utils/string/ |
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.
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.
Use this skill when adding audio or sound to a Phaser 4 game. Covers loading audio, playing sounds, music, volume, spatial audio, Web Audio API, and SoundManager. Triggers on: sound, audio, music, volume, mute.
Use this skill when working with cameras in Phaser 4. Covers camera effects (shake, fade, flash, pan, zoom), following sprites, scroll, bounds, viewports, multiple cameras, and minimap. Triggers on: camera, viewport, scroll, zoom, follow, shake, fade.
Use this skill when working with curves and paths in Phaser 4. Covers splines, bezier curves, lines, ellipses, path followers, and mathematical curve types. Triggers on: curve, path, spline, bezier, path follower.
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.