PixiJS

Class: Application

PIXI.Application

Convenience class to create a new PIXI application.

This class automatically creates the renderer, ticker and root container.

new PIXI.Application (options)

Application.ts:68
Name Type Attributes Default Description
options PIXI.IApplicationOptions <optional>

The optional application and renderer parameters.
options.antialias boolean <optional>
 false

WebGL Only. Whether to enable anti-aliasing. This may affect performance.
options.autoDensity boolean <optional>
 false

Whether the CSS dimensions of the renderer's view should be resized automatically.
options.autoStart boolean <optional>
 true

Automatically starts the rendering after the construction. Note: Setting this parameter to false does NOT stop the shared ticker even if you set options.sharedTicker to true in case that it is already started. Stop it by your own.
options.backgroundAlpha number <optional>
 1

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque).
options.backgroundColor number <optional>
 0x000000

The background color used to clear the canvas. It accepts hex numbers (e.g. 0xff0000).
options.clearBeforeRender boolean <optional>
 true

Whether to clear the canvas before new render passes.
options.context PIXI.IRenderingContext <optional>

WebGL Only. User-provided WebGL rendering context object.
options.forceCanvas boolean <optional>
 false

Force using PIXI.CanvasRenderer, even if WebGL is available. This option only is available when using pixi.js-legacy or @pixi/canvas-renderer packages, otherwise it is ignored.
options.height number <optional>
 600

The height of the renderer's view.
options.powerPreference string <optional>

WebGL Only. A hint indicating what configuration of GPU is suitable for the WebGL context, can be 'default', '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.
options.premultipliedAlpha boolean <optional>
 true

WebGL Only. Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.
options.preserveDrawingBuffer boolean <optional>
 false

WebGL Only. 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.
options.resizeTo Window | HTMLElement <optional>

Element to automatically resize stage to.
options.resolution number <optional>
 PIXI.settings.RESOLUTION

The resolution / device pixel ratio of the renderer.
options.sharedLoader boolean <optional>
 false

true to use PIXI.Loader.shared, false to create new Loader.
options.sharedTicker boolean <optional>
 false

true to use PIXI.Ticker.shared, false to create new ticker. If set to false, you cannot register a handler to occur before anything that runs on the shared ticker. The system ticker will always run before both the shared ticker and the app ticker.
options.transparent boolean <optional>

Deprecated since 6.0.0, Use backgroundAlpha instead.
true sets backgroundAlpha to 0, false sets backgroundAlpha to 1.
options.useContextAlpha boolean | 'notMultiplied' <optional>
 true

Pass-through value for canvas' context attribute alpha. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices. If you want to set transparency, please use backgroundAlpha.
WebGL Only: When set to 'notMultiplied', the canvas' context attribute alpha will be set to true and premultipliedAlpha will be to false.
options.view HTMLCanvasElement <optional>
 null

The canvas to use as the view. If omitted, a new canvas will be created.
options.width number <optional>
 800

The width of the renderer's view.

Example


 // Create the application
 const app = new PIXI.Application();

 // Add the view to the DOM
 document.body.appendChild(app.view);

 // ex, add display objects
 app.stage.addChild(PIXI.Sprite.from('something.png'));

Members

PIXI.Application._plugins PIXI.IApplicationPlugin[] static

Collection of installed plugins.

loader PIXI.Loader readonly

Loader instance to help with asset loading.

renderer PIXI.Renderer | PIXI.CanvasRenderer

WebGL renderer if available, otherwise CanvasRenderer.

resizeTo Window | HTMLElement

The HTML element or window to automatically resize the renderer's view element to match width and height.

screen PIXI.Rectangle readonly

Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for the whole screen.

stage PIXI.Container

The root display container that's rendered.

ticker PIXI.Ticker

Ticker for doing render updates.

Default Value:
  • PIXI.Ticker.shared

view HTMLCanvasElement readonly

Reference to the renderer's canvas element.

Methods

PIXI.Application.registerPlugin (plugin) void Deprecated`` : since 6.5.0 static

Application.ts:133

Use the PIXI.extensions.add API to register plugins.

Name Type Description
plugin PIXI.IApplicationPlugin

Plugin being installed

destroy (removeView, stageOptions) void

Application.ts:176

Destroy and don't use after this.

Name Type Attributes Default Description
removeView boolean <optional>
 false

Automatically remove canvas from DOM.
stageOptions object | boolean <optional>

Options parameter. A boolean will act as if all options have been set to that value
stageOptions.children boolean <optional>
 false

if set to true, all the children will have their destroy method called as well. 'stageOptions' will be passed on to those calls.
stageOptions.texture boolean <optional>
 false

Only used for child Sprites if stageOptions.children is set to true. Should it destroy the texture of the child sprite
stageOptions.baseTexture boolean <optional>
 false

Only used for child Sprites if stageOptions.children is set to true. Should it destroy the base texture of the child sprite

render () void

Application.ts:150

Render the current stage.

resize () void

ResizePlugin.ts:93

Execute an immediate resize on the renderer, this is not throttled and can be expensive to call many times in a row. Will resize only if resizeTo property is set.

start () void

TickerPlugin.ts:72

Convenience method for starting the render.

stop () void

TickerPlugin.ts:61

Convenience method for stopping the render.