0
# Application & Setup
1

2
Application management, renderer creation, and lifecycle control. The Application class provides the easiest way to get started with PixiJS, handling renderer creation, canvas setup, and the main rendering loop.
3

4
## Capabilities
5

6
### Application Class
7

8
The main Application class that manages the entire PixiJS application lifecycle.
9

10
```typescript { .api }
11
/**
12
 * Convenience class to create a new PixiJS application
13
 * This class automatically creates the renderer and root stage
14
 */
15
class Application {
16
    /** The root display object container */
17
    stage: Container;
18
    /** The renderer that handles drawing */
19
    renderer: Renderer;
20
    /** The screen rectangle representing the canvas area */
21
    screen: Rectangle;
22
    /** The HTML canvas element */
23
    view: HTMLCanvasElement;
24
    
25
    /**
26
     * Create a new Application
27
     * @param options - Application configuration options
28
     */
29
    constructor(options?: ApplicationOptions);
30
    
31
    
32
    /** Render the stage */
33
    render(): void;
34
    
35
    /**
36
     * Destroy the application and clean up resources
37
     * @param removeView - Automatically remove the canvas from DOM
38
     * @param stageOptions - Options for destroying the stage
39
     */
40
    destroy(removeView?: boolean, stageOptions?: boolean | IDestroyOptions): void;
41
    
42
}
43

44
interface ApplicationOptions {
45
    /** Width of the renderer/canvas */
46
    width?: number;
47
    /** Height of the renderer/canvas */
48
    height?: number;
49
    /** Existing canvas element to use */
50
    view?: HTMLCanvasElement;
51
    /** Background color as hex number */
52
    backgroundColor?: number;
53
    /** Background opacity (0-1) */
54
    backgroundAlpha?: number;
55
    /** Enable anti-aliasing */
56
    antialias?: boolean;
57
    /** Device pixel ratio override */
58
    resolution?: number;
59
    /** Element to automatically resize to */
60
    resizeTo?: Window | HTMLElement;
61
    /** Auto-start the ticker */
62
    autoDensity?: boolean;
63
    /** Preserve drawing buffer */
64
    preserveDrawingBuffer?: boolean;
65
    /** Power preference for WebGL context */
66
    powerPreference?: 'default' | 'high-performance' | 'low-power';
67
    /** Enable WebGL context failure events */
68
    failIfMajorPerformanceCaveat?: boolean;
69
}
70
```
71

72
**Usage Examples:**
73

74
```typescript
75
import { Application } from "pixi.js";
76

77
// Create application with default settings
78
const app = new Application({ width: 800, height: 600 });
79
document.body.appendChild(app.view);
80

81
// Create with specific options
82
const app2 = new Application({
83
    width: 1024,
84
    height: 768,
85
    backgroundColor: 0x1099bb,
86
    resolution: window.devicePixelRatio || 1,
87
    antialias: true,
88
    resizeTo: window
89
});
90

91
// Add to specific container
92
const container = document.getElementById('game-container');
93
container.appendChild(app2.view);
94

95
// Note: Ticker functionality requires the TickerPlugin
96
// If using the full pixi.js bundle, ticker methods are available
97
// app.start(); // Start the ticker (plugin-provided)
98
// app.stop();  // Stop the ticker (plugin-provided)
99
app.destroy(true); // Destroy and remove canvas
100
```
101

102
### Renderer Creation
103

104
Alternative ways to create renderers directly for advanced use cases.
105

106
```typescript { .api }
107
/**
108
 * Automatically detect and create the best renderer for the current environment
109
 * @param options - Renderer options
110
 */
111
function autoDetectRenderer(options?: RendererOptions): Renderer;
112

113
/**
114
 * Main WebGL renderer class
115
 */
116
class Renderer extends SystemManager {
117
    /** The canvas element being rendered to */
118
    view: HTMLCanvasElement;
119
    /** The screen rectangle */
120
    screen: Rectangle;
121
    /** Current resolution/device pixel ratio */
122
    resolution: number;
123
    /** Background color */
124
    backgroundColor: number;
125
    /** Background alpha */
126
    backgroundAlpha: number;
127
    
128
    /**
129
     * Create a new Renderer
130
     * @param options - Renderer configuration options
131
     */
132
    constructor(options?: RendererOptions);
133
    
134
    /**
135
     * Render a display object
136
     * @param displayObject - The object to render
137
     * @param options - Render options
138
     */
139
    render(displayObject: DisplayObject, options?: RenderOptions): void;
140
    
141
    /**
142
     * Resize the renderer
143
     * @param desiredScreenWidth - New width
144
     * @param desiredScreenHeight - New height
145
     */
146
    resize(desiredScreenWidth: number, desiredScreenHeight: number): void;
147
    
148
    /** Destroy the renderer and clean up WebGL context */
149
    destroy(): void;
150
}
151

152
interface RendererOptions {
153
    width?: number;
154
    height?: number;
155
    view?: HTMLCanvasElement;
156
    backgroundColor?: number;
157
    backgroundAlpha?: number;
158
    resolution?: number;
159
    antialias?: boolean;
160
    preserveDrawingBuffer?: boolean;
161
    powerPreference?: 'default' | 'high-performance' | 'low-power';
162
}
163

164
interface RenderOptions {
165
    renderTexture?: RenderTexture;
166
    clear?: boolean;
167
    transform?: Matrix;
168
    skipUpdateTransform?: boolean;
169
}
170
```
171

172
### Ticker System
173

174
The ticker provides the main update loop for animations and logic updates.
175

176
```typescript { .api }
177
/**
178
 * Ticker class that handles the update loop
179
 */
180
class Ticker {
181
    /** Whether the ticker is started */
182
    started: boolean;
183
    /** Current frames per second */
184
    FPS: number;
185
    /** Minimum frames per second */
186
    minFPS: number;
187
    /** Maximum frames per second */
188
    maxFPS: number;
189
    /** Time elapsed since last tick in milliseconds */
190
    deltaTime: number;
191
    /** Time elapsed since last tick in seconds */
192
    elapsedMS: number;
193
    /** Last time update was called */
194
    lastTime: number;
195
    /** Current speed multiplier */
196
    speed: number;
197
    
198
    /** Shared ticker instance */
199
    static shared: Ticker;
200
    
201
    constructor();
202
    
203
    /**
204
     * Add a listener to the ticker
205
     * @param fn - Function to call each frame
206
     * @param context - Context for the function
207
     * @param priority - Priority level (higher = called first)
208
     */
209
    add<T = any>(fn: TickerCallback<T>, context?: T, priority?: number): this;
210
    
211
    /**
212
     * Add a listener that will be called once then removed
213
     * @param fn - Function to call
214
     * @param context - Context for the function
215
     * @param priority - Priority level
216
     */
217
    addOnce<T = any>(fn: TickerCallback<T>, context?: T, priority?: number): this;
218
    
219
    /**
220
     * Remove a listener from the ticker
221
     * @param fn - Function to remove
222
     * @param context - Context that was used when adding
223
     */
224
    remove<T = any>(fn: TickerCallback<T>, context?: T): this;
225
    
226
    /** Start the ticker */
227
    start(): void;
228
    
229
    /** Stop the ticker */
230
    stop(): void;
231
    
232
    /** Destroy the ticker */
233
    destroy(): void;
234
    
235
    /** Update the ticker manually */
236
    update(currentTime?: number): void;
237
}
238

239
type TickerCallback<T = any> = (this: T, deltaTime: number) => void;
240
```
241

242
**Usage Examples:**
243

244
```typescript
245
import { Application, Ticker } from "pixi.js";
246

247
// Using application ticker (requires TickerPlugin)
248
const app = new Application();
249

250
// Note: ticker property available when TickerPlugin is loaded
251
// app.ticker.add((delta) => {
252
//     console.log(`Delta time: ${delta}`);
253
// });
254

255
// Using shared ticker
256
Ticker.shared.add(() => {
257
    // This runs even without an Application
258
});
259

260
// Custom ticker
261
const customTicker = new Ticker();
262
customTicker.add((delta) => {
263
    // Custom update logic
264
});
265
customTicker.start();
266

267
// Control ticker speed (when TickerPlugin is available)
268
// app.ticker.speed = 0.5; // Half speed
269
// app.ticker.maxFPS = 30;  // Cap at 30 FPS
270
```
271

272
### Plugin System
273

274
Application plugins extend functionality and integrate with the Application lifecycle. 
275

276
**Important:** The `ticker` property and methods like `start()` and `stop()` are provided by the **TickerPlugin**, not the core Application class. When using the full `pixi.js` bundle, this plugin is automatically loaded. If using individual packages, you may need to manually install and configure the ticker plugin.
277

278
```typescript { .api }
279
/**
280
 * Interface for Application plugins
281
 */
282
interface IApplicationPlugin {
283
    /** Plugin initialization */
284
    init?(options?: any): void;
285
    /** Called when application is destroyed */
286
    destroy?(): void;
287
}
288

289
/**
290
 * Plugin that automatically resizes the application
291
 */
292
class ResizePlugin implements IApplicationPlugin {
293
    /** The element being watched for resize */
294
    element: Window | HTMLElement;
295
    
296
    constructor(element?: Window | HTMLElement);
297
    
298
    /** Resize the application to match the element */
299
    resize(): void;
300
    
301
    /** Cancel the resize behavior */
302
    cancel(): void;
303
    
304
    /** Destroy the plugin */
305
    destroy(): void;
306
}
307
```
308

309
**Usage Examples:**
310

311
```typescript
312
import { Application } from "pixi.js";
313

314
// Auto-resize to window
315
const app = new Application({
316
    resizeTo: window,
317
    autoDensity: true // Adjust for device pixel ratio
318
});
319

320
// Manual resize handling
321
window.addEventListener('resize', () => {
322
    app.renderer.resize(window.innerWidth, window.innerHeight);
323
});
324

325
// Custom plugin
326
class CustomPlugin {
327
    init() {
328
        console.log('Custom plugin initialized');
329
    }
330
    
331
    destroy() {
332
        console.log('Custom plugin destroyed');
333
    }
334
}
335

336
// Plugins are typically registered at the package level
337
```
338

339
## Configuration Best Practices
340

341
```typescript
342
// Development setup
343
const app = new Application({
344
    width: 800,
345
    height: 600,
346
    backgroundColor: 0x1099bb,
347
    antialias: true,
348
    resolution: 1, // Fixed resolution for consistent development
349
});
350

351
// Production setup
352
const app = new Application({
353
    width: window.innerWidth,
354
    height: window.innerHeight,
355
    backgroundColor: 0x000000,
356
    antialias: true,
357
    resolution: Math.min(window.devicePixelRatio || 1, 2), // Cap at 2x
358
    resizeTo: window,
359
    autoDensity: true,
360
});
361

362
// Mobile-optimized setup
363
const app = new Application({
364
    width: window.innerWidth,
365
    height: window.innerHeight,
366
    resolution: 1, // Lower resolution for performance
367
    antialias: false, // Disable for performance
368
    powerPreference: 'low-power',
369
    resizeTo: window,
370
});
371
```