PixiJS online editor

Write, Run & Share PixiJS code online using OneCompiler's PixiJS online editor for free. It's one of the robust, feature-rich online editors for PixiJS. Getting started with the OneCompiler's PixiJS online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'PixiJS' and start writing code to learn and test online without worrying about tedious process of installation.

About PixiJS

PixiJS is a fast 2D rendering library that draws with WebGL (and falls back to canvas). You create an application, add sprites and graphics to its stage, and update them each frame with the ticker. It's a common choice for games, interactive graphics, and data-heavy visuals.

Syntax help

Setup

Load PixiJS from a CDN and create an Application. Its view is the canvas, which you append to the page.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>

const app = new PIXI.Application({ width: 640, height: 400, background: '#1099bb' });
document.body.appendChild(app.view);

Graphics

PIXI.Graphics draws shapes with a fill and lines. Add it to app.stage to show it.

const g = new PIXI.Graphics();
g.beginFill(0xffffff);
g.drawCircle(0, 0, 40);
g.endFill();
g.x = 320;
g.y = 200;
app.stage.addChild(g);

The ticker

app.ticker.add runs your callback every frame. The delta argument scales movement to the frame rate.

let t = 0;
app.ticker.add((delta) => {
  t += 0.04 * delta;
  g.x = 320 + Math.sin(t) * 240;
});

Sprites

A sprite draws an image. Load it from a URL and set its anchor to position from the center.

const sprite = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
sprite.anchor.set(0.5);
sprite.x = 320;
sprite.y = 200;
app.stage.addChild(sprite);

Interaction

Set eventMode to static to make an object respond to pointer events.

sprite.eventMode = 'static';
sprite.cursor = 'pointer';
sprite.on('pointerdown', () => {
  sprite.scale.set(sprite.scale.x * 1.1);
});

Containers

PIXI.Container groups objects so you can move, scale, or rotate them together.

const group = new PIXI.Container();
group.addChild(g, sprite);
group.x = 50;
app.stage.addChild(group);