game-object-components

What this skill does

# Phaser 4 -- Game Object Components Reference

> Component mixins that provide shared behavior to all Game Objects: Alpha, BlendMode, Depth, Flip, GetBounds, Lighting, Mask, Origin, ScrollFactor, Size, Texture, TextureCrop, Tint, Transform, Visible, PathFollower, RenderNodes, RenderSteps, Filters, FilterList.

## Quick Start

```js
// Every Game Object gets its component methods via mixins.
// Just call them directly on any game object:
const sprite = this.add.sprite(400, 300, 'hero');

sprite.setAlpha(0.5);                          // Alpha
sprite.setBlendMode(Phaser.BlendModes.ADD);    // BlendMode
sprite.setDepth(10);                           // Depth
sprite.setFlip(true, false);                   // Flip
sprite.setOrigin(0, 0);                        // Origin
sprite.setScrollFactor(0);                     // ScrollFactor (HUD)
sprite.setDisplaySize(64, 64);                 // Size
sprite.setTexture('hero', 'walk-1');           // Texture
sprite.setTint(0xff0000);                      // Tint
sprite.setPosition(100, 200);                  // Transform
sprite.setVisible(false);                      // Visible
sprite.setScale(2);                            // Transform
sprite.setAngle(45);                           // Transform

// Per-corner alpha (WebGL only)
sprite.setAlpha(1, 0.5, 0.5, 1);

// Crop a texture region
sprite.setCrop(0, 0, 32, 32);

// Enable WebGL filters (post-processing)
sprite.enableFilters();
sprite.filters.internal.addBlur(1, 2, 2, 1);

// Lighting (WebGL only, v4 feature)
sprite.setLighting(true);
```

## Core Concepts

### The Mixin System

Phaser uses `Phaser.Class` with a `Mixins` array to compose Game Objects from reusable component objects. Each component is a plain JS object whose properties and methods are copied onto the class prototype. This is NOT prototypal inheritance -- it is property copying at class definition time.

```js
// How Phaser defines Sprite internally:
var Sprite = new Class({
    Extends: GameObject,
    Mixins: [
        Components.Alpha,
        Components.BlendMode,
        Components.Depth,
        Components.Flip,
        Components.GetBounds,
        Components.Lighting,
        Components.Mask,
        Components.Origin,
        Components.RenderNodes,
        Components.ScrollFactor,
        Components.Size,
        Components.TextureCrop,
        Components.Tint,
        Components.Transform,
        Components.Visible,
        SpriteRender
    ],
    initialize: function Sprite (scene, x, y, texture, frame) { /* ... */ }
});
```

### Key Rules

1. Components are mixed in at class creation, not per-instance.
2. Most setter methods return `this` for chaining: `sprite.setAlpha(0.5).setDepth(10).setPosition(100, 200)`.
3. Many properties use getters/setters internally (e.g., `alpha`, `depth`, `visible`, `scale`, `rotation`). Setting `alpha = 0` or `scale = 0` clears render flags, skipping rendering.
4. `renderFlags` is a bitmask: bit 0 = visible, bit 1 = alpha, bit 2 = scale, bit 3 = texture. All bits must be set for the object to render.
5. **Alpha vs AlphaSingle**: `Alpha` supports per-corner alpha (WebGL), `AlphaSingle` only supports a single global alpha. Containers use `AlphaSingle`.
6. **Texture vs TextureCrop**: `TextureCrop` extends `Texture` with `setCrop()` support. Sprites and Images use `TextureCrop`; some objects use plain `Texture`.
7. **Filters and RenderSteps** are v4-only, WebGL-only systems for post-processing.

## Complete Component Reference

### Alpha

Provides per-corner transparency. Used by Sprite, Image, Text, and most renderable objects.

| Member | Type | Description |
|---|---|---|
| `alpha` | number (get/set) | Global alpha 0-1. Setting this also sets all four corners. Setting to 0 disables rendering. Default: `1` |
| `alphaTopLeft` | number (get/set) | Top-left corner alpha. WebGL only. |
| `alphaTopRight` | number (get/set) | Top-right corner alpha. WebGL only. |
| `alphaBottomLeft` | number (get/set) | Bottom-left corner alpha. WebGL only. |
| `alphaBottomRight` | number (get/set) | Bottom-right corner alpha. WebGL only. |
| `setAlpha(topLeft?, topRight?, bottomLeft?, bottomRight?)` | method | Set alpha. One arg = uniform. Four args = per-corner (WebGL). Returns `this`. |
| `clearAlpha()` | method | Resets alpha to 1. Returns `this`. |

### AlphaSingle

Simplified alpha with no per-corner support. Used by Container.

| Member | Type | Description |
|---|---|---|
| `alpha` | number (get/set) | Alpha 0-1. Default: `1` |
| `setAlpha(value?)` | method | Set alpha. Returns `this`. |
| `clearAlpha()` | method | Resets alpha to 1. Returns `this`. |

### BlendMode

Controls how pixels are composited during rendering.

| Member | Type | Description |
|---|---|---|
| `blendMode` | number/string (get/set) | Current blend mode. Accepts `Phaser.BlendModes` const, string, or integer. |
| `setBlendMode(value)` | method | Set the blend mode. Returns `this`. |

WebGL blend modes: `NORMAL`, `ADD`, `MULTIPLY`, `SCREEN`, `ERASE`. Canvas supports additional browser-dependent modes.

### Depth

Controls rendering order (z-index). Higher depth renders on top.

| Member | Type | Description |
|---|---|---|
| `depth` | number (get/set) | Depth value. Setting it queues a depth sort. Default: `0` |
| `setDepth(value)` | method | Set depth. Returns `this`. |
| `setToTop()` | method | Move to top of display list (no depth change). Returns `this`. |
| `setToBack()` | method | Move to back of display list. Returns `this`. |
| `setAbove(gameObject)` | method | Move above another Game Object in display list. Returns `this`. |
| `setBelow(gameObject)` | method | Move below another Game Object in display list. Returns `this`. |

### Flip

Visual mirroring without affecting physics bodies.

| Member | Type | Description |
|---|---|---|
| `flipX` | boolean | Horizontal flip state. Default: `false` |
| `flipY` | boolean | Vertical flip state. Default: `false` |
| `setFlipX(value)` | method | Set horizontal flip. Returns `this`. |
| `setFlipY(value)` | method | Set vertical flip. Returns `this`. |
| `setFlip(x, y)` | method | Set both flip states. Returns `this`. |
| `toggleFlipX()` | method | Toggle horizontal flip. Returns `this`. |
| `toggleFlipY()` | method | Toggle vertical flip. Returns `this`. |
| `resetFlip()` | method | Reset both to false. Returns `this`. |

### GetBounds

Calculate positions and bounding rectangles regardless of origin.

| Member | Type | Description |
|---|---|---|
| `getCenter(output?, includeParent?)` | method | Center coordinate. Returns `Vector2Like`. |
| `getTopLeft(output?, includeParent?)` | method | Top-left coordinate. Returns `Vector2Like`. |
| `getTopCenter(output?, includeParent?)` | method | Top-center coordinate. Returns `Vector2Like`. |
| `getTopRight(output?, includeParent?)` | method | Top-right coordinate. Returns `Vector2Like`. |
| `getLeftCenter(output?, includeParent?)` | method | Left-center coordinate. Returns `Vector2Like`. |
| `getRightCenter(output?, includeParent?)` | method | Right-center coordinate. Returns `Vector2Like`. |
| `getBottomLeft(output?, includeParent?)` | method | Bottom-left coordinate. Returns `Vector2Like`. |
| `getBottomCenter(output?, includeParent?)` | method | Bottom-center coordinate. Returns `Vector2Like`. |
| `getBottomRight(output?, includeParent?)` | method | Bottom-right coordinate. Returns `Vector2Like`. |
| `getBounds(output?)` | method | Full bounding rectangle. Returns `Rectangle`. |

Set `includeParent = true` to factor in parent Container transforms.

### Lighting (v4, WebGL only)

Enables light-based rendering with the Phaser 4 lighting system.

| Member | Type | Description |
|---|---|---|
| `lighting` | boolean | Whether to use lighting. Default: `false` |
| `selfShadow` | object | `{ enabled, penumbra, diffuseFlatThreshold }`. Self-shadow settings. |
| `setLighting(enable)` | method | Enable/disable lighting. Returns `this`. |
| `setSelfShadow(enabled?, penumbra?, diffuseFlatThreshold?)` | method | Con