pixijs-rendering

Q: How do I install pixijs-rendering?

Run npx skills add https://github.com/gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/pixijs-rendering/ (personal) or .claude/skills/pixijs-rendering/ (project).

by gamedev-skillsBackend & APIs

Build a PixiJS v8 render layer: create the async Application, load textures with Assets, compose the scene graph with Container and Sprite, drive the ticker loop, wire pointer events, and group draws with render groups. Use when building or debugging PixiJS v8 — when the user mentions PixiJS, Pixi, Application, app.stage, Container, Sprite, Assets.load, app.ticker, or eventMode. Pins the v8 async init() API (examples checked against 8.22).

Installs: 5.7K
Last 24h: +304
Trending rank: #951
Security: Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads pixijs-rendering automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill provides legitimate and safe instructions for building applications with PixiJS v8. It covers standard practices for initialization, asset loading, and scene management without any malicious patterns.

Socket PassNo alerts

Snyk PassLOW ·Risk: LOW · No issues

SKILL.md

The instructions your agent reads when the skill is triggered.

PixiJS 8.22 Rendering

Set up and structure a PixiJS 8.22 application: the async Application, asset loading via Assets, the Container/Sprite scene graph, the ticker loop, pointer events, and render groups. Pins the 8.22 API (async init, unified Assets, eventMode).

When to use

Use when starting a PixiJS v8 project, fixing a blank canvas, structuring the display list, loading textures, animating via the ticker, or handling pointer input.
Use when package.json depends on pixi.js (v8) and code does import { Application } from 'pixi.js'.

When not to use: Phaser's scene/loader model → phaser-core. 3D scenes → threejs-scene-setup. PixiJS v7-and-earlier code (synchronous new Application({...}), Loader, beginFill/endFill) needs the v8 migration first; this skill targets v8 only. (interactive = true still works in v8 as an alias for eventMode = 'static', but prefer the explicit eventMode.)

Core workflow

Create and await the Application. In v8, new Application() is empty; configuration happens in await app.init({...}). Append app.canvas (not app.view) to the DOM. Wrap top-level await in an async function for bundlers.
Load assets with Assets. await Assets.load(url) returns a Texture. For many assets, register a manifest/bundle and load by name. There is no v7 Loader.
Build the scene graph. Everything descends from app.stage (a Container). Group related objects in Containers; child transforms are relative to the parent. Draw order = insertion order (later = on top).
Animate with the ticker. app.ticker.add((ticker) => {...}). Scale motion by ticker.deltaTime (frames, ~1 at 60fps) or ticker.deltaMS (milliseconds) so speed is frame-rate independent.
Enable events per object by setting eventMode = 'static' (or 'dynamic'), then obj.on('pointerdown', ...). Federated pointer events cover mouse/touch/pen.
Promote big static subtrees to render groups (isRenderGroup: true) so the GPU caches their transforms. Profile before and after; confirm pixels on screen.

Patterns

1. Async Application boot (the v8 entry point)

import { Application, Assets, Sprite } from 'pixi.js';

(async () => {
  // v8: construct empty, then await init(). Config does NOT go in the constructor.
  const app = new Application();
  await app.init({
    background: '#1099bb',
    resizeTo: window,        // track the window size
    antialias: true,
    // preference: 'webgpu',  // hint only; default order tries 'webgl' first.
    //                        // Pixi falls back if the backend is unavailable —
    //                        // branch on app.renderer.name, don't assume it took.
  });

  document.body.appendChild(app.canvas); // v8 uses app.canvas, not app.view

  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
  const bunny = new Sprite(texture);
  bunny.anchor.set(0.5);
  bunny.position.set(app.screen.width / 2, app.screen.height / 2);
  app.stage.addChild(bunny);
})();

2. Containers for a relative-transform scene graph

import { Container, Sprite } from 'pixi.js';

const world = new Container();
app.stage.addChild(world);

// Children are positioned relative to `world`; move/scale/rotate the whole group
// by transforming the parent.
for (let i = 0; i < 10; i++) {
  const coin = new Sprite(coinTexture);
  coin.x = i * 40;
  world.addChild(coin);
}
world.position.set(100, 100);
world.scale.set(2);            // every coin scales with the container

3. The ticker loop (frame-rate independent)

let elapsed = 0;
app.ticker.add((ticker) => {
  // deltaTime ≈ 1 at 60fps; deltaMS is milliseconds since last frame.
  elapsed += ticker.deltaMS;
  bunny.rotation += 0.05 * ticker.deltaTime;          // smooth at any frame rate
  bunny.y = app.screen.height / 2 + Math.sin(elapsed / 500) * 50;
});

4. Pointer events (federated)

bunny.eventMode = 'static';   // 'static' = interactive, doesn't move on its own
bunny.cursor = 'pointer';     // hover cursor; `buttonMode` was removed in v8
bunny.on('pointerdown', (event) => {
  bunny.tint = 0xff0000;
  // event.global is the pointer position in stage space.
});
bunny.on('pointerover', () => bunny.scale.set(1.1));
bunny.on('pointerout',  () => bunny.scale.set(1.0));

Dragging needs globalpointermove, not pointermove. In v8 pointermove fires only while the pointer is over the object, so a drag that follows the cursor past the object's edge stops updating. globalpointermove fires on every move:

let dragging = false;
bunny.on('pointerdown', () => { dragging = true; });
bunny.on('pointerup', () => { dragging = false; });
bunny.on('pointerupoutside', () => { dragging = false; }); // release off the object
bunny.on('globalpointermove', (event) => {
  if (dragging) bunny.position.copyFrom(event.global);
});

5. Loading many assets by name (bundles)

import { Assets } from 'pixi.js';

await Assets.init({
  manifest: {
    bundles: [{
      name: 'level-1',
      assets: [
        { alias: 'hero',  src: 'assets/hero.png' },
        { alias: 'tiles', src: 'assets/tiles.png' },
      ],
    }],
  },
});

const bundle = await Assets.loadBundle('level-1'); // { hero: Texture, tiles: Texture }
const hero = new Sprite(bundle.hero);

6. Render groups for large static layers

// A big, rarely-changing background subtree: let the GPU cache its transforms.
const background = new Container({ isRenderGroup: true });
app.stage.addChild(background);
// Add hundreds of static tiles to `background`. Moving `background` itself stays
// cheap; constantly re-adding/removing children negates the benefit.

Pitfalls

Blank canvas, or TypeError reading canvas/screen of undefined → you didn't await app.init(), or you configured the constructor. In v8 the constructor is empty; all options go to init(). app.stage exists right away, but app.renderer is undefined until the init() promise resolves, so app.canvas and app.screen throw before then.
app.view logs a deprecation warning → v8 renamed it to app.canvas; the old getter still returns the canvas for now.
Porting v7 code → Loader/loader.add → Assets.load (the Loader class is gone); synchronous new Application({...}) → empty constructor + async init() (options in the constructor are ignored with a deprecation warning, not an error); beginFill()/endFill() → shape-first .rect(...).fill(...). interactive = true and app.view still work as deprecated aliases.
Ticker callback arg is the Ticker, not a delta number → app.ticker.add((dt) => { obj.rotation += dt; }) compiles, but dt is the whole Ticker object, so the math yields NaN and nothing animates. Read ticker.deltaTime off the argument.
Top-level await build error (Vite ≤6.0.6) → wrap boot in (async () => { ... })().
Speed varies with frame rate → multiply movement by ticker.deltaTime (~1 at 60fps) or scale by ticker.deltaMS; never assume 60fps. deltaTime is a dimensionless multiplier, not milliseconds.
Clicks do nothing → the object's eventMode is still 'passive' (the v8 default: self not interactive, children still are); set it to 'static' (or 'dynamic' for objects that move under a stationary cursor).
Drag stops at the object's edge → pointermove fires only while the pointer is over the object in v8; use globalpointermove for drag/global tracking.
Right-click opens the browser menu over the game → PixiJS does not block it. From 8.22, listen for contextmenu on the object and call event.preventDefault(); cancelling rightdown/rightclick does not stop the menu. On older 8.x, add a native contextmenu listener to app.canvas instead.
addChild on a Sprite/Graphics/Text logs a deprecation warning → in v8 only Containers should hold children; put the sprite and its children side by side in a Container.
Texture.from(url) returns a blank/undefined texture → in v8 it only reads the Assets cache; await Assets.load(url) first, then use the returned Texture.
WebGPU features error out → preference is a hint. If the backend is unavailable Pixi falls back (WebGL, then Canvas); branch on app.renderer.name before using backend-specific code.
Textures look blurry on pixel art → set texture.source.scaleMode = 'nearest' (or pass it when loading).
Memory grows → removeChild does not free GPU memory; call sprite.destroy() and Assets.unload(url) for assets you're done with.
Flicker/corruption after tearing down and re-creating an app in the same tab → destroy with app.destroy({ releaseGlobalResources: true }); otherwise pooled batches/textures from the old app leak into the new one.

References

For the texture/asset pipeline (sprite sheets/atlases, Assets.add, background loading, unloading) and Graphics/Text/TilingSprite/ParticleContainer plus filters, read references/assets-and-display.md.

Related skills

phaser-core — a batteries-included 2D framework (scenes, physics, input).
threejs-scene-setup — 3D in the browser with three.js.
prototype-fast — greybox a playable slice quickly (often cites PixiJS).

FAQ

What does the pixijs-rendering skill do?

How do I install pixijs-rendering?

Run npx skills add https://github.com/gamedev-skills/awesome-gamedev-agent-skills --skill pixijs-rendering in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/pixijs-rendering/ (personal) or .claude/skills/pixijs-rendering/ (project).

Which AI agents can use pixijs-rendering?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is pixijs-rendering safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains pixijs-rendering?

It is published by gamedev-skills in gamedev-skills/awesome-gamedev-agent-skills. It has 5,686 recorded installs.