Skip to content
SveltePixi

Application

Just like PIXI.Application, it sets up the Renderer, Ticker and root Container. If you wish, you can manually render those components instead.

PIXI.Application description from PixiJS source

Convenience class to create a new PixiJS application.

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

Usage

<script>
  import { Application, Text } from 'svelte-pixi'
</script>


<Application width={400} height={400} antialias>
  <Text
    x={200}
    y={200}
    anchor={0.5}
    text="Hello World"
    style={{ fill: 'white' }}
  />
</Application>

Custom View

If you want to customize the element that the canvas is rendered into, you can use the view slot. The canvas will be appended as a child of the slot element.

<script>
  import { Application, Text } from 'svelte-pixi'
</script>


<Application width={400} height={400} antialias autoDensity>
  {#snippet view()}
    <div class="custom">
      <!-- canvas will be placed here -->
    </div>
  {/snippet}


  <!-- pixi components go here -->
  <Text
    x={200}
    y={200}
    anchor={0.5}
    text="Hello World"
    style={{ fill: 'white' }}
  />
</Application>


<style>
  .custom :global(canvas) {
    border: 5px solid tomato;
    border-radius: 5px;
  }
</style>

Custom Stage

PIXI.Application automatically creates a root container at app.stage. If you want to customize it you can either modify it directly or use the stage snippet to manually render it as a Container component.

<script>
  import { Application, Text, Container} from 'svelte-pixi'


  let mouse = { x: 0, y: 0 }
</script>


<Application width={400} height={400} antialias autoDensity>
  <!-- customize the app.stage instance -->
  {#snippet stage({ app, children })}
    <Container
      instance={app.stage}
      hitArea={app.screen}
      eventMode="static"
      onpointermove={(e) => mouse = e.data.global}
    >
      <!-- your pixi components go here -->
      <Text
        x={200}
        y={200}
        anchor={0.5}
        text={`Mouse: ${Math.round(mouse.x)}, ${Math.round(mouse.y)}`}
        style={{ fill: 'white' }}
      />


      <!--
       alternatively, you can do {@render children()} here
       and put your components outside of this snippet.
       they will both work the same way.
      -->
    </Container>
  {/snippet}
</Application>

Render on Demand

<script>
  import { onMount } from 'svelte'
  import { Text, Application } from 'svelte-pixi'
  import DraggableCircle from '$lib/components/DraggableCircle.svelte'
</script>


<Application
  width={400}
  height={400}
  antialias
  render="demand"
  onrender={() => console.log('render')}
>
  <DraggableCircle x={200} y={200} />
  <Text
    x={200}
    y={300}
    text="Click and drag"
    style={{ fill: 'white' }}
    anchor={0.5}
  />
</Application>

API

Props

* denotes required

NameDescription
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.

autoInit
boolean

If true, Application.init() is called immediately. If you want to initialize it yourself with a custom instance, set this to false.

autoStart
boolean

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.

background
stringnumbernumber[]Float32ArrayUint8ArrayUint8ClampedArrayPIXI.HslColorPIXI.HslaColorPIXI.HsvColorPIXI.HsvaColorPIXI.RgbColorPIXI.RgbaColorPIXI.Color

Alias for backgroundColor

backgroundAlpha
number

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque).

backgroundColor
stringnumbernumber[]Float32ArrayUint8ArrayUint8ClampedArrayPIXI.HslColorPIXI.HslaColorPIXI.HsvColorPIXI.HsvaColorPIXI.RgbColorPIXI.RgbaColorPIXI.Color

The background color used to clear the canvas. See {@link ColorSource} for accepted color values.

bezierSmoothness
number

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

canvas
PIXI.ICanvas

The canvas to use as a view, optional.

clearBeforeRender
boolean

Whether to clear the canvas before new render passes.

context
nullWebGL2RenderingContext

User-provided WebGL rendering context object.

depth
boolean

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

eventFeatures
Partial<PIXI.EventSystemFeatures>

The event features that are enabled by the EventSystem.

eventMode
"auto""none""passive""static""dynamic"

The default event mode for all display objects.

failIfMajorPerformanceCaveat
boolean
forceFallbackAdapter
boolean

Force the use of the fallback adapter

height
number

The height of the screen.

hello
boolean

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

instance
T

The PIXI.Application instance. This can be manually set or bound to.

Note: if manually set any PIXI.ApplicationOptions props will not be set as they are passed into the constructor

manageImports
boolean
multiView
boolean

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

oninit
(ev: { application: T; }) => void

Called when PIXI.Application.init() method resolves

onpostrender
(item: unknown) => void

Event handler for the postrender PIXI.Runner

onprerender
(item: unknown) => void

Event handler for the prerender PIXI.Runner

onrender
(item: unknown) => void

Event handler for the render PIXI.Runner

onrenderstart
(item: unknown) => void

Event handler for the renderStart PIXI.Runner

powerPreference
"low-power""high-performance"

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.

preference
"webgpu""webgl"

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

preferWebGLVersion
12

The preferred WebGL version to use.

premultipliedAlpha
boolean

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

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.

render
"auto""demand"
renderableGCActive
boolean

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

renderableGCFrequency
number

Frames between two garbage collections.

renderableGCMaxUnusedTime
number

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

resizeTo
HTMLElementWindow

Element to automatically resize the renderer to.

resolution
number

The resolution / device pixel ratio of the renderer.

roundPixels
boolean
sharedTicker
boolean

Settrue to use 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.

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

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

textureGCAMaxIdle
number
textureGCCheckCountMax
number

Frames between two garbage collections.

textureGCMaxIdle
number

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

useBackBuffer
boolean

if true will use the back buffer where required

webgl
Partial<PIXI.WebGLOptions>

Optional WebGLOptions to pass only to the WebGL renderer

webgpu
Partial<PIXI.WebGPUOptions>

Optional WebGPUOptions to pass only to WebGPU renderer.

width
number

The width of the screen.

Snippets

NameType
childrenSnippet<[]>
loadingSnippet<[]>
stageSnippet<[{ app: T; children: Snippet<[]>; }]>
viewSnippet<[]>