skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

game-object-components

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

2|10|Updated Jul 28, 2026
Search Tags:#game development#components#webgl#transform#mixins#game objects#phaser 4
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill game-object-components-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-object-components
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/game-object-components
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill game-object-components-kodingvibes

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 need accurate reference material to know which methods and properties each component provides, which Game Objects include which components, and what changed between Phaser 3 and v4. ## 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 are available on Sprite, Image, Text, Container, TileSprite, Video, and Graphics. - Migration Gotchas: Documents v4 breaking changes such as the removal of setTintFill, Canvas-only Mask behavior, and the new TintMode system. - Use Case: While building a Phaser 4 game, you need to make a HUD element ignore camera scrolling and add a glow effect to a sprite. This Skill tells you to use setScrollFactor(0) for the HUD and enableFilters() with filters.internal.addGlow() for the effect. ## Quick Start Ask how to apply a tint, set depth ordering, or enable lighting on a Phaser 4 sprite and get the exact component methods 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 depth and rendering order in Phaser 4?▼

Use setDepth(value) to control z-ordering, 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(), though depth takes priority after the next sort pass.

How do I replace setTintFill in Phaser 4?▼

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

Does Phaser 4 Mask component work in WebGL?▼

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

Why is my Phaser sprite not rendering after setting alpha?▼

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 requiring 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 rendered size. setDisplaySize() changes the rendered size by adjusting scaleX and scaleY, leaving width and height unchanged.

Which Phaser 4 game objects support per-corner alpha?▼

The Alpha component with per-corner alpha (WebGL only) is available on Sprite, Image, Text, TileSprite, and Video. Container uses AlphaSingle instead, which only supports a single global alpha value without per-corner control.

Related Skills

Explore More Software Engineering Skills→
fiandofiando
1

dev-phaser-sprite-management

Implements sprite sheets, texture atlases, animations, and object pooling in Phaser 3.

Community
Intermediate
onymchatonymchat

spritekit

Create 2D games and animations for iOS using SpriteKit.

Official
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