skills.rest
AmirOssanloo
AmirOssanlooCOMMUNITY
Explore all skills by this author →
GitHub

sprites-and-images

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

Updated Sep 20, 2026
Search Tags:#game development#image#sprite#Texture#2d rendering#game objects#phaser 4
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill sprites-and-images-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/sprites-and-images
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill sprites-and-images-amirossanloo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers working with Phaser 4 need accurate guidance on creating and controlling Sprite and Image game objects, including factory methods, texture and frame selection, and the component mixin system, without digging through engine source files. ## Core Features & Use Cases - Factory Method Guidance: 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, ScrollFactor, BlendMode, and TextureCrop components with properties and methods. - Phaser 4 Migration Notes: Flags breaking changes such as the removal of setTintFill and the separation of setTint and setTintMode. - Use Case: When building a game scene, use this Skill to correctly create an animated player sprite, tint it red on damage, flip it based on facing direction, and layer it with depth ordering. ## Quick Start Use the sprites-and-images skill to create a player sprite at position 100, 200 with the 'player' texture, scale it by 2, and play its idle animation.

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?▼

Create a sprite in Phaser 4 by calling 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 name or index within that texture.

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

Sprite and Image share the same component mixins, but only Sprite includes an AnimationState with play, stop, and chain methods. Image skips per-frame preUpdate, making it cheaper for static textures that do not need animation.

How do I tint a sprite in Phaser 4?▼

Tint a sprite in Phaser 4 with sprite.setTint(color), and set the blend operation separately with setTintMode. The Phaser 3 method setTintFill is removed; use setTint(color).setTintMode(Phaser.TintModes.FILL) instead.

Why is my Phaser sprite not rendering?▼

A sprite stops rendering when its alpha or scale is set to exactly 0, because both clear the render flag. Set values back to non-zero, or use setVisible(false) to hide an object without changing alpha or scale.

Does flipX affect the physics body in Phaser?▼

No, flipX and flipY are rendering toggles only and do not affect physics bodies or hit areas. If game logic depends on facing direction, track that state separately from the flip properties.

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

Control render order with the depth property via setDepth(value), where higher values render on top. The z property does not control render order; you can also use setToTop, setToBack, setAbove, or setBelow to reorder the display list.

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