Application

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

Usage

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

<Application width={700} height={400} antialias>
  <Text
    x={350}
    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={700} height={400} antialias>
  <div slot="view" class="custom">
    <!-- canvas will be placed here -->
  </div>

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

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

Render on Demand

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

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

See Render on Demand for more information.

API

Props

Name	Description
antialias false	boolean Sets antialias
autoDensity true	boolean Resizes renderer view in CSS pixels to allow for resolutions other than 1.
autoStart true	boolean Automatically starts the rendering
backgroundAlpha 1	number Value from 0 (fully transparent) to 1 (fully opaque).
backgroundColor 0x000000	number The background color of the rendered area (shown if not transparent).
clearBeforeRender	boolean This sets if the renderer will clear the canvas or not before the new render pass.
eventFeatures	PIXI.EventSystemOptions['eventFeatures'] The event features that are enabled by the EventSystem.
eventMode	PIXI.EventMode The default event mode mode for all display objects. This option only is available when using @pixi/events package (included in the pixi.js and pixi.js-legacy bundle), otherwise it will be ignored.
forceCanvas false	boolean Prevents selection of WebGL renderer, even if such is present, this option only is available when using pixi.js-legacy or @pixi/canvas-renderer modules, otherwise it is ignored.
height 600	number The height of the renderers view.
instance	PIXI.Application The PIXI.Application instance. This can be manually set or bound to. Note: if manually set, props will not be applied.
powerPreference	WebGLPowerPreference Parameter passed to webgl context, set to "high-performance" for devices with dual graphics card. (WebGL only).
premultipliedAlpha	boolean WebGL Only. Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.
preserveDrawingBuffer false	boolean Enables drawing buffer preservation, enable this if you need to call toDataUrl on the WebGL context.
render 'auto'	'auto''demand'false Changes the rendering method auto - render on each tick at the target FPS demand - render only when components have been updated
resizeTo	WindowHTMLElement Element to automatically resize stage to.
resolution	number The resolution / device pixel ratio of the renderer.
useContextAlpha	boolean"notMultiplied" Pass-through value for canvas' context alpha property. If you want to set transparency, please use backgroundAlpha. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices. @deprecated since 7.0.0, use premultipliedAlpha and backgroundAlpha instead.
width 800	number The width of the renderers view.

Slots

Name	Props	Fallback
default	{}
view	{ slot: view }	<div />

Events

Name	Type	Detail
postrender	forwarded
prerender	forwarded