Pixijs Scene Core Concepts
Author PixiJS v8 scene nodes with constructor option objects instead of fragile line-by-line property assignment.
Overview
pixijs-scene-core-concepts is an agent skill most often used in Build (also Ship perf refactors) that teaches PixiJS v8 constructor option objects for Container-derived scene nodes.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-core-conceptsWhat is this skill?
- Promotes new Sprite({ texture, x, y, anchor, scale, rotation, alpha, tint, label, zIndex }) over post-construction assig
- Documents Container constructor bags for transform, display, blendMode, and pivot/skew shapes
- Lists 4 exceptions where line-by-line or .set() remains appropriate (runtime changes, deferred layout, external instance
- Cross-links pixijs-migration-v8 for constructor pattern upgrades from v7
- Includes worked Container group example with grouped display options
- 4 documented exceptions where line-by-line assignment stays valid
Adoption & trust: 1.4k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your PixiJS scene code sets dozens of properties after construction, which is harder to read and misaligned with v8 constructor patterns.
Who is it for?
Solo builders generating or reviewing PixiJS 8 scene graphs who want consistent constructor-first node setup.
Skip if: Projects still on legacy patterns with no plan to adopt v8 constructor options, or pure DOM/React UI with no Pixi canvas.
When should I use this skill?
Creating or reviewing PixiJS Container-derived nodes and choosing constructor options versus runtime property updates.
What do I get? / Deliverables
Sprites and Containers are instantiated with option bags matching PixiJS v8 style, with clear exceptions documented for dynamic updates.
- Scene node code using constructor option objects
- Documented exceptions for dynamic .set() or tint updates
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Scene construction is first encountered while building the canvas/game client—canonical shelf is Build frontend even when refactoring later. Frontend subphase covers PixiJS Sprite, Container, and display graph setup patterns agents apply during implementation.
Where it fits
Spawn a hero Sprite with anchor, tint, and zIndex in one constructor call when bootstrapping a battle scene.
Refactor post-construction property spam into option bags before profiling draw order and layer grouping.
How it compares
Use this concept skill for scene node construction style, not as a full game loop or asset-loading integration guide.
Common Questions / FAQ
Who is pixijs-scene-core-concepts for?
Developers and coding agents writing PixiJS v8 games or visual experiences who need correct Container and Sprite construction habits.
When should I use pixijs-scene-core-concepts?
Use it in Build when scaffolding sprites and groups; reuse in Ship perf work when refactoring legacy line-by-line setup to option objects before release.
Is pixijs-scene-core-concepts safe to install?
It is documentation-only; verify the skills.sh source and Security Audits panel on this page before enabling in automated agents.
Workflow Chain
Then invoke: pixijs migration v8
SKILL.md
READMESKILL.md - Pixijs Scene Core Concepts
# Constructor options (Container-inherited) Prefer `new X({ ... })` over line-by-line property assignment when constructing Container-derived scene nodes. ## Before / after Line-by-line: ```ts const hero = new Sprite(texture); hero.x = 100; hero.y = 200; hero.anchor.set(0.5); hero.scale.set(2); hero.rotation = Math.PI / 4; hero.alpha = 0.8; hero.tint = 0xff8800; hero.label = "hero"; hero.zIndex = 10; ``` Options object: ```ts const hero = new Sprite({ texture, x: 100, y: 200, anchor: 0.5, scale: 2, rotation: Math.PI / 4, alpha: 0.8, tint: 0xff8800, label: "hero", zIndex: 10, }); ``` ## Exceptions (line-by-line is fine here) - Values calculated after construction — e.g., `sprite.position.set(app.screen.width / 2, app.screen.height / 2)` needs `app` to exist first. - Properties that change at runtime and the change is the point of the example — e.g., `sprite.tint = damageColor` in a damage-flash demo. - Objects received from elsewhere — you can't reconstruct them through a constructor options bag. - `point.set(x, y)` / `scale.set(sx, sy)` for multi-coordinate batches where a single call reads better than two options keys. For v7 to v8 migration of constructor patterns, see `pixijs-migration-v8`. ## Worked example ```ts const group = new Container({ // Transform x: 100, y: 200, scale: { x: 2, y: 2 }, rotation: Math.PI / 4, pivot: { x: 50, y: 50 }, skew: { x: 0, y: 0 }, // Display alpha: 0.8, tint: 0xff8800, blendMode: "add", visible: true, renderable: true, // Hierarchy label: "world", children: [background, player], // Sorting & grouping isRenderGroup: true, sortableChildren: true, zIndex: 10, // Layout & bounds boundsArea: new Rectangle(0, 0, 800, 600), // Effects filters: [new BlurFilter(2)], mask: maskGraphics, // Callbacks onRender: (renderer) => { /* per-frame logic */ }, }); ``` ## Transform | Option | Type | Default | Description | | ---------- | --------------------- | ----------------- | ----------------------------------------------------------------------------- | | `alpha` | `number` | `1` | Opacity multiplied with parent alpha; 0 is fully transparent, 1 fully opaque. | | `angle` | `number` | `0` | Rotation in degrees. Alias for `rotation` in radians. | | `origin` | `PointData \| number` | `new Point(0, 0)` | Center of rotation and scaling without moving the node's position. | | `pivot` | `PointData \| number` | `new Point(0, 0)` | Center of rotation, scaling, and skewing; reprojects position. | | `position` | `PointData` | `new Point(0, 0)` | Position in parent-local coordinates. | | `rotation` | `number` | `0` | Rotation in radians. | | `scale` | `PointData \| number` | `new Point(1, 1)` | Local scale factor along each axis. | | `skew` | `PointData` | `new Point(0, 0)` | Skew factor in radians along each axis. | | `x` | `number` | `0` | Alias for `position.x`. | | `y` | `number` | `0` | Alias for `position.y`. | ## Display | Option | Type | Default | Description | | ------------ | ------------- | ---------- | ------------------------------------------------------------------------ | | `blendMode` | `BLEND_MODES` | `'normal'` | How this node composites against its target. | | `renderable` | `boolean` | `tr