skills.rest
autonomous-ai
autonomous-aiOFFICIAL
Explore all skills by this author →
Website𝕏@autonomous_labsGitHub

game-object-components

Reference Phaser 4 game object component mixins for transform, alpha, tint, depth, and rendering behavior.

465|41|Updated Aug 4, 2026
Search Tags:#game development#javascript#components#webgl#sprite#phaser#mixins
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill game-object-components-autonomous-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-object-components
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/game-object-components
Command: npx skills add https://github.com/autonomous-ai/openharness --skill game-object-components-autonomous-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 game objects share behavior through a mixin-based component system, and remembering which methods, properties, and renderer restrictions apply to each component is error-prone. This Skill provides a complete reference for all shared components so you can manipulate sprites, images, text, and containers correctly on the first try. ## 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 Filters/RenderNodes systems. - v4 Migration Guidance: Documents breaking changes such as the removal of setTintFill, Canvas-only masking, and the new tint mode system. - Component-to-Object Matrix: The references file maps which components exist on Sprite, Image, Text, Container, TileSprite, Video, and Graphics. - Use Case: You are building a HUD that must stay fixed to the camera. The Skill tells you to call setScrollFactor(0), warns that physics bodies ignore scroll factor, and shows how to chain setDepth and setOrigin for correct layering. ## Quick Start Ask how to make a Phaser sprite semi-transparent, tinted red, and rendered above other objects, and apply the returned setAlpha, setTint, and setDepth calls.

Frequently Asked Questions about game-object-components

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

FAQPage Schema
How do I change a Phaser sprite's position, scale, and rotation?▼

Use the Transform component methods: setPosition(x, y), setScale(x, y), setAngle(degrees), or setRotation(radians). All setters return the object for chaining, so sprite.setPosition(100, 200).setScale(2).setAngle(45) works in one line.

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

Use the Depth component's setDepth(value) method, where higher values render on top and trigger a display list sort. You can also reorder the display list directly with setToTop(), setToBack(), setAbove(), and setBelow() without changing depth values.

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 is my Phaser game object not rendering at all?▼

Setting alpha to 0, scale to 0, or visible to false clears bits in the renderFlags bitmask, which skips rendering entirely rather than drawing transparently. Check these three properties first when an object disappears unexpectedly.

Can I use geometry masks in Phaser 4 WebGL mode?▼

The Mask component's setMask() 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.

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 has its own fill and line styling system.

Related Skills

Explore More Software Engineering Skills→
onemankingonemanking

loading-assets

Loads images, audio, atlases, fonts, and tilemaps through the Phaser Loader plugin.

Community
Intermediate
mudman1986mudman1986

tweens

Animate properties over time in Phaser 4 using tweens, chains, and easing functions.

Community
Intermediate
mudman1986mudman1986

filters-and-postfx

Applies GPU-based visual filters and post-processing effects to Phaser 4 game objects and cameras.

Community
Intermediate
tja688tja688

game-object-components

Document Phaser 4 game object mixins and component-based architecture.

Community
Intermediate