skills.rest
onemanking
onemankingCOMMUNITY
Explore all skills by this author →
GitHub

game-object-components

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

Updated Apr 13, 2026
Search Tags:#game development#javascript#components#webgl#sprite#phaser#mixins
One-click install
npx skills add https://github.com/onemanking/the-operator --skill game-object-components-onemanking
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-object-components
Source: https://github.com/onemanking/the-operator/tree/main/.github/skills/game-object-components
Command: npx skills add https://github.com/onemanking/the-operator --skill game-object-components-onemanking

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 developers often struggle to know which components exist, which game objects support them, and what changed between Phaser 3 and v4. 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: Documents Alpha, BlendMode, Depth, Flip, GetBounds, Lighting, Mask, Origin, ScrollFactor, Size, Texture, TextureCrop, Tint, Transform, Visible, PathFollower, and the v4 WebGL-only Filters/RenderNodes systems with full member tables. - Component-to-Object Matrix: The references file maps which components are available on Sprite, Image, Text, Container, TileSprite, Video, and Graphics. - v4 Migration Guidance: Covers breaking changes such as the removal of setTintFill, Canvas-only Mask behavior, and the new TintMode system. - Use Case: While building a Phaser 4 scene, you need to fade a sprite, pin a HUD element to the camera, and apply a glow filter. This Skill tells you to use setAlpha, setScrollFactor(0), and enableFilters with filters.internal.addGlow, plus the gotchas around render flags. ## Quick Start Ask how to position, tint, mask, or apply filters to a Phaser 4 game object and get the correct component methods and v4-specific caveats.

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 4 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, and the default origin is 0.5 (center) unless changed with setOrigin.

How do I control rendering order in Phaser 4?▼

Use the Depth component's setDepth(value) method, where higher values render on top and trigger a display list sort. Alternatively, setToTop, setToBack, setAbove, and setBelow reorder the display list without changing depth, but depth takes priority after the next sort.

Does Phaser 4 still support setTintFill?▼

No, setTintFill was removed in Phaser 4. Use setTint(color) combined with 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?▼

Rendering is skipped when alpha is 0, scale is 0, or visible is false, because each clears a bit in the renderFlags bitmask. All bits (visible, alpha, scale, texture) must be set for the object to draw.

Can I use geometry masks in Phaser 4 WebGL?▼

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 lacks Origin, Flip, and GetBounds as well.

Related Skills

Explore More Software Engineering Skills→
Yakoub-aiYakoub-ai
17

phaser-coder

Implement Phaser 4 game features with TypeScript and class-based scenes.

Official
Advanced
onymchatonymchat

spritekit

Create 2D games and animations for iOS using SpriteKit.

Official
Intermediate
phaserjsphaserjs
40.1k

filters-and-postfx

Apply GPU-based visual filters and post-processing effects to Phaser 4 scenes.

Official
Advanced
quanngynxquanngynx

mixin-pattern

Compose shared JavaScript/TypeScript methods into class prototypes using Object.assign.

Community
Basic