pixijs-2d

Routes PixiJS v8 development tasks to specialized skills covering Application, scene graph, text, graphics, events, filters, and ticker.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/aungpwint/presentation --skill pixijs-2d-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-2d
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/pixijs-2d
Command: npx skills add https://github.com/aungpwint/presentation --skill pixijs-2d-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pixi.js, pixi-filters, and includes references (resource) components.

What problem does it solve? PixiJS v8 has a large API surface spanning Application setup, the scene graph, text rendering, vector graphics, input events, filters, and the render loop, and finding the right guidance for a specific task is difficult. This Skill acts as an entry point that routes any PixiJS v8 task to the correct specialized sub-skill, with a fallback to the official auto-generated PixiJS documentation index. ## Core Features & Use Cases - Task Routing: A router table maps tasks to specialized skills such as pixijs-application, pixijs-scene-container, pixijs-scene-sprite, pixijs-scene-graphics, pixijs-scene-text, pixijs-assets, pixijs-events, pixijs-ticker, and pixijs-filters. - Specialized Sub-Skills: Each sub-skill provides v8-accurate quick starts, core patterns, common mistakes (v7 to v8 migration pitfalls), and API reference links for its domain. - Documentation Fallback: When no sub-skill matches, it directs the agent to fetch the always-current llms.txt index of the full PixiJS API docs. - Use Case: A developer asks how to draw a rounded rectangle with a gradient stroke in PixiJS v8; the router points to pixijs-scene-graphics, which supplies the correct shape-then-fill pattern and warns against removed v7 APIs like beginFill and lineStyle. ## Quick Start Ask how to accomplish any PixiJS v8 task, such as setting up an Application, drawing shapes, rendering text, or handling pointer input, and follow the routed sub-skill's guidance.

Frequently Asked Questions about pixijs-2d

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

FAQPage Schema
How do I set up a PixiJS v8 Application?▼

Create the instance with new Application(), then call the async app.init() with options like width, height, background, and preference. After init resolves, append app.canvas to the DOM. Passing options to the constructor is a v7 pattern that no longer works.

How do I draw shapes with PixiJS v8 Graphics?▼

Draw a shape first, then apply fill or stroke, for example g.rect(0, 0, 100, 100).fill(0xff0000). The v7 beginFill, drawRect, lineStyle, and endFill methods were removed; holes are made with cut() instead of beginHole.

Text vs BitmapText in PixiJS: which should I use?▼

Use Text for styled static labels and BitmapText for values that update every frame like scores or timers, since Text re-rasterizes on each change while BitmapText only repositions quads. For per-character animation use SplitText or SplitBitmapText.

Why is my PixiJS pointer event not firing?▼

The default eventMode is 'passive', so the object itself receives no events. Set eventMode to 'static' or 'dynamic' before adding listeners. Also note that pointermove only fires over the object in v8; use globalpointermove for drag tracking.

Does PixiJS v8 support WebGPU and custom shaders?▼

Yes, set preference: 'webgpu' in app.init() to use WebGPU, with WebGL and Canvas as fallbacks. Custom filters are built with Filter.from() or GlProgram/GpuProgram, using GLSL ES 3.0 syntax with out vec4 finalColor instead of gl_FragColor.

What changed in the PixiJS v8 ticker callback?▼

Ticker callbacks now receive the Ticker instance instead of a delta number. Use ticker.deltaTime as a frame-rate multiplier or ticker.deltaMS for real milliseconds. The v7 pattern of reading the first argument as a number produces NaN.