Interface: ApplicationOptions

Defined in: node_modules/pixi.js/lib/app/Application.d.ts:107

Application options supplied to the Application#init method. These options configure how your PixiJS application behaves.

Standard

Example

import { Application } from 'pixi.js';

const app = new Application();

// Initialize with common options
await app.init({
   // Rendering options
   width: 800,                    // Canvas width
   height: 600,                   // Canvas height
   backgroundColor: 0x1099bb,     // Background color
   antialias: true,              // Enable antialiasing
   resolution: window.devicePixelRatio, // Screen resolution

   // Performance options
   autoStart: true,              // Auto-starts the render loop
   sharedTicker: true,           // Use shared ticker for better performance

   // Automatic resize options
   resizeTo: window,             // Auto-resize to window
   autoDensity: true,           // Adjust for device pixel ratio

   // Advanced options
   preference: 'webgl',         // Renderer preference ('webgl', 'webgpu', 'canvas', or an array)
   powerPreference: 'high-performance' // GPU power preference
});

See

• WebGLOptions For resize-related options
• WebGPUOptions For resize-related options
• TickerPlugin For ticker-related options
• ResizePlugin For resize-related options

Extends

• AutoDetectOptions.ApplicationOptions

Properties

antialias?

> optional antialias?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:42

Whether to enable anti-aliasing. This may affect performance.

Inherited from

AutoDetectOptions.antialias

autoDensity?

> optional autoDensity?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:38

Resizes renderer view in CSS pixels to allow for resolutions other than 1.

This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.

Inherited from

AutoDetectOptions.autoDensity

autoStart?

> optional autoStart?: boolean

Defined in: node_modules/pixi.js/lib/app/TickerPlugin.d.ts:55

Controls whether the animation loop starts automatically after initialization. > [!IMPORTANT] > Setting this to false does NOT stop the shared ticker even if sharedTicker is true. > You must stop the shared ticker manually if needed.

Example

// Auto-start (default behavior)
await app.init({ autoStart: true });

// Manual start
await app.init({ autoStart: false });
app.start(); // Start when ready

Default

true

Inherited from

PixiMixins.ApplicationOptions.autoStart

background?

> optional background?: ColorSource

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:17

Alias for backgroundColor

Inherited from

AutoDetectOptions.background

backgroundAlpha?

> optional backgroundAlpha?: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:25

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque). This value determines whether the canvas is initialized with alpha transparency support. Note: This cannot be changed after initialization. If set to 1, the canvas will remain opaque, even if a transparent background color is set later.

Default

1

Inherited from

AutoDetectOptions.backgroundAlpha

backgroundColor

> backgroundColor: ColorSource

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:15

The background color used to clear the canvas. See ColorSource for accepted color values.

Default

'black'

Inherited from

AutoDetectOptions.backgroundColor

bezierSmoothness

> bezierSmoothness: number

Defined in: node_modules/pixi.js/lib/scene/graphics/GraphicsMixins.d.ts:35

A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)

Default

0.5

Inherited from

AutoDetectOptions.bezierSmoothness

canvas?

> optional canvas?: ICanvas

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:26

The canvas to use as a view, optional.

Inherited from

AutoDetectOptions.canvas

canvasOptions?

> optional canvasOptions?: Partial<CanvasOptions>

Defined in: node_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:32

Optional CanvasOptions to pass only to the Canvas renderer

Inherited from

AutoDetectOptions.canvasOptions

clearBeforeRender?

> optional clearBeforeRender?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:30

Whether to clear the canvas before new render passes.

Default

true

Inherited from

AutoDetectOptions.clearBeforeRender

context

> context: WebGL2RenderingContext | null

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:29

User-provided WebGL rendering context object.

Default

null

Inherited from

AutoDetectOptions.context

culler?

> optional culler?: object

Defined in: node_modules/pixi.js/lib/culling/CullerPlugin.d.ts:34

Options for the culler behavior.

updateTransform?

> optional updateTransform?: boolean

Update the transform of culled objects.

> [!IMPORTANT] Keeping this as false can improve performance by avoiding unnecessary calculations, > however, the transform used for culling may not be up-to-date if the object has moved since the last render.

Default

true

Example

const app = new Application();
await app.init({
    culler: {
        updateTransform: false // Skip updating transforms for culled objects
    }
});

Example

// Basic culling options
const app = new Application();
await app.init({
    culler: {...}
});

Inherited from

CullerPluginOptions.culler

depth?

> optional depth?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:44

Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

Inherited from

AutoDetectOptions.depth

eventFeatures?

> optional eventFeatures?: Partial<EventSystemFeatures>

Defined in: node_modules/pixi.js/lib/events/EventsMixins.d.ts:73

Configuration for enabling/disabling specific event features. Use this to optimize performance by turning off unused functionality.

Example

const app = new Application();
await app.init({
    eventFeatures: {
        // Core interaction events
        move: true,        // Pointer/mouse/touch movement
        click: true,       // Click/tap events
        wheel: true,       // Mouse wheel/scroll events
        // Global tracking
        globalMove: false  // Global pointer movement
    }
});

Since

7.2.0

Inherited from

AutoDetectOptions.eventFeatures

eventMode?

> optional eventMode?: EventMode

Defined in: node_modules/pixi.js/lib/events/EventsMixins.d.ts:53

The type of interaction behavior for a Container. This is set via the Container#eventMode property.

Example

// Basic event mode setup
const sprite = new Sprite(texture);
sprite.eventMode = 'static';    // Enable standard interaction
sprite.on('pointerdown', () => { console.log('clicked!'); });

// Different event modes
sprite.eventMode = 'none';      // Disable all interaction
sprite.eventMode = 'passive';   // Only allow interaction on children
sprite.eventMode = 'auto';      // Like DOM pointer-events: auto
sprite.eventMode = 'dynamic';   // For moving/animated objects

Available modes:

• 'none': Ignores all interaction events, even on its children
• 'passive': (default) Does not emit events and ignores hit testing on itself and non-interactive children. Interactive children will still emit events.
• 'auto': Does not emit events but is hit tested if parent is interactive. Same as interactive = false in v7
• 'static': Emit events and is hit tested. Same as interactive = true in v7
• 'dynamic': Emits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving

Performance tips:

• Use 'none' for pure visual elements
• Use 'passive' for containers with some interactive children
• Use 'static' for standard buttons/controls
• Use 'dynamic' only for moving/animated interactive elements

Since

7.2.0

Inherited from

AutoDetectOptions.eventMode

failIfMajorPerformanceCaveat?

> optional failIfMajorPerformanceCaveat?: boolean

Defined in: node_modules/pixi.js/lib/rendering/RenderingMixins.d.ts:15

Inherited from

AutoDetectOptions.failIfMajorPerformanceCaveat

forceFallbackAdapter

> forceFallbackAdapter: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/gpu/GpuDeviceSystem.d.ts:40

Force the use of the fallback adapter

Default

false

Inherited from

AutoDetectOptions.forceFallbackAdapter

gcActive

> gcActive: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:50

If set to true, this will enable the garbage collector.

Default

true

Inherited from

AutoDetectOptions.gcActive

gcFrequency

> gcFrequency: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:60

How frequently to run garbage collection in milliseconds.

Default

30000

Inherited from

AutoDetectOptions.gcFrequency

gcMaxUnusedTime

> gcMaxUnusedTime: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/GCSystem.d.ts:55

The maximum time in milliseconds a resource can be unused before being garbage collected.

Default

60000

Inherited from

AutoDetectOptions.gcMaxUnusedTime

gpu?

> optional gpu?: GPU

Defined in: node_modules/pixi.js/lib/rendering/renderers/gpu/GpuDeviceSystem.d.ts:42

Using shared device and adaptor from other engine

Inherited from

AutoDetectOptions.gpu

height?

> optional height?: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:24

The height of the screen.

Default

600

Inherited from

AutoDetectOptions.height

hello

> hello: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/startup/HelloSystem.d.ts:15

Whether to log the version and type information of renderer to console.

Default

false

Inherited from

AutoDetectOptions.hello

~~manageImports?~~

> optional manageImports?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/SharedSystems.d.ts:73

Default

true

Deprecated

since 8.1.6

See

skipExtensionImports

Inherited from

AutoDetectOptions.manageImports

multiView

> multiView: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:60

Whether to enable multi-view rendering. Set to true when rendering to multiple canvases on the dom.

Default

false

Inherited from

AutoDetectOptions.multiView

powerPreference?

> optional powerPreference?: GpuPowerPreference

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:37

An optional hint indicating what configuration of GPU is suitable for the WebGL context, can be 'high-performance' or 'low-power'. Setting to 'high-performance' will prioritize rendering performance over power consumption, while setting to 'low-power' will prioritize power saving over rendering performance.

Default

undefined

Inherited from

AutoDetectOptions.powerPreference

preference?

> optional preference?: RendererPreference | RendererPreference[]

Defined in: node_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:26

The preferred renderer type(s).

• When a string is provided (e.g. 'webgpu'), that renderer is tried first and the remaining renderers are used as fallbacks in the default priority order.
• When an array is provided (e.g. ['webgpu', 'webgl']), only the listed renderers are tried, in the given order. Any renderer type not in the array is excluded entirely — this can be used as a blocklist.

Inherited from

AutoDetectOptions.preference

preferWebGLVersion?

> optional preferWebGLVersion?: 1 | 2

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:54

The preferred WebGL version to use.

Default

2

Inherited from

AutoDetectOptions.preferWebGLVersion

premultipliedAlpha

> premultipliedAlpha: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:42

Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

Default

true

Inherited from

AutoDetectOptions.premultipliedAlpha

preserveDrawingBuffer

> preserveDrawingBuffer: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/context/GlContextSystem.d.ts:48

Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context.

Default

false

Inherited from

AutoDetectOptions.preserveDrawingBuffer

renderableGCActive

> renderableGCActive: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:20

If set to true, this will enable the garbage collector on the GPU.

Default

true

Inherited from

AutoDetectOptions.renderableGCActive

renderableGCFrequency

> renderableGCFrequency: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:30

Frames between two garbage collections.

Default

600

Inherited from

AutoDetectOptions.renderableGCFrequency

renderableGCMaxUnusedTime

> renderableGCMaxUnusedTime: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:25

The maximum idle frames before a texture is destroyed by garbage collection.

Default

60 * 60

Inherited from

AutoDetectOptions.renderableGCMaxUnusedTime

resizeTo?

> optional resizeTo?: HTMLElement | Window

Defined in: node_modules/pixi.js/lib/app/ResizePlugin.d.ts:34

Element to automatically resize the renderer to.

Example

const app = new Application();
await app.init({
    resizeTo: window, // Resize to the entire window
    // or
    resizeTo: document.querySelector('#game-container'), // Resize to a specific element
    // or
    resizeTo: null, // Disable auto-resize
});

Default

null

Inherited from

PixiMixins.ApplicationOptions.resizeTo

resolution?

> optional resolution?: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:40

The resolution / device pixel ratio of the renderer.

Inherited from

AutoDetectOptions.resolution

roundPixels?

> optional roundPixels?: boolean

Defined in: node_modules/pixi.js/lib/rendering/RenderingMixins.d.ts:16

Inherited from

AutoDetectOptions.roundPixels

sharedTicker?

> optional sharedTicker?: boolean

Defined in: node_modules/pixi.js/lib/app/TickerPlugin.d.ts:80

Controls whether to use the shared global ticker or create a new instance.

The shared ticker is useful when you have multiple instances that should sync their updates. However, it has some limitations regarding update order control.

Update Order:

1. System ticker (always runs first)
2. Shared ticker (if enabled)
3. App ticker (if using own ticker)

Example

// Use shared ticker (global instance)
await app.init({ sharedTicker: true });

// Use dedicated ticker (default)
await app.init({ sharedTicker: false });

// Access ticker properties
console.log(app.ticker.FPS);    // Current FPS
console.log(app.ticker.deltaMS); // MS since last update

Default

false

Inherited from

PixiMixins.ApplicationOptions.sharedTicker

skipExtensionImports?

> optional skipExtensionImports?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/SharedSystems.d.ts:67

Whether to stop PixiJS from dynamically importing default extensions for the renderer. It is false by default, and means PixiJS will load all the default extensions, based on the environment e.g browser/webworker. If you set this to true, then you will need to manually import the systems and extensions you need.

e.g.

import 'accessibility';
import 'app';
import 'events';
import 'spritesheet';
import 'graphics';
import 'mesh';
import 'text';
import 'text-bitmap';
import 'text-html';
import { autoDetectRenderer } from 'pixi.js';

const renderer = await autoDetectRenderer({
  width: 800,
  height: 600,
  skipExtensionImports: true,
});

Default

false

Inherited from

AutoDetectOptions.skipExtensionImports

~~textureGCActive~~

> textureGCActive: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:17

If set to true, this will enable the garbage collector on the GPU.

Default

true

Deprecated

since 8.15.0

Inherited from

AutoDetectOptions.textureGCActive

~~textureGCAMaxIdle~~

> textureGCAMaxIdle: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:22

Deprecated

since 8.3.0

See

TextureGCSystemOptions.textureGCMaxIdle

Inherited from

AutoDetectOptions.textureGCAMaxIdle

~~textureGCCheckCountMax~~

> textureGCCheckCountMax: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:34

Frames between two garbage collections.

Default

600

Deprecated

since 8.15.0

Inherited from

AutoDetectOptions.textureGCCheckCountMax

~~textureGCMaxIdle~~

> textureGCMaxIdle: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:28

The maximum idle frames before a texture is destroyed by garbage collection.

Default

60 * 60

Deprecated

since 8.15.0

Inherited from

AutoDetectOptions.textureGCMaxIdle

useBackBuffer?

> optional useBackBuffer?: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/GlBackBufferSystem.d.ts:17

if true will use the back buffer where required

Default

false

Inherited from

AutoDetectOptions.useBackBuffer

~~view?~~

> optional view?: ICanvas

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:31

Alias for canvas.

Deprecated

since 8.0.0

Inherited from

AutoDetectOptions.view

webgl?

> optional webgl?: Partial<WebGLOptions>

Defined in: node_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:30

Optional WebGLOptions to pass only to the WebGL renderer

Inherited from

AutoDetectOptions.webgl

webgpu?

> optional webgpu?: Partial<WebGPUOptions>

Defined in: node_modules/pixi.js/lib/rendering/renderers/autoDetectRenderer.d.ts:28

Optional WebGPUOptions to pass only to WebGPU renderer.

Inherited from

AutoDetectOptions.webgpu

width?

> optional width?: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:19

The width of the screen.

Default

800

Inherited from

AutoDetectOptions.width