0
# PixiJS
1

2
PixiJS is a fast, lightweight 2D library that works across all devices, providing hardware-accelerated rendering via WebGL with automatic Canvas 2D fallback. It enables the creation of rich, interactive graphics, cross-platform applications, and HTML5 games without requiring prior WebGL knowledge.
3

4
## Package Information
5

6
- **Package Name**: pixi.js
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install pixi.js`
10

11
## Core Imports
12

13
```typescript
14
import * as PIXI from 'pixi.js';
15
```
16

17
For specific imports:
18

19
```typescript
20
import { Application, Sprite, Graphics, Text, Assets } from 'pixi.js';
21
```
22

23
CommonJS:
24

25
```javascript
26
const PIXI = require('pixi.js');
27
// or
28
const { Application, Sprite, Graphics, Text, Assets } = require('pixi.js');
29
```
30

31
## Basic Usage
32

33
```typescript
34
import { Application, Sprite, Assets } from 'pixi.js';
35

36
// Create application with automatic renderer detection
37
const app = new Application();
38

39
// Add to DOM
40
document.body.appendChild(app.view);
41

42
// Load texture
43
const texture = await Assets.load('bunny.png');
44

45
// Create sprite
46
const bunny = new Sprite(texture);
47
bunny.x = app.renderer.width / 2;
48
bunny.y = app.renderer.height / 2;
49
bunny.anchor.set(0.5);
50

51
// Add to stage
52
app.stage.addChild(bunny);
53

54
// Animation loop
55
app.ticker.add(() => {
56
    bunny.rotation += 0.01;
57
});
58
```
59

60
## Architecture
61

62
PixiJS is built as a modular framework with several key layers:
63

64
- **Application Layer**: High-level application management and lifecycle
65
- **Display System**: Scene graph with containers and display objects
66
- **Rendering Engine**: WebGL/Canvas renderer with automatic detection
67
- **Asset Management**: Modern asset loading with caching and resolution
68
- **Animation System**: Frame-based updates and tweening capabilities
69
- **Event System**: Comprehensive mouse, touch, and pointer interaction
70

71
## Capabilities
72

73
### Application Framework
74

75
Core application setup and lifecycle management for PixiJS applications.
76

77
```typescript { .api }
78
class Application {
79
  constructor(options?: ApplicationOptions);
80
  stage: Container;
81
  renderer: Renderer;
82
  view: HTMLCanvasElement;
83
  screen: Rectangle;
84
  ticker: Ticker;
85
  render(): void;
86
  destroy(removeView?: boolean): void;
87
}
88

89
interface ApplicationOptions {
90
  width?: number;
91
  height?: number;
92
  backgroundColor?: number;
93
  backgroundAlpha?: number;
94
  resolution?: number;
95
  antialias?: boolean;
96
  forceCanvas?: boolean;
97
  powerPreference?: string;
98
}
99
```
100

101
[Application Framework](./application.md)
102

103
### Display Objects
104

105
Essential display objects for building interactive scenes and graphics.
106

107
```typescript { .api }
108
class Container extends DisplayObject {
109
  children: DisplayObject[];
110
  addChild<T extends DisplayObject>(...children: T[]): T;
111
  removeChild<T extends DisplayObject>(...children: T[]): T;
112
  getChildAt(index: number): DisplayObject;
113
  sortChildren(): void;
114
}
115

116
class Sprite extends Container {
117
  constructor(texture?: Texture);
118
  texture: Texture;
119
  tint: number;
120
  blendMode: BLEND_MODES;
121
  static from(source: string | Texture): Sprite;
122
}
123

124
class Graphics extends Container {
125
  beginFill(color: number, alpha?: number): Graphics;
126
  drawRect(x: number, y: number, width: number, height: number): Graphics;
127
  drawCircle(x: number, y: number, radius: number): Graphics;
128
  endFill(): Graphics;
129
  clear(): Graphics;
130
}
131
```
132

133
[Display Objects](./display-objects.md)
134

135
### Asset Loading
136

137
Modern asset management system with promises, caching, and bundle support.
138

139
```typescript { .api }
140
class Assets {
141
  static init(options?: AssetsInitOptions): Promise<void>;
142
  static load<T = any>(urls: string | string[]): Promise<T>;
143
  static loadBundle(bundleId: string): Promise<Record<string, any>>;
144
  static get<T = any>(alias: string): T;
145
  static cache: Cache;
146
  static resolver: Resolver;
147
}
148

149
interface AssetsInitOptions {
150
  basePath?: string;
151
  manifest?: AssetsManifest;
152
  texturePreference?: TextureSourceOptions;
153
}
154
```
155

156
[Asset Loading](./assets.md)
157

158
### Text Rendering
159

160
Comprehensive text rendering system with multiple engines for different performance needs.
161

162
```typescript { .api }
163
class Text extends Sprite {
164
  constructor(text?: string, style?: Partial<TextStyle>);
165
  text: string;
166
  style: TextStyle;
167
  resolution: number;
168
}
169

170
class BitmapText extends Container {
171
  constructor(text: string, style?: Partial<BitmapTextStyle>);
172
  text: string;
173
  style: BitmapTextStyle;
174
  static from(text: string, style?: Partial<BitmapTextStyle>): BitmapText;
175
}
176

177
class HTMLText extends Sprite {
178
  constructor(text?: string, style?: Partial<HTMLTextStyle>);
179
  text: string;
180
  style: HTMLTextStyle;
181
}
182
```
183

184
[Text Rendering](./text.md)
185

186
### Animation & Interaction
187

188
Frame-based animation system and comprehensive event handling.
189

190
```typescript { .api }
191
class AnimatedSprite extends Sprite {
192
  constructor(textures: Texture[], autoUpdate?: boolean);
193
  textures: Texture[];
194
  currentFrame: number;
195
  playing: boolean;
196
  animationSpeed: number;
197
  play(): void;
198
  stop(): void;
199
}
200

201
class Ticker {
202
  add(fn: TickerCallback): Ticker;
203
  remove(fn: TickerCallback): Ticker;
204
  start(): void;
205
  stop(): void;
206
  readonly FPS: number;
207
}
208
```
209

210
[Animation & Interaction](./animation-interaction.md)
211

212
### Graphics & Rendering
213

214
Advanced graphics capabilities including vector drawing, filters, and custom rendering.
215

216
```typescript { .api }
217
class Filter {
218
  constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: any);
219
  uniforms: any;
220
  enabled: boolean;
221
  apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture): void;
222
}
223

224
// Built-in filters
225
class BlurFilter extends Filter {
226
  constructor(strength?: number, quality?: number);
227
  blur: number;
228
  quality: number;
229
}
230

231
class ColorMatrixFilter extends Filter {
232
  constructor();
233
  matrix: number[];
234
  alpha: number;
235
}
236
```
237

238
[Graphics & Rendering](./graphics-rendering.md)
239

240
## Types & Constants
241

242
```typescript { .api }
243
interface DisplayObject {
244
  x: number;
245
  y: number;
246
  width: number;
247
  height: number;
248
  scale: ObservablePoint;
249
  rotation: number;
250
  alpha: number;
251
  visible: boolean;
252
  parent: Container;
253
  worldTransform: Matrix;
254
  interactive: boolean;
255
  filters?: Filter[];
256
}
257

258
enum BLEND_MODES {
259
  NORMAL = 0,
260
  ADD = 1,
261
  MULTIPLY = 2,
262
  SCREEN = 3,
263
  OVERLAY = 4,
264
  DARKEN = 5,
265
  LIGHTEN = 6,
266
  COLOR_DODGE = 7,
267
  COLOR_BURN = 8,
268
  HARD_LIGHT = 9,
269
  SOFT_LIGHT = 10,
270
  DIFFERENCE = 11,
271
  EXCLUSION = 12,
272
  HUE = 13,
273
  SATURATION = 14,
274
  COLOR = 15,
275
  LUMINOSITY = 16
276
}
277

278
enum RENDERER_TYPE {
279
  UNKNOWN = 0,
280
  WEBGL = 1,
281
  CANVAS = 2
282
}
283
```
284

285
## Version Information
286

287
- **Current Version**: 7.4.3
288
- **WebGL Support**: WebGL 1.0 and WebGL 2.0
289
- **Canvas Fallback**: Full Canvas 2D API support
290
- **TypeScript**: Full type definitions included
291
- **Browser Support**: Modern browsers (ES2017+)