# Interface: ApplicationOptions (/jsdoc/pixi-vn/index/interfaces/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 [#standard] Example [#example] ```js 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 [#see] * WebGLOptions For resize-related options * WebGPUOptions For resize-related options * TickerPlugin For ticker-related options * ResizePlugin For resize-related options Extends [#extends] * `AutoDetectOptions`.`ApplicationOptions` Properties [#properties] antialias? [#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 [#inherited-from] `AutoDetectOptions.antialias` *** autoDensity? [#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 [#inherited-from-1] `AutoDetectOptions.autoDensity` *** autoStart? [#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 [#example-1] ```ts // Auto-start (default behavior) await app.init({ autoStart: true }); // Manual start await app.init({ autoStart: false }); app.start(); // Start when ready ``` Default [#default] ```ts true ``` Inherited from [#inherited-from-2] `PixiMixins.ApplicationOptions.autoStart` *** background? [#background] \> `optional` **background?**: `ColorSource` Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/background/BackgroundSystem.d.ts:17 Alias for `backgroundColor` Inherited from [#inherited-from-3] `AutoDetectOptions.background` *** backgroundAlpha? [#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 [#default-1] ```ts 1 ``` Inherited from [#inherited-from-4] `AutoDetectOptions.backgroundAlpha` *** backgroundColor [#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 [#default-2] ```ts 'black' ``` Inherited from [#inherited-from-5] `AutoDetectOptions.backgroundColor` *** bezierSmoothness [#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 [#default-3] ```ts 0.5 ``` Inherited from [#inherited-from-6] `AutoDetectOptions.bezierSmoothness` *** canvas? [#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 [#inherited-from-7] `AutoDetectOptions.canvas` *** canvasOptions? [#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 [#inherited-from-8] `AutoDetectOptions.canvasOptions` *** clearBeforeRender? [#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 [#default-4] ```ts true ``` Inherited from [#inherited-from-9] `AutoDetectOptions.clearBeforeRender` *** context [#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 [#default-5] ```ts null ``` Inherited from [#inherited-from-10] `AutoDetectOptions.context` *** culler? [#culler] \> `optional` **culler?**: `object` Defined in: node\_modules/pixi.js/lib/culling/CullerPlugin.d.ts:34 Options for the culler behavior. updateTransform? [#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 [#default-6] ```ts true ``` Example [#example-2] ```ts const app = new Application(); await app.init({ culler: { updateTransform: false // Skip updating transforms for culled objects } }); ``` Example [#example-3] ```ts // Basic culling options const app = new Application(); await app.init({ culler: {...} }); ``` Inherited from [#inherited-from-11] `PixiMixins.ApplicationOptions.culler` *** depth? [#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 [#inherited-from-12] `AutoDetectOptions.depth` *** eventFeatures? [#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 [#example-4] ```ts 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 [#since] 7.2.0 Inherited from [#inherited-from-13] `AutoDetectOptions.eventFeatures` *** eventMode? [#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](/jsdoc/pixi-vn/index/classes/VideoSprite#eventmode) property. Example [#example-5] ```ts // 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 [#since-1] 7.2.0 Inherited from [#inherited-from-14] `AutoDetectOptions.eventMode` *** failIfMajorPerformanceCaveat? [#failifmajorperformancecaveat] \> `optional` **failIfMajorPerformanceCaveat?**: `boolean` Defined in: node\_modules/pixi.js/lib/rendering/RenderingMixins.d.ts:15 Inherited from [#inherited-from-15] `AutoDetectOptions.failIfMajorPerformanceCaveat` *** forceFallbackAdapter [#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 [#default-7] ```ts false ``` Inherited from [#inherited-from-16] `AutoDetectOptions.forceFallbackAdapter` *** gcActive [#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 [#default-8] ```ts true ``` Inherited from [#inherited-from-17] `AutoDetectOptions.gcActive` *** gcFrequency [#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 [#default-9] ```ts 30000 ``` Inherited from [#inherited-from-18] `AutoDetectOptions.gcFrequency` *** gcMaxUnusedTime [#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 [#default-10] ```ts 60000 ``` Inherited from [#inherited-from-19] `AutoDetectOptions.gcMaxUnusedTime` *** gpu? [#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 [#inherited-from-20] `AutoDetectOptions.gpu` *** height? [#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 [#default-11] ```ts 600 ``` Inherited from [#inherited-from-21] `AutoDetectOptions.height` *** hello [#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 [#default-12] ```ts false ``` Inherited from [#inherited-from-22] `AutoDetectOptions.hello` *** ~~manageImports?~~ [#manageimports] \> `optional` **manageImports?**: `boolean` Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/system/SharedSystems.d.ts:73 Default [#default-13] ```ts true ``` Deprecated [#deprecated] since 8.1.6 See [#see-1] `skipExtensionImports` Inherited from [#inherited-from-23] `AutoDetectOptions.manageImports` *** multiView [#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 [#default-14] ```ts false ``` Inherited from [#inherited-from-24] `AutoDetectOptions.multiView` *** powerPreference? [#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 [#default-15] ```ts undefined ``` Inherited from [#inherited-from-25] `AutoDetectOptions.powerPreference` *** preference? [#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 [#inherited-from-26] `AutoDetectOptions.preference` *** preferWebGLVersion? [#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 [#default-16] ```ts 2 ``` Inherited from [#inherited-from-27] `AutoDetectOptions.preferWebGLVersion` *** premultipliedAlpha [#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 [#default-17] ```ts true ``` Inherited from [#inherited-from-28] `AutoDetectOptions.premultipliedAlpha` *** preserveDrawingBuffer [#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 [#default-18] ```ts false ``` Inherited from [#inherited-from-29] `AutoDetectOptions.preserveDrawingBuffer` *** renderableGCActive [#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 [#default-19] ```ts true ``` Inherited from [#inherited-from-30] `AutoDetectOptions.renderableGCActive` *** renderableGCFrequency [#renderablegcfrequency] \> **renderableGCFrequency**: `number` Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/RenderableGCSystem.d.ts:30 Frames between two garbage collections. Default [#default-20] ```ts 600 ``` Inherited from [#inherited-from-31] `AutoDetectOptions.renderableGCFrequency` *** renderableGCMaxUnusedTime [#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 [#default-21] ```ts 60 * 60 ``` Inherited from [#inherited-from-32] `AutoDetectOptions.renderableGCMaxUnusedTime` *** resizeTo? [#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 [#example-6] ```ts 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 [#default-22] ```ts null ``` Inherited from [#inherited-from-33] `PixiMixins.ApplicationOptions.resizeTo` *** resolution? [#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 [#inherited-from-34] `AutoDetectOptions.resolution` *** roundPixels? [#roundpixels] \> `optional` **roundPixels?**: `boolean` Defined in: node\_modules/pixi.js/lib/rendering/RenderingMixins.d.ts:16 Inherited from [#inherited-from-35] `AutoDetectOptions.roundPixels` *** sharedTicker? [#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 [#example-7] ```ts // 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 [#default-23] ```ts false ``` Inherited from [#inherited-from-36] `PixiMixins.ApplicationOptions.sharedTicker` *** skipExtensionImports? [#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. ```js 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 [#default-24] ```ts false ``` Inherited from [#inherited-from-37] `AutoDetectOptions.skipExtensionImports` *** ~~textureGCActive~~ [#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 [#default-25] ```ts true ``` Deprecated [#deprecated-1] since 8.15.0 Inherited from [#inherited-from-38] `AutoDetectOptions.textureGCActive` *** ~~textureGCAMaxIdle~~ [#texturegcamaxidle] \> **textureGCAMaxIdle**: `number` Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:22 Deprecated [#deprecated-2] since 8.3.0 See [#see-2] [TextureGCSystemOptions.textureGCMaxIdle](#texturegcmaxidle) Inherited from [#inherited-from-39] `AutoDetectOptions.textureGCAMaxIdle` *** ~~textureGCCheckCountMax~~ [#texturegccheckcountmax] \> **textureGCCheckCountMax**: `number` Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/texture/TextureGCSystem.d.ts:34 Frames between two garbage collections. Default [#default-26] ```ts 600 ``` Deprecated [#deprecated-3] since 8.15.0 Inherited from [#inherited-from-40] `AutoDetectOptions.textureGCCheckCountMax` *** ~~textureGCMaxIdle~~ [#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 [#default-27] ```ts 60 * 60 ``` Deprecated [#deprecated-4] since 8.15.0 Inherited from [#inherited-from-41] `AutoDetectOptions.textureGCMaxIdle` *** useBackBuffer? [#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 [#default-28] ```ts false ``` Inherited from [#inherited-from-42] `AutoDetectOptions.useBackBuffer` *** ~~view?~~ [#view] \> `optional` **view?**: `ICanvas` Defined in: node\_modules/pixi.js/lib/rendering/renderers/shared/view/ViewSystem.d.ts:31 Alias for `canvas`. Deprecated [#deprecated-5] since 8.0.0 Inherited from [#inherited-from-43] `AutoDetectOptions.view` *** webgl? [#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 [#inherited-from-44] `AutoDetectOptions.webgl` *** webgpu? [#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 [#inherited-from-45] `AutoDetectOptions.webgpu` *** width? [#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 [#default-29] ```ts 800 ``` Inherited from [#inherited-from-46] `AutoDetectOptions.width`