skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

game-object-components

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

Updated May 7, 2021
Search Tags:#components#webgl#transform#phaser#mixins#game objects#tint
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill game-object-components-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-object-components
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/game-object-components
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill game-object-components-travispwingo

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 need a single reference covering every component's properties, methods, defaults, and v4-specific changes to avoid trial-and-error coding. ## 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 RenderNodes, RenderSteps, Filters, and FilterList systems. - Component-to-Object Matrix: The references file maps which components exist on Sprite, Image, Text, Container, TileSprite, Video, and Graphics. - Migration Gotchas: Covers v4 breaking changes such as the removal of setTintFill, Canvas-only Mask behavior, and the new TintMode system. - Use Case: When building a HUD element, look up ScrollFactor to fix it to the camera, check the matrix to confirm Container lacks GetBounds, and chain setAlpha and setDepth calls correctly. ## Quick Start Ask how to make a Phaser 4 sprite semi-transparent, tinted red, and rendered above other objects using its component methods.

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, setScale, setAngle, or setRotation, all of which return the object for chaining. The angle property uses degrees while rotation uses radians, and scale is the average of scaleX and scaleY.

How do I control rendering order of game objects in Phaser 4?▼

Use the Depth component's setDepth 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 is removed in Phaser 4. Use setTint(color) followed by setTintMode(Phaser.TintModes.FILL) instead, since tint color and tint mode are now separate settings with modes like MULTIPLY, FILL, ADD, and SCREEN.

Why does my Phaser object disappear when I set alpha to 0?▼

Setting alpha to 0 clears a bit in the object's renderFlags bitmask, so the object is skipped by the renderer entirely rather than drawn transparently. The same behavior applies to scale set to 0 and visible set to false.

Can I use geometry masks in Phaser 4 WebGL?▼

The Mask component's setMask method 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?▼

According to the component matrix, 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 and Flip 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
Raphe-devRaphe-dev

game-object-components

Apply shared component mixins to Phaser 4 game objects.

Community
Intermediate
phaserjsphaserjs
40.1k

filters-and-postfx

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

Official
Advanced
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-syntax-controls

Configure Three.js camera controls with renderer.domElement and update() calls.

Official
Advanced