Application

Creates a PIXI.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={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>
  <div slot="view" class="custom">
    <!-- canvas will be placed here -->
  </div>

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

Render on Demand

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

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

See Render on Demand for more information.

Component API

Props

Name	Type	Default	Description
antialias	`boolean`	`false`	Sets antialias
autoDensity	`boolean`	`true`	Resizes renderer view in CSS pixels to allow for resolutions other than 1.
autoStart	`boolean`	`true`	Automatically starts the rendering
backgroundAlpha	`number`	`1`	Value from 0 (fully transparent) to 1 (fully opaque).
backgroundColor	`number`	`0x000000`	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.
forceCanvas	`boolean`	`false`	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	`number`	`600`	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).
preserveDrawingBuffer	`boolean`	`false`	Enables drawing buffer preservation, enable this if you need to call toDataUrl on the WebGL context.
render	`'auto''demand'false`	`'auto'`	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.
width	`number`	`800`	The width of the renderers view.

Slots

Name	Props	Fallback
default
view		`<div />`

Events

Name	Type	Detail
postrender	`forwarded`
prerender	`forwarded`

Previous AnimatedSprite

Next BitmapText