game-object-components

Documents Phaser 4 Game Object component mixins including Transform, Alpha, Tint, and Filters.

Updated Jun 10, 2026
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill game-object-components-mudman1986
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: game-object-components
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/game-object-components
Command: npx skills add https://github.com/mudman1986/quarterless --skill game-object-components-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 Game Objects share behavior through a mixin component system, and developers often struggle to know which methods exist on which objects, how v4 differs from v3, and which features are WebGL-only. This Skill provides a complete reference for every component mixin so you can write correct rendering and transform code without digging through Phaser source files. ## Core Features & Use Cases - Complete Component Reference: Covers Alpha, BlendMode, Depth, Flip, GetBounds, Lighting, Mask, Origin, ScrollFactor, Size, Texture, TextureCrop, Tint, Transform, Visible, PathFollower, and the v4 Filters/RenderNodes systems with full member tables. - Component-to-Object Matrix: The references file maps which components exist on Sprite, Image, Text, Container, TileSprite, Video, and Graphics. - v4 Migration Gotchas: Documents breaking changes such as the removal of setTintFill, Canvas-only Mask behavior, and the new TintMode system. - Use Case: While building a Phaser 4 platformer, you need a HUD element fixed to the camera with a glow effect. The Skill tells you to use setScrollFactor(0) and enableFilters() with filters.internal.addGlow(), and warns that physics bodies ignore scroll factor. ## Quick Start Ask how to apply a tint, mask, or transform to a Phaser 4 sprite and get the correct component method with chaining examples.

Frequently Asked Questions about game-object-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set position, scale, and rotation on a Phaser 4 sprite?

Use the Transform component methods setPosition(x, y), setScale(x, y), setAngle(degrees), or setRotation(radians). All setters return the object, so calls can be chained like sprite.setPosition(100, 200).setScale(2).setAngle(45).

How do I control rendering order and z-index in Phaser 4?

Use the Depth component: setDepth(value) queues a depth sort where higher values render on top. Alternatively, setToTop(), setToBack(), setAbove(), and setBelow() reorder the display list directly, but depth takes priority after the next sort.

Does Phaser 4 still support setTintFill?

No, setTintFill is removed in Phaser 4. Use setTint(color).setTintMode(Phaser.TintModes.FILL) instead. Tint modes are now separate from tint color and include MULTIPLY, FILL, ADD, SCREEN, OVERLAY, and HARD_LIGHT.

Why does my Phaser sprite disappear when alpha is set to 0?

Setting alpha to 0 clears a render flag bit, so the object is not drawn at all rather than rendered transparently. The same behavior applies to scale = 0 and visible = false, since renderFlags is a bitmask that must have all bits set.

Can I use geometry masks in Phaser 4 WebGL mode?

The Mask component's setMask() is Canvas-only in v4 and logs a warning in WebGL. For WebGL masking, call enableFilters() on the object and use filters.internal.addMask() instead.

Which Phaser game objects support the Tint component?

Tint is available on Sprite, Image, Text, TileSprite, and Video, but not on Container or Graphics. Containers use AlphaSingle instead of per-corner Alpha, and Graphics uses AlphaSingle with no Tint or Origin support.