skills.rest
onemanking
onemankingCOMMUNITY
Explore all skills by this author →
GitHub

sprites-and-images

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Phaser 4 game objects requires knowing which factory methods, component mixins, and property setters to use, and the API surface differs from Phaser 3 in ways that cause subtle bugs. This Skill provides the exact signatures, component sources, and migration notes needed to create and manipulate Sprites and Images correctly. ## Core Features & Use Cases - Factory Methods: Create game objects with this.add.sprite and this.add.image, including texture and frame selection. - Component Mixin Reference: Covers Transform, Alpha, Tint, Origin, Depth, Flip, Size, ScrollFactor, BlendMode, and TextureCrop with exact method signatures. - Specialized Objects: Guidance on NineSlice, TileSprite, Blitter, and Video game objects for UI panels, parallax backgrounds, and batched rendering. - Use Case: When building a game scene, use this Skill to correctly position, scale, tint, and layer sprites, and to avoid Phaser 4 breaking changes like the removed setTintFill method. ## Quick Start Ask the AI to create a Phaser 4 sprite at position 100, 200 with the player texture, scaled to 2x and tinted red.

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. The texture parameter accepts a string key or Texture instance, 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, and Sprite only when you need animation.

Does Phaser 4 still support setTintFill?▼

No, setTintFill is removed in Phaser 4 and calling it logs an error. Use sprite.setTint(color).setTintMode(Phaser.TintModes.FILL) instead, since tint color and tint mode are now set separately.

Why is my Phaser sprite not rendering after setting scale or alpha?▼

Setting scale, scaleX, scaleY, or alpha to exactly 0 clears the render flag, so the object is not drawn. Set the value back to non-zero to restore rendering, or use setVisible(false) to hide an object explicitly.

Does flipX affect physics bodies 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.

Related Skills

Explore More Software Engineering Skills→
travispwingotravispwingo

loading-assets

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

Community
Intermediate
mahirocokomahirocoko

physics-arcade

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

Community
Advanced
mahirocokomahirocoko

filters-and-postfx

Apply GPU-based post-processing filters to Phaser 4 game objects and cameras.

Community
Intermediate
pixijspixijs
302

pixijs-scene-particle-container

Render thousands of shared-texture sprites with PixiJS v8 ParticleContainer.

Official
Advanced