skills.rest
russellmorgan
russellmorganCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sprites-and-images

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

Updated Jul 13, 2026
Search Tags:#game development#javascript#image#GameObject#sprite#phaser#Texture
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill sprites-and-images-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/sprites-and-images
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill sprites-and-images-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 developers need accurate guidance on creating and manipulating Sprite and Image game objects, including the component mixin system, factory methods, and visual operations, without digging through engine source files. ## Core Features & Use Cases - Factory Methods: Covers this.add.sprite and this.add.image signatures, parameters, and constructor initialization sequences. - Component Mixin Reference: Documents Transform, Alpha, Tint, Origin, Depth, Flip, Size, TextureCrop, and other components with properties and methods. - Phaser 4 Migration Notes: Flags breaking changes such as the removal of setTintFill and the split of tint color from tint mode. - Use Case: When building a game scene, use this Skill to correctly position, scale, tint, flip, and depth-sort sprites, and to choose between Image and Sprite based on animation needs. ## Quick Start Ask how to create a sprite in Phaser 4, set its texture frame, and apply tint, scale, and depth 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 added to the display list.

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.

How do I tint a sprite in Phaser 4?▼

Call sprite.setTint(color) to set the tint color and sprite.setTintMode(mode) to change the blend operation. The Phaser 3 setTintFill method is removed; use setTint with Phaser.TintModes.FILL instead.

Why is my Phaser sprite not rendering?▼

Setting scale or alpha to exactly 0 clears the render flag so the object is not drawn until set back to a non-zero value. Also check the visible property and confirm the texture key was loaded in preload.

Does flipX affect the physics body in Phaser?▼

No, flipping is a rendering toggle only and does not affect physics bodies or hit areas. Track facing direction separately in game logic if it matters for collisions or movement.

How do I control render order of sprites in Phaser?▼

Use the depth property via setDepth(value), where higher values render on top, or reorder the display list with setToTop, setToBack, setAbove, and setBelow. The z property on Transform does not control render order.

Related Skills

Explore More Software Engineering Skills→
autonomous-aiautonomous-ai
465

loading-assets

Load images, spritesheets, atlases, audio, and tilemaps with the Phaser Loader plugin.

Official
Intermediate
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
encounterplusencounterplus
16

pixijs-scene-particle-container

Render large numbers of similar sprites with PixiJS ParticleContainer.

Official
Intermediate