skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

sprites-and-images

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

Updated May 7, 2021
Search Tags:#game development#javascript#sprite#phaser#texture#2d rendering#game object
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill sprites-and-images-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/sprites-and-images
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill sprites-and-images-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Phaser 4 game objects requires knowing which component mixin provides each method, how Sprite differs from Image, and which Phaser 3 APIs changed in v4. This Skill provides the factory methods, component APIs, 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, Flip, Origin, Depth, Size, TextureCrop, ScrollFactor, and BlendMode with exact method signatures. - Phaser 4 Migration Notes: Documents 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 place a player sprite, chain setScale, setTint, and play calls, and choose Image instead of Sprite for static backgrounds to avoid per-frame update overhead. ## 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 name or index. The method returns a Phaser.GameObjects.Sprite that supports chaining.

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. Image skips the per-frame preUpdate cost, so use Image for static textures and Sprite only when animation is needed.

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 in Phaser 4; use setTint with Phaser.TintModes.FILL instead.

Why is my Phaser sprite not rendering?▼

Setting alpha or scale to exactly 0 clears the render flag so the object is not drawn. Setting visible to false also skips rendering. Restore non-zero alpha and scale values or call setVisible(true) to render again.

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 the flipX and flipY properties.

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

Use 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, and setBelow to reorder the display list.

Related Skills

Explore More Software Engineering Skills→
dzyamikdzyamik

loading-assets

Automate asset loading and progress tracking in Phaser 4 scenes.

Community
Intermediate
mahirocokomahirocoko

physics-arcade

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

Community
Advanced
WanderTheWeebWanderTheWeeb
1

game-object-components

Resolve Phaser 4 Game Object component mixin rendering and transform behaviors.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-particle-container

Render large numbers of similar sprites with PixiJS ParticleContainer.

Official
Intermediate