skills.rest
alexkafer
alexkaferCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixijs-scene-container

Manage PixiJS v8 scene-graph grouping with Container hierarchy and transform operations.

Updated Mar 13, 2022
Search Tags:#performance#container#pixijs#transforms#coordinate conversion#scene graph#zindex sorting
One-click install
npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-container-alexkafer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-container
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-scene-container
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-container-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PixiJS scene graphs become hard to manage when you need consistent grouping, layout transforms, and render ordering across many display objects, especially when moving between local and global coordinates.

Core Features & Use Cases

  • Scene-graph grouping with Container: Create branch nodes that apply transforms, alpha, tint, and blend mode to entire subtrees.
  • Hierarchy operations and reordering: Add, remove, insert, swap, and reindex children with predictable render order and zIndex sorting via sortableChildren.
  • Transform and coordinate utilities: Set and combine position/scale/rotation/pivot/origin/skew, then use getBounds, toGlobal, toLocal, and getGlobalPosition to support layout math and interaction logic.
  • Performance-oriented container options: Use isRenderGroup and boundsArea to reduce per-frame CPU work for stable or predictable subtrees, and apply culling-related options when appropriate.
  • Lifecycle and cleanup: Use onRender for lightweight per-frame container updates and destroy options to correctly tear down subtrees and GPU resources.

Quick Start

Create a Container with sortableChildren enabled, add sprites as children, set a pivot/origin for the desired transform center, and attach it to app.stage.

Frequently Asked Questions about pixijs-scene-container

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I group and transform multiple display objects in a PixiJS scene graph?▼

PixiJS scene graph grouping uses Container to apply transforms, alpha, and blend modes to entire subtrees. It manages child hierarchy, bounds, coordinate conversion, and lifecycle control for structured display branches like UI layers.

How do I convert local coordinates to global coordinates in PixiJS v8?▼

Convert local coordinates to global coordinates in PixiJS using the toGlobal, toLocal, and getGlobalPosition utilities provided by Container. These transform tools support layout math and interaction logic across nested display hierarchies.

How does zIndex sorting work for children inside a PixiJS Container?▼

zIndex sorting in a PixiJS Container requires enabling the sortableChildren option. Once active, you can add, remove, insert, and reindex children with predictable render order based on their assigned zIndex values.

What is the best way to reduce per-frame CPU work for stable PixiJS subtrees?▼

Reduce per-frame CPU work for stable PixiJS subtrees by using the isRenderGroup and boundsArea Container options. These performance-oriented settings minimize rendering calculations for predictable display branches and apply culling when appropriate.

How do I safely destroy a PixiJS Container subtree and its GPU resources?▼

Safely destroy a PixiJS Container subtree and its GPU resources by using the destroy options provided by the Container API. This ensures correct teardown semantics for all nested children and prevents memory leaks.

Can I use PixiJS Container options for UI layers and world branches?▼

PixiJS Container options support building structured display subtrees such as UI layers and world branches. You can use ObservablePoint-backed transform properties and onRender handling for lightweight per-frame updates within these consistent layouts.

Related Skills

Explore More Software Engineering Skills→
starwardsstarwards
42

starwards-pixijs

Provide PixiJS v8 rendering patterns for Starwards scenes with containers, sprites, and ticker updates.

Official
Advanced
pixijspixijs
302

pixijs-core-concepts

Explain PixiJS v8 renderer backend selection across WebGL, WebGPU, and Canvas.

Official
Intermediate
tcobertcober

art-pipeline

Generate and validate pixel-art tilesets and sprite sheets for Godot RPGs.

Community
Advanced
adamhjkadamhjk
2

pixijs-scene-container

Group, position, and transform display objects in PixiJS v8 scenes.

Community
Intermediate