skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

pixijs-scene-container

Group, position, and transform PixiJS v8 Container display objects.

1|Updated Apr 26, 2026
Search Tags:#events#container#transform#pixijs#scene-graph#getbounds#zindex
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-container-matthewharwood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-container
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-scene-container
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-container-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PixiJS v8 containers are central to building scalable scene graphs, but managing grouping, transforms, and lifecycle events across deep hierarchies can be error-prone and verbose. This skill documents and standardizes the use of Container and related APIs to simplify common tasks like reparenting, z-index sorting, coordinate space conversions, and per-frame updates.

Core Features & Use Cases

  • Grouping and transforms: create nested containers, apply position, scale, rotation, pivot, and skew to subtrees, and propagate alpha and tint.
  • Rendering order and performance: leverage isRenderGroup and sortableChildren to optimize GPU-accelerated rendering and automatic zIndex sorting.
  • Space and bounds utilities: use getBounds, getLocalBounds, toGlobal, toLocal, and getGlobalPosition to navigate coordinate spaces and layout.
  • Lifecycle and events: respond to childAdded/childRemoved, added/removed/destroyed, and hook per-frame updates via onRender.

Quick Start

Create a Container, add a child Sprite, and verify transforms render on screen.

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 display objects in PixiJS v8?▼

Group and transform PixiJS v8 display objects by nesting Container instances, applying position, scale, rotation, pivot, and skew to subtrees to propagate visual changes across the scene graph hierarchy.

What's the best way to optimize rendering order and zIndex in a PixiJS scene graph?▼

Optimize PixiJS scene graph rendering by setting sortableChildren for automatic zIndex sorting and using isRenderGroup to enable GPU-accelerated rendering for complex container subtrees.

How do I convert coordinates between global and local spaces in PixiJS containers?▼

Convert coordinate spaces in PixiJS containers using toGlobal, toLocal, getGlobalPosition, and getBounds to accurately navigate layouts and calculate spatial boundaries across nested hierarchies.

Does PixiJS v8 support lifecycle events for container child management?▼

PixiJS v8 supports container lifecycle events including childAdded, childRemoved, added, removed, and destroyed, allowing you to trigger custom logic when modifying the scene graph hierarchy.

How do I hook per-frame updates into a PixiJS container?▼

Hook per-frame updates into a PixiJS container using the onRender lifecycle method to execute custom rendering logic on each tick without manually managing the application ticker.

Why should I use isRenderGroup instead of standard containers in PixiJS?▼

Use isRenderGroup for PixiJS containers when you need to optimize GPU-accelerated rendering for static or complex subtrees, reducing draw calls and improving scene graph performance.

Related Skills

Explore More Software Engineering Skills→
adamhjkadamhjk
2

pixijs-scene-container

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

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-container

Manage PixiJS v8 Container children, transforms, render order, and lifecycle.

Official
Advanced
ArnavPuriArnavPuri
3

image-treatment

Apply CSS and SVG filters, blend modes, and masks to images.

Community
Intermediate
adamhjkadamhjk
2

pixijs

Build interactive 2D graphics and animations with PixiJS.

Community
Advanced