skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

sprites-and-images

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

2|10|Updated Jul 28, 2026
Search Tags:#game development#javascript#sprite#phaser#Texture#2d rendering#game object
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill sprites-and-images-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprites-and-images
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/sprites-and-images
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill sprites-and-images-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When building games with Phaser 4, developers need accurate guidance on creating and controlling Sprite and Image game objects, including which factory methods to call, how the component mixin system works, and which APIs changed from Phaser 3. ## Core Features & Use Cases - Factory Methods: Covers this.add.sprite and this.add.image signatures, parameters, and return types for placing game objects in a Scene. - Component Mixin Reference: Documents Transform, Alpha, Tint, Origin, Depth, Flip, Size, TextureCrop, and other components with their properties and chainable methods. - Specialized Objects: Explains NineSlice, TileSprite, Blitter, and Video game objects for UI panels, parallax backgrounds, batched rendering, and video playback. - Use Case: While building a platformer, you need to flip the player sprite horizontally, tint it red on damage, and layer it above the background using depth, all with correct Phaser 4 syntax. ## 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, passing world coordinates and a texture key registered in the Texture Manager. The frame parameter is optional and accepts a frame name or numeric index.

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 per-frame preUpdate, making it cheaper for static textures that do not need animation.

How do I tint a sprite in Phaser 4?▼

Call sprite.setTint(color) to apply a tint color, and use setTintMode with Phaser.TintModes.FILL, ADD, or MULTIPLY to control the blend operation. The Phaser 3 setTintFill method was removed in Phaser 4.

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.

Why does my sprite disappear when I set scale or alpha to 0?▼

Setting scale or alpha to exactly 0 clears the render flag, so the object is not drawn until a non-zero value is restored. Use setVisible(false) instead if you want to hide an object explicitly.

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
diegolinharesdiegolinhares

animations

Automates sprite animation creation and management in Phaser 4 games.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-particle-container

Render large numbers of similar sprites with PixiJS ParticleContainer.

Official
Intermediate