Skip to main content

Pixi Container

This node groups Pixi objects and applies transforms hierarchically. It serves as a parent container for other Pixi elements.

The Pixi Container allows you to organize and transform groups of Pixi objects together.

The Pixi Container node creates a PIXI.Container that can hold multiple child Pixi objects. It applies transforms (position, rotation, scale) to all its children as a group, making it perfect for organizing complex scenes and creating hierarchical transformations.

Inputs

Position

DataDescription
XHorizontal position of the container
YVertical position of the container

Transform

DataDescription
RotationRotation in radians
Scale XHorizontal scale factor
Scale YVertical scale factor
Pivot XHorizontal pivot point
Pivot YVertical pivot point

Appearance

DataDescription
AlphaTransparency level (0-1)
TintColor tint applied to the container
Blend ModeBlending mode for rendering
VisibleControls visibility

Interaction

DataDescription
InteractiveEnables pointer interaction

Advanced

DataDescription
Sort Children by ZEnables z-index sorting
Z IndexRendering order

Filters

DataDescription
Enable BlurEnables blur filter
Blur AmountBlur intensity
Blur QualityBlur quality setting

Animation

DataDescription
Ticker EnabledEnables animation ticker
Ticker SpeedAnimation speed
Animation TypeAnimation type (rotate, pulse, blink, moveX, moveY, custom)
Custom Animation CodeCustom animation JavaScript code

Outputs

SignalDescription
Pointer DownTriggered when pointer is pressed down
Pointer UpTriggered when pointer is released
Pointer TapTriggered when pointer taps the container
Pointer EnterTriggered when pointer enters the container
Pointer LeaveTriggered when pointer leaves the container
Pointer MoveTriggered when pointer moves over the container
DataDescription
Node ReferenceReference to this node instance

Usage

Pixi Container nodes are essential for organizing complex Pixi scenes. They allow you to:

  • Group related objects together
  • Apply transforms to multiple objects at once
  • Create hierarchical scene structures
  • Manage z-index ordering
  • Apply filters to groups of objects

Example Use Cases

  1. Character Groups: Group a character's body parts together for coordinated movement
  2. UI Panels: Organize UI elements within containers for easy positioning
  3. Scene Layers: Create background, midground, and foreground layers
  4. Animation Groups: Group objects that animate together

Performance Tips

  • Use containers sparingly for complex scenes
  • Enable Sort Children by Z only when needed
  • Consider using Z Index for simple layering instead of complex hierarchies