Pixi Graphics
This node creates vector graphics shapes using PIXI.Graphics. It supports various shapes and drawing commands.
The Pixi Graphics creates vector shapes and graphics in your Pixi scene.
The Pixi Graphics node creates a PIXI.Graphics object that can draw various vector shapes and graphics. It's perfect for creating geometric shapes, custom graphics, and dynamic visual elements in your Pixi scene.
Inputs
Position
| Data | Description |
|---|---|
| X | Horizontal position |
| Y | Vertical position |
Transform
| Data | Description |
|---|---|
| Rotation | Rotation in radians |
| Scale X | Horizontal scale |
| Scale Y | Vertical scale |
| Pivot X | Horizontal pivot |
| Pivot Y | Vertical pivot |
Appearance
| Data | Description |
|---|---|
| Alpha | Transparency |
| Tint | Color tint |
| Visible | Visibility |
| Interactive | Interaction enable |
| Blend Mode | Rendering blend mode |
Simple Shape
| Data | Description |
|---|---|
| Shape | Shape type (rect, circle, polygon) |
| Fill Color | Fill color |
| Fill Alpha | Fill transparency |
| Line Width | Stroke width |
| Line Color | Stroke color |
| Line Alpha | Stroke transparency |
Rectangle
| Data | Description |
|---|---|
| Width | Rectangle width |
| Height | Rectangle height |
Circle
| Data | Description |
|---|---|
| Radius | Circle radius |
Polygon
| Data | Description |
|---|---|
| Points | Array of polygon points [x,y,x,y...] |
Drawing
| Data | Description |
|---|---|
| Drawing Commands | JSON array of drawing commands |
Actions
| Signal | Description |
|---|---|
| Clear | Clears all graphics |
Filters
| Data | Description |
|---|---|
| Enable Blur | Blur filter |
| Blur Amount | Blur intensity |
| Enable Color Matrix | Color matrix filter |
| Enable Displacement | Displacement filter |
Animation
| Data | Description |
|---|---|
| Ticker Enabled | Animation ticker |
| Ticker Speed | Animation speed |
| Animation Type | Animation type |
| Custom Animation Code | Custom animation code |
Outputs
| Signal | Description |
|---|---|
| Pointer Down | Triggered when pointer is pressed down |
| Pointer Up | Triggered when pointer is released |
| Pointer Tap | Triggered when pointer taps the graphics |
| Pointer Enter | Triggered when pointer enters the graphics |
| Pointer Leave | Triggered when pointer leaves the graphics |
| Pointer Move | Triggered when pointer moves over the graphics |
| Data | Description |
|---|---|
| Actual Width | Graphics width |
| Actual Height | Graphics height |
| Node Reference | Node reference |
Usage
Pixi Graphics nodes are used to create vector graphics and shapes in your Pixi scene. They support:
- Basic geometric shapes (rectangles, circles, polygons)
- Custom drawing commands
- Fill and stroke styling
- Interactive events
- Animation capabilities
Drawing Commands
For complex graphics, you can use the Drawing Commands input with a JSON array of commands:
[
{"type": "beginFill", "color": 0xFF0000, "alpha": 1},
{"type": "drawRect", "x": 0, "y": 0, "width": 100, "height": 100},
{"type": "endFill"},
{"type": "lineStyle", "width": 2, "color": 0x000000},
{"type": "drawCircle", "x": 50, "y": 50, "radius": 25}
]
Performance Tips
- Use simple shapes when possible for better performance
- Clear graphics when no longer needed
- Limit the number of complex drawing commands
- Use appropriate Line Width for your display needs
- Consider using sprites for complex graphics that don't change
Example Use Cases
- UI Elements: Buttons, progress bars, and interface graphics
- Game Graphics: Health bars, power meters, and visual effects
- Data Visualization: Charts, graphs, and diagrams
- Decorative Elements: Background patterns and artistic graphics