pixi.js
    Preparing search index...

    Interface SharedRendererOptionsAdvanced

    Options for the shared systems of a renderer.

    interface SharedRendererOptions {
        antialias?: boolean;
        autoDensity?: boolean;
        background?: ColorSource;
        backgroundAlpha?: number;
        backgroundColor: ColorSource;
        bezierSmoothness: number;
        canvas?: ICanvas;
        clearBeforeRender?: boolean;
        depth?: boolean;
        eventFeatures?: Partial<EventSystemFeatures>;
        eventMode?: EventMode;
        failIfMajorPerformanceCaveat?: boolean;
        height?: number;
        hello: boolean;
        manageImports?: boolean;
        renderableGCActive: boolean;
        renderableGCFrequency: number;
        renderableGCMaxUnusedTime: number;
        resolution?: number;
        roundPixels?: boolean;
        skipExtensionImports?: boolean;
        textureGCActive: boolean;
        textureGCAMaxIdle: number;
        textureGCCheckCountMax: number;
        textureGCMaxIdle: number;
        view?: ICanvas;
        width?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    antialias? autoDensity? background? backgroundAlpha? backgroundColor bezierSmoothness canvas? clearBeforeRender? depth? eventFeatures? eventMode? failIfMajorPerformanceCaveat? height? hello manageImports? renderableGCActive renderableGCFrequency renderableGCMaxUnusedTime resolution? roundPixels? skipExtensionImports? textureGCActive textureGCAMaxIdle textureGCCheckCountMax textureGCMaxIdle view? 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
    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
    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

    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
    view?: ICanvas

    Alias for canvas.

    since 8.0.0

    width?: number

    The width of the screen.

    800

    Settings

    Member Visibility

    On This Page

    Properties