skills.rest
jallard-007
jallard-007COMMUNITY
Explore all skills by this author →
GitHub

sprites-and-images

Create and manage Sprites and Images in Phaser 4 scenes.

Updated Apr 13, 2026
Search Tags:#textures#images#sprites#frames#gameobjects#tint#phaser4
One-click install
npx skills add https://github.com/jallard-007/jallard-ca-server --skill sprites-and-images-jallard-007
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/jallard-007/jallard-ca-server/tree/main/.github/skills/sprites-and-images
Command: npx skills add https://github.com/jallard-007/jallard-ca-server --skill sprites-and-images-jallard-007

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps developers create and manage Sprites and Images in Phaser 4, covering factory methods, texture/frame handling, transforms, tint, alpha, origin, depth, and the component mixin system.

Core Features & Use Cases

  • Create static images and animated sprites using this.add.image and this.add.sprite.
  • Control position, scale, rotation, origin, depth, visibility, and texture frames with the component mixins.
  • Real-world example: quickly set up a player sprite with position, depth, and tint for a UI scene.

Quick Start

Create a Sprite or Image in a Phaser 4 scene with this.add.sprite(x, y, 'texture', 'frame') or this.add.image(x, y, 'texture', 'frame') and configure common properties with chaining.

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 and apply transforms like scale and tint?▼

To create a sprite in Phaser 4, use this.add.sprite(x, y, 'texture', 'frame') and chain common setters like setScale, setTint, setPosition, and setOrigin to configure dynamic visuals and component-based behavior.

What is the difference between using this.add.image and this.add.sprite in Phaser 4?▼

In Phaser 4, this.add.image creates static images, while this.add.sprite creates animated objects. Both utilize component mixins for texture handling, transforms, depth, and tint, but sprites support frame-based animations.

How do I manage texture frames and depth for gameobjects in a Phaser 4 scene?▼

You manage texture frames and depth for Phaser 4 gameobjects by applying component mixins to sprites and images, using setters to adjust depth, visibility, origin, and specific texture frames during scene creation.

Does Phaser 4 support chaining component mixins for static images and animated sprites?▼

Yes, Phaser 4 supports chaining component mixins. After creating static images or animated sprites with factory methods, you can sequentially apply setters like setTint, setAlpha, and setOrigin to configure properties.

Why are my Phaser 4 sprites not displaying correctly when setting position and origin?▼

Phaser 4 sprites may display incorrectly if origin or position values are misconfigured. Use setOrigin to adjust the pivot point and setPosition to accurately place gameobjects within your scene's coordinate space.

Related Skills

Explore More Software Engineering Skills→
ArtRivArtRiv

sprites-and-images

Create and manipulate Sprite and Image objects in Phaser 4.

Community
Intermediate
WanderTheWeebWanderTheWeeb
1

physics-arcade

Configure Arcade Physics in Phaser 4 with gravity, bodies, and collision handlers.

Community
Advanced
kehwarkehwar

animations

Create, play, pause, and chain Phaser 4 sprite animations from spritesheets and atlases.

Community
Advanced
WanderTheWeebWanderTheWeeb
1

game-object-components

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

Community
Intermediate