Pixi Stage
This node creates the main rendering stage for PixiJS content. It serves as the root container and manages the PIXI.Application instance.
The Pixi Stage is the foundation for all PixiJS graphics and animations in your application.
The Pixi Stage node initializes a PIXI.Application instance and provides the rendering context for all other Pixi nodes. It manages the WebGL or Canvas renderer, handles the animation loop, and serves as the root container for the Pixi scene graph.
Dimensions
| Data | Description |
|---|
| Width | Specifies the width of the stage in pixels (default: 800) |
| Height | Specifies the height of the stage in pixels (default: 600) |
Appearance
| Data | Description |
|---|
| Bg Color | Sets the background color of the stage |
| Bg Alpha | Sets the background alpha transparency (0-1) |
| Transparent Background | Enables transparent background mode |
Rendering
| Data | Description |
|---|
| Resolution | Sets the renderer resolution (default: 1) |
| Antialias | Enables antialiasing for smoother graphics |
| Force Canvas Renderer | Forces the use of Canvas renderer instead of WebGL |
| Render On Demand | Enables manual render control |
Animation
| Data | Description |
|---|
| Ticker Enabled | Enables automatic animation ticker |
| Ticker Speed | Controls animation speed multiplier |
| Animation Type | Selects animation type (none, pulseBackground, colorCycleBackground, stageEffects, custom) |
| Custom Animation Code | JavaScript code for custom animations |
Outputs
| Signal | Description |
|---|
| Stage Created | Signal emitted when stage is initialized |
| Data | Description |
|---|
| App Instance | Reference to the PIXI.Application instance |
| Node Reference | Reference to this node instance |
| Current Width | Current stage width |
| Current Height | Current stage height |
Usage
The Pixi Stage node should be placed at the root of your Pixi scene. All other Pixi nodes (Pixi Container, Pixi Sprite, etc.) should be children of this stage node to be rendered properly.
Example Setup
- Add a Pixi Stage node to your component
- Configure the dimensions and background settings
- Add child Pixi nodes (containers, sprites, graphics) to build your scene
- Connect the Stage Created signal to initialize your scene logic
- Use Render On Demand for static scenes to improve performance
- Adjust Resolution based on device capabilities
- Enable Antialias for smoother graphics on high-DPI displays
- Use Transparent Background when integrating with other UI elements