Game object components

--- name: game-object-components description: "Use this skill when working with Phaser 4 game object components and the mixin system. Covers Transform, Alpha, Tint, Origin, Depth, Flip, Mask, GetBounds, Lighting, and other shared component behaviors. Triggers on: component, mixin, transform, mask, bounds, lighting." --- # 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