skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

sprites-and-images

Create and manipulate Sprite and Image game objects in Phaser 4 scenes.

Updated Jun 10, 2026
Search Tags:#game development#javascript#image#sprite#phaser#texture#gameobject
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill sprites-and-images-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/sprites-and-images
Command: npx skills add https://github.com/mudman1986/quarterless --skill sprites-and-images-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 game developers need accurate guidance on creating and manipulating Sprite and Image game objects, including the component mixin system, factory methods, and breaking changes from Phaser 3 such as the removal of setTintFill. ## Core Features & Use Cases - Factory Methods: Covers this.add.sprite and this.add.image signatures, parameters, and internal initialization sequences. - Component Mixin Reference: Documents Transform, Alpha, Tint, Origin, Depth, Flip, Size, TextureCrop, ScrollFactor, BlendMode, and Visible components with properties and chainable methods. - Specialized Objects: Explains NineSlice, TileSprite, Blitter, and Video game objects for UI panels, parallax backgrounds, batched rendering, and video playback. - Use Case: When building a Phaser 4 platformer, use this Skill to correctly position a player sprite, apply tints for damage feedback, flip it based on movement direction, and manage render order with depth. ## Quick Start Ask how to create a sprite in Phaser 4, set its texture frame, tint, alpha, origin, and depth, and chain visual operations in a Scene's create method.

Frequently Asked Questions about sprites-and-images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a sprite in Phaser 4?▼

Use this.add.sprite(x, y, texture, frame) inside a Scene's create method, where texture is a loaded texture key and frame is an optional frame name or index. The factory returns a Phaser.GameObjects.Sprite that supports chaining methods like setScale and setTint.

What is the difference between Sprite and Image in Phaser?▼

Both share the same component mixins, but Sprite includes an AnimationState with play, stop, and chain methods and runs preUpdate every frame. Use Image for static textures to avoid per-frame update overhead, and Sprite only when animation is needed.

How do I replace setTintFill in Phaser 4?▼

setTintFill is removed in Phaser 4. Use sprite.setTint(color).setTintMode(Phaser.TintModes.FILL) instead, since tint color and tint blend mode are now set by separate methods.

Does flipX affect the physics body in Phaser?▼

No, flipping is a rendering toggle only and does not affect physics bodies or hit areas. If game logic depends on facing direction, track it separately from flipX and flipY.

Why does my Phaser sprite disappear when I set scale or alpha to 0?▼

Setting scale or alpha to exactly 0 clears the render flag, so the object stops rendering until a non-zero value is restored. Use setVisible(false) if you want to hide an object without changing alpha or scale.

Related Skills

Explore More Software Engineering Skills→
jallard-007jallard-007

animations

Automate Phaser 4 sprite animation orchestration via AnimationManager and AnimationState.

Community
Advanced
mahirocokomahirocoko

physics-arcade

Configure Arcade Physics for Phaser 4 sprites, groups, and collisions.

Community
Advanced
phaserjsphaserjs
40.1k

filters-and-postfx

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

Official
Advanced
Yakoub-aiYakoub-ai
17

phaser-gameobj

Instantiate and configure Phaser 4 game objects with physics and lifecycle methods.

Official
Intermediate