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+)