or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation.mdapplication.mdassets.mddisplay-objects.mdevents.mdfilters.mdgraphics.mdindex.mdmath.mdrendering.mdtext.mdtextures.mdutils.md
tile.json

tessl/npm-pixi-js

Fast, lightweight 2D graphics library with WebGL and WebGPU rendering for creating rich, interactive graphics and cross-platform applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/pixi.js@8.13.x

To install, run

npx @tessl/cli install tessl/npm-pixi-js@8.13.0

index.mddocs/

PixiJS

PixiJS is a fast, lightweight 2D graphics library for web browsers that provides WebGL and WebGPU rendering capabilities for creating rich, interactive graphics and cross-platform applications. The library offers a comprehensive API for handling sprites, textures, filters, animations, and complex scene management with features including asset loading, multi-touch support, flexible text rendering, SVG drawing, dynamic textures, masking, and advanced blend modes.

Package Information

  • Package Name: pixi.js
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install pixi.js

Core Imports

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

// Additional display objects
import { Mesh, ParticleContainer, TilingSprite, NineSliceSprite, AnimatedSprite } from 'pixi.js';

For CommonJS:

const { Application, Assets, Sprite, Container, Graphics, Text } = require('pixi.js');

// Additional display objects
const { Mesh, ParticleContainer, TilingSprite, NineSliceSprite, AnimatedSprite } = require('pixi.js');

Basic Usage

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

(async () => {
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#1099bb', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Load a texture
    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

    // Create a sprite
    const bunny = new Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;

    app.stage.addChild(bunny);

    // Animate the sprite
    app.ticker.add((time) => {
        bunny.rotation += 0.1 * time.deltaTime;
    });
})();

Architecture

PixiJS follows a hierarchical display object architecture:

  • Application: Top-level container managing canvas, renderer, and scene
  • Stage: Root display object container for the scene graph
  • Display Objects: Visual elements (Sprite, Graphics, Text, Container)
  • Renderer: Rendering engine (WebGL, WebGPU, or Canvas)
  • Assets: Asset loading and management system

The library supports multiple rendering backends and provides a plugin system for extending functionality.

Capabilities

Application and Initialization

Core application setup, canvas management, renderer configuration, and lifecycle control. The Application class provides the main entry point for PixiJS applications.

class Application<R extends Renderer = Renderer> {
  constructor(options?: Partial<ApplicationOptions>);
  init(options?: Partial<ApplicationOptions>): Promise<void>;
  readonly canvas: HTMLCanvasElement;
  readonly renderer: R;
  readonly stage: Container;
  readonly ticker: Ticker;
  readonly screen: Rectangle;
  destroy(removeView?: boolean, stageOptions?: boolean | DestroyOptions): void;
}

interface ApplicationOptions {
  width: number;
  height: number;
  background: ColorSource;
  backgroundAlpha: number;
  resolution: number;
  antialias: boolean;
  autoDensity: boolean;
  resizeTo: Window | HTMLElement;
  preference: 'webgl' | 'webgpu';
}

Application and Initialization

Display Objects and Scene Graph

Hierarchical display object system including containers, sprites, graphics, text, meshes, particles, and specialized display objects. The scene graph provides transform inheritance and rendering order.

class Container<C extends ContainerChild = ContainerChild> {
  constructor();
  addChild<U extends ContainerChild[]>(...children: U): U[0];
  removeChild<U extends ContainerChild>(...children: U[]): U[0];
  getChildAt(index: number): ContainerChild;
  readonly children: ContainerChild[];
  readonly parent: Container;
  x: number;
  y: number;
  scale: PointData;
  rotation: number;
  alpha: number;
  visible: boolean;
}

class Sprite extends Container {
  constructor(texture?: Texture);
  texture: Texture;
  anchor: ObservablePoint;
  tint: ColorSource;
  blendMode: BLEND_MODES;
}

Display Objects and Scene Graph

Graphics and Drawing

Vector graphics drawing API for creating shapes, paths, fills, and strokes. Supports SVG path commands, gradients, patterns, and complex shapes.

class Graphics extends Container {
  constructor(context?: GraphicsContext);
  rect(x: number, y: number, width: number, height: number): this;
  circle(x: number, y: number, radius: number): this;
  ellipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
  poly(points: PointData[] | number[]): this;
  fill(style?: FillInput): this;
  stroke(style?: StrokeInput): this;
  clear(): this;
}

class GraphicsContext {
  rect(x: number, y: number, width: number, height: number): this;
  roundRect(x: number, y: number, width: number, height: number, radius: number): this;
  circle(x: number, y: number, radius: number): this;
  moveTo(x: number, y: number): this;
  lineTo(x: number, y: number): this;
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
  closePath(): this;
}

Graphics and Drawing

Text Rendering

Comprehensive text rendering system supporting canvas-based text, bitmap fonts, andHTML text with CSS styling. Includes font loading, text metrics, and advanced text features.

class Text extends Container {
  constructor(options?: TextOptions);
  text: string;
  style: TextStyle;
}

class BitmapText extends Container {
  constructor(options?: BitmapTextOptions);
  text: string;
  readonly textWidth: number;
  readonly textHeight: number;
}

class HTMLText extends Container {
  constructor(options?: HTMLTextOptions);
  text: string;
  style: HTMLTextStyle;
}

Text Rendering

Asset Loading and Management

Comprehensive asset loading system supporting textures, fonts, JSON, and custom formats. Includes caching, URL resolution, progress tracking, and background loading.

class Assets {
  static load<T = any>(urls: string | string[]): Promise<T>;
  static add(aliases: string | AssetInitOptions | (string | AssetInitOptions)[]): void;
  static get<T = any>(keys: string): T;
  static unload(urls: string | string[]): Promise<void>;
  static readonly cache: Cache;
  static readonly resolver: Resolver;
  static readonly loader: Loader;
}

class Loader {
  add(name: string | LoaderParser[], url?: string, options?: LoadAsset): this;
  load<T>(urls?: string | string[], onProgress?: ProgressCallback): Promise<T>;
  reset(): this;
}

Asset Loading and Management

Textures and Materials

Texture creation, management, and manipulation including texture sources, render textures, texture atlases, and texture optimization.

class Texture {
  constructor(options?: TextureOptions);
  readonly source: TextureSource;
  frame: Rectangle;
  trim: Rectangle;
  rotate: number;
  static from(source: TextureSourceLike, options?: TextureOptions): Texture;
  static fromURL(url: string, options?: TextureOptions): Promise<Texture>;
  static readonly EMPTY: Texture;
  static readonly WHITE: Texture;
}

class RenderTexture extends Texture {
  constructor(options?: RenderTextureOptions);
  resize(width: number, height: number, resolution?: number): void;
}

Textures and Materials

Rendering and Performance

WebGL and WebGPU rendering backends, batching system, geometry management, shaders, and performance optimization utilities.

class WebGLRenderer extends AbstractRenderer {
  constructor(options?: WebGLRendererOptions);
  render(container: Container, options?: RenderOptions): void;
}

class WebGPURenderer extends AbstractRenderer {
  constructor(options?: WebGPURendererOptions);
  render(container: Container, options?: RenderOptions): void;
}

function autoDetectRenderer(options?: RendererOptions): Promise<WebGLRenderer | WebGPURenderer>;

class Batcher {
  addToBatch(batchableObject: Batchable): void;
  break(instructionSet: InstructionSet): void;
  finish(instructionSet: InstructionSet): void;
}

Rendering and Performance

Filters and Effects

Visual effects system including built-in filters (blur, color matrix, displacement) and custom filter creation with shader support.

class Filter {
  constructor(options?: FilterOptions);
  apply(filterManager: FilterSystem, input: RenderTarget, output: RenderTarget, clearMode?: CLEAR_MODES): void;
  blendMode: BLEND_MODES;
  enabled: boolean;
  padding: number;
}

class BlurFilter extends Filter {
  constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
  blur: number;
  quality: number;
  blurX: number;
  blurY: number;
}

class ColorMatrixFilter extends Filter {
  constructor(matrix?: number[]);
  matrix: number[];
  alpha: number;
}

Filters and Effects

Events and Interaction

Event system supporting mouse, touch, and pointer interactions with event bubbling, hit testing, and custom event handling.

class FederatedEvent {
  constructor(manager: EventBoundary);
  readonly type: string;
  readonly target: FederatedEventTarget;
  readonly currentTarget: FederatedEventTarget;
  readonly timeStamp: number;
  stopPropagation(): void;
  stopImmediatePropagation(): void;
  preventDefault(): void;
}

class FederatedPointerEvent extends FederatedEvent {
  readonly pointerId: number;
  readonly width: number;
  readonly height: number;
  readonly isPrimary: boolean;
  readonly pointerType: string;
  readonly pressure: number;
  getLocalPosition(displayObject: Container, point?: Point): Point;
  getGlobalPosition(point?: Point): Point;
}

Events and Interaction

Animation and Ticker

Animation system with frame-rate independent timing, ticker management, and sprite animation utilities.

class Ticker {
  constructor();
  add(fn: TickerCallback, context?: any, priority?: number): this;
  remove(fn: TickerCallback, context?: any): this;
  start(): void;
  stop(): void;
  readonly deltaTime: number;
  readonly elapsedMS: number;
  readonly FPS: number;
  speed: number;
}

class AnimatedSprite extends Sprite {
  constructor(textures: Texture[] | FrameObject[], autoUpdate?: boolean);
  textures: Texture[] | FrameObject[];
  currentFrame: number;
  animationSpeed: number;
  loop: boolean;
  play(): void;
  stop(): void;
  gotoAndPlay(frameNumber: number): void;
  gotoAndStop(frameNumber: number): void;
}

Animation and Ticker

Mathematics and Geometry

Mathematical primitives including points, rectangles, circles, matrices, and shape utilities for calculations and transformations.

class Point {
  constructor(x?: number, y?: number);
  x: number;
  y: number;
  clone(): Point;
  copyFrom(p: PointData): this;
  copyTo<T extends PointLike>(p: T): T;
  equals(p: PointData): boolean;
  set(x?: number, y?: number): this;
}

class Rectangle {
  constructor(x?: number, y?: number, width?: number, height?: number);
  x: number;
  y: number;
  width: number;
  height: number;
  readonly left: number;
  readonly right: number;
  readonly top: number;
  readonly bottom: number;
  contains(x: number, y: number): boolean;
  intersects(other: Rectangle): boolean;
}

class Matrix {
  constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
  a: number;
  b: number;
  c: number;
  d: number;
  tx: number;
  ty: number;
  clone(): Matrix;
  set(a: number, b: number, c: number, d: number, tx: number, ty: number): this;
  apply(pos: PointData, newPos?: Point): Point;
  translate(x: number, y: number): this;
  scale(x: number, y: number): this;
  rotate(angle: number): this;
  invert(): this;
}

Mathematics and Geometry

Utilities and Helpers

Browser detection, color management, utility functions, debugging tools, and performance optimization helpers.

class Color {
  constructor(value?: ColorSource);
  readonly value: number;
  readonly alpha: number;
  setValue(value: ColorSource): this;
  setAlpha(alpha: number): this;
  toHex(): string;
  toRgba(): [number, number, number, number];
  toHsl(): [number, number, number];
  multiply(value: ColorSource): Color;
  static isColorLike(value: any): value is ColorSource;
}

function isMobile(): boolean;
function isWebGLSupported(): boolean;
function isWebGPUSupported(): boolean;
function uid(): number;

Utilities and Helpers