pixi.js
    Preparing search index...

    Interface AutoDetectOptionsAdvanced

    Options for autoDetectRenderer.

    interface AutoDetectOptions {
        antialias?: boolean;
        autoDensity?: boolean;
        background?: ColorSource;
        backgroundAlpha?: number;
        backgroundColor: ColorSource;
        bezierSmoothness: number;
        canvas?: ICanvas;
        clearBeforeRender?: boolean;
        context: WebGL2RenderingContext;
        depth?: boolean;
        eventFeatures?: Partial<EventSystemFeatures>;
        eventMode?: EventMode;
        failIfMajorPerformanceCaveat?: boolean;
        forceFallbackAdapter: boolean;
        gpu?: GPU;
        height?: number;
        hello: boolean;
        manageImports?: boolean;
        multiView: boolean;
        powerPreference?: GpuPowerPreference;
        preference?: "webgl" | "webgpu";
        preferWebGLVersion?: 1 | 2;
        premultipliedAlpha: boolean;
        preserveDrawingBuffer: boolean;
        renderableGCActive: boolean;
        renderableGCFrequency: number;
        renderableGCMaxUnusedTime: number;
        resolution?: number;
        roundPixels?: boolean;
        skipExtensionImports?: boolean;
        textureGCActive: boolean;
        textureGCAMaxIdle: number;
        textureGCCheckCountMax: number;
        textureGCMaxIdle: number;
        useBackBuffer?: boolean;
        view?: ICanvas;
        webgl?: Partial<WebGLOptions>;
        webgpu?: Partial<WebGPUOptions>;
        width?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    antialias? autoDensity? background? backgroundAlpha? backgroundColor bezierSmoothness canvas? clearBeforeRender? context depth? eventFeatures? eventMode? failIfMajorPerformanceCaveat? forceFallbackAdapter gpu? height? hello manageImports? multiView powerPreference? preference? preferWebGLVersion? premultipliedAlpha preserveDrawingBuffer renderableGCActive renderableGCFrequency renderableGCMaxUnusedTime resolution? roundPixels? skipExtensionImports? textureGCActive textureGCAMaxIdle textureGCCheckCountMax textureGCMaxIdle useBackBuffer? view? webgl? webgpu? width?

    Properties

    antialias?: boolean

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

    autoDensity?: boolean

    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.

    background?: ColorSource

    Alias for backgroundColor

    backgroundAlpha?: number

    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.

    1
    backgroundColor: ColorSource

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

    'black'
    bezierSmoothness: number

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

    0.5
    canvas?: ICanvas

    The canvas to use as a view, optional.

    clearBeforeRender?: boolean

    Whether to clear the canvas before new render passes.

    true
    context: WebGL2RenderingContext

    User-provided WebGL rendering context object.

    null
    depth?: boolean

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

    eventFeatures?: Partial<EventSystemFeatures>

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

    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
        }
    });

    7.2.0

    eventMode?: EventMode

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

    // 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

    7.2.0

    failIfMajorPerformanceCaveat?: boolean
    forceFallbackAdapter: boolean

    Force the use of the fallback adapter

    false
    gpu?: GPU

    Using shared device and adaptor from other engine

    height?: number

    The height of the screen.

    600
    hello: boolean

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

    false
    manageImports?: boolean
    true

    since 8.1.6

    skipExtensionImports

    multiView: boolean

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

    false
    powerPreference?: GpuPowerPreference

    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.

    undefined
    preference?: "webgl" | "webgpu"

    The preferred renderer type. WebGPU is recommended as its generally faster than WebGL.

    preferWebGLVersion?: 1 | 2

    The preferred WebGL version to use.

    2
    premultipliedAlpha: boolean

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

    true
    preserveDrawingBuffer: boolean

    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.

    false
    renderableGCActive: boolean

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

    true
    renderableGCFrequency: number

    Frames between two garbage collections.

    600
    renderableGCMaxUnusedTime: number

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

    60 * 60
    resolution?: number

    The resolution / device pixel ratio of the renderer.

    roundPixels?: boolean
    skipExtensionImports?: boolean

    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,
    });

    false
    textureGCActive: boolean

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

    true
    textureGCAMaxIdle: number

    since 8.3.0

    TextureGCSystemOptions.textureGCMaxIdle

    textureGCCheckCountMax: number

    Frames between two garbage collections.

    600
    textureGCMaxIdle: number

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

    60 * 60
    useBackBuffer?: boolean

    if true will use the back buffer where required

    false
    view?: ICanvas

    Alias for canvas.

    since 8.0.0

    webgl?: Partial<WebGLOptions>

    Optional WebGLOptions to pass only to the WebGL renderer

    webgpu?: Partial<WebGPUOptions>

    Optional WebGPUOptions to pass only to WebGPU renderer.

    width?: number

    The width of the screen.

    800

    Settings

    Member Visibility

    On This Page

    Properties