game-object-components

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

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill game-object-components-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-object-components
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/game-object-components
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill game-object-components-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 Game Objects gain their behavior through a mixin system rather than inheritance, making it hard to know which methods and properties each object type supports and which behaviors changed in v4. This Skill provides a complete reference for every shared component so you can use the correct API without digging through Phaser source code. ## 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 WebGL-only RenderNodes, RenderSteps, Filters, and FilterList systems. - Component-to-Object Matrix: A reference table shows exactly 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: When building a Phaser 4 scene, you need to make a HUD element ignore camera scrolling, tint a sprite with a fill color, and add a blur filter. This Skill tells you to use setScrollFactor(0), setTint(color).setTintMode(Phaser.TintModes.FILL), and enableFilters() with filters.internal.addBlur(). ## Quick Start Ask how to apply a specific visual or transform behavior to a Phaser 4 game object, such as tinting a sprite or fixing a HUD element to the camera.

Frequently Asked Questions about game-object-components

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

FAQPage Schema
How do I tint a sprite in Phaser 4?▼

Use setTint(color) for a uniform tint or pass four colors for per-corner vertex tinting. In v4, setTintFill is removed, so use setTint(color).setTintMode(Phaser.TintModes.FILL) to achieve the old fill effect.

How do I make a HUD element ignore camera scrolling in Phaser?▼

Call setScrollFactor(0) on the game object so it stays fixed to the camera. A value of 1 moves with the camera and 0.5 gives half-speed parallax. Avoid adding physics bodies to scroll factor 0 objects since physics uses world position.

Which Phaser 4 game objects support the Tint component?▼

Tint is available on Sprite, Image, Text, TileSprite, and Video. Container and Graphics do not support Tint, and Container uses AlphaSingle instead of the per-corner Alpha component.

Does setMask work in Phaser 4 WebGL mode?▼

No, the Mask component is Canvas-only in Phaser 4 and logs a warning in WebGL. For WebGL masking, call enableFilters() on the object and use filters.internal.addMask() instead.

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.

What is the difference between setSize and setDisplaySize in Phaser?▼

setSize changes the native internal dimensions used for frames and physics without affecting rendering. setDisplaySize changes the rendered size by adjusting scaleX and scaleY, leaving width and height unchanged.