This node displays an image texture in the Pixi scene. It supports various transforms and effects.
The Pixi Sprite is used to display images and textures in your Pixi scene.
The Pixi Sprite node creates a PIXI.Sprite that displays an image texture. It's one of the most commonly used nodes for displaying graphics, characters, UI elements, and any visual content in your Pixi scene.
Position
| Data | Description |
|---|
| X | Horizontal position |
| Y | Vertical position |
| Data | Description |
|---|
| Rotation | Rotation in radians |
| Scale X | Horizontal scale |
| Scale Y | Vertical scale |
| Anchor X | Horizontal anchor point (0-1) |
| Anchor Y | Vertical anchor point (0-1) |
| Pivot X | Horizontal pivot |
| Pivot Y | Vertical pivot |
Appearance
| Data | Description |
|---|
| Alpha | Transparency (0-1) |
| Tint | Color tint |
| Visible | Visibility control |
| Blend Mode | Rendering blend mode |
Dimensions
| Data | Description |
|---|
| Width | Sprite width (optional) |
| Height | Sprite height (optional) |
Sprite
| Data | Description |
|---|
| Image URL | Source image path or URL |
Filters
| Data | Description |
|---|
| Enable Blur | Blur filter toggle |
| Blur Amount | Blur intensity |
| Enable Color Matrix | Color matrix filter |
| Enable Displacement | Displacement filter |
| Enable Drop Shadow | Drop shadow effect |
Animation
| Data | Description |
|---|
| Ticker Enabled | Animation ticker |
| Ticker Speed | Animation speed |
| Animation Type | Animation type |
| Custom Animation Code | Custom animation code |
Outputs
| Data | Description |
|---|
| Texture Loaded | Boolean indicating texture load status |
| Texture Loading | Boolean indicating loading state |
| Natural Width | Original texture width |
| Natural Height | Original texture height |
| Node Reference | Node reference |
| Signal | Description |
|---|
| Pointer Down | Triggered when pointer is pressed down |
| Pointer Up | Triggered when pointer is released |
| Pointer Tap | Triggered when pointer taps the sprite |
| Pointer Enter | Triggered when pointer enters the sprite |
| Pointer Leave | Triggered when pointer leaves the sprite |
| Pointer Move | Triggered when pointer moves over the sprite |
Usage
Pixi Sprite nodes are the primary way to display images in your Pixi scene. They support:
- Image textures from URLs or local assets
- Transform operations (position, rotation, scale)
- Visual effects and filters
- Interactive events
- Animation capabilities
- PNG (recommended for transparency)
- JPG/JPEG
- WebP
- SVG (with limitations)
- GIF (static frames only)
- Use appropriately sized images for your display needs
- Consider using texture atlases for multiple sprites
- Enable Texture Loading monitoring for better user experience
- Use Anchor points for proper positioning and rotation
- Optimize images before loading to reduce memory usage
Example Use Cases
- Game Characters: Display player and enemy sprites
- UI Elements: Icons, buttons, and interface graphics
- Background Images: Scene backgrounds and decorative elements
- Animated Sprites: Character animations and visual effects