Scatter

Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts. The PIXI scatter defined here is a specialization of the abstract scatter pattern.

PIXI scatter are organized in ScatterContainer parent nodes and DisplayObjectScatter child nodes.

Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use case that the scene itself is used as the ScatterContainer. The DisplayObjectScatter is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.

Canvas not supported

Two ScatterContainers in one canvas-element

You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second ScatterContainer. You should interact the two images independently of each other.

Canvas not supported

Nested Scatter

Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and another scatter is displayed on the map.

Canvas not supported