skills.rest
autonomous-ai
autonomous-aiOFFICIAL
Explore all skills by this author →
Website𝕏@autonomous_labsGitHub

sprites-and-images

Creates and manipulates Sprite and Image game objects in Phaser 4 scenes.

465|41|Updated Aug 4, 2026
Search Tags:#game development#javascript#sprite#phaser#texture#2d rendering#game object
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill sprites-and-images-autonomous-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/sprites-and-images
Command: npx skills add https://github.com/autonomous-ai/openharness --skill sprites-and-images-autonomous-ai

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 APIs to use, and Phaser 4 introduced breaking changes like the removal of setTintFill that trip up developers familiar with Phaser 3. ## Core Features & Use Cases - Sprite and Image Creation: Use this.add.sprite and this.add.image factory methods with texture and frame selection, and understand when to choose Image over Sprite to avoid per-frame preUpdate overhead. - Component Mixin Operations: Apply position, scale, rotation, tint, alpha, flip, origin, depth, crop, scroll factor, and blend mode through the shared component mixin system documented per source file. - Specialized Objects: Create NineSlice panels, TileSprite scrolling backgrounds, Blitter batched rendering, and Video game objects. - Use Case: Build a game scene where a player sprite plays animations, a parallax TileSprite background scrolls, and UI panels resize cleanly with NineSlice, all with correct Phaser 4 API calls. ## Quick Start Ask the agent to create a Phaser 4 sprite at position 100, 200 using 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, where texture is a loaded texture key and frame is an optional frame name or index. The method returns a Phaser.GameObjects.Sprite that supports chaining like setScale and setTint.

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

Both share the same component mixins, but only Sprite includes an AnimationState with play, stop, and chain methods. Image skips the per-frame preUpdate cost, so use Image for anything that does not need animation.

How do I replace setTintFill in Phaser 4?▼

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 does my Phaser sprite disappear when I set scale or alpha?▼

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

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.

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

Use the depth property with 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→
onemankingonemanking

loading-assets

Loads images, audio, atlases, fonts, and tilemaps through the Phaser Loader plugin.

Community
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
pixijspixijs
48.2k

pixijs-html-source

Render live DOM elements or snapshots as PixiJS v8 textures via HTML-in-Canvas APIs.

Official
Intermediate