Renderer

This is an alternative to using the Application component. It allows you to use a custom PIXI.Renderer instance but — like its native class — it will not start the render loop or create the root container for you. You will need to do this yourself.

Usage

Basic

<script>
  import { Renderer, Container, Ticker, Text } from 'svelte-pixi'
  import DraggableCircle from '$lib/components/DraggableCircle.svelte'

  let renderer
  let stage
</script>

<Renderer
  bind:instance={renderer}
  bind:stage
  width={400}
  height={400}
  antialias
>
  <!-- use our own ticker to control the render loop -->
  <Ticker
    on:tick={() => {
      renderer.render(stage)
    }}
  >
    <!--
      the root container is referred to as the "stage", child components
      can access it with getStage()
    -->
    <Container bind:instance={stage}>
      <DraggableCircle x={200} y={200} />
      <Text
        x={200}
        y={300}
        text="Click and drag"
        style={{ fill: 'white' }}
        anchor={0.5}
      />
    </Container>
  </Ticker>
</Renderer>

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 { Renderer, Container, Ticker, Text } from 'svelte-pixi'

  let renderer
  let stage
</script>

<Renderer
  bind:instance={renderer}
  bind:stage
  width={400}
  height={400}
  antialias
>
  <div slot="view" class="custom">
    <!-- canvas will be placed here -->
  </div>

  <!-- pixi components go here -->
  <Container bind:instance={stage}>
    <Ticker
      on:tick={() => {
        renderer.render(stage)
      }}
    />
    <Text
      x={200}
      y={200}
      anchor={0.5}
      text="Hello World"
      style={{ fill: 'white' }}
    />
  </Container>
</Renderer>

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

Render on Demand

The Application component supports rendering on demand. While Renderer doesn’t offer the same render="demand" prop, we can still implement this ourselves:

<script>
  import { Renderer, Container, Ticker, Text } from 'svelte-pixi'
  import DraggableCircle from '$lib/components/DraggableCircle.svelte'

  let renderer
  let stage
  let needsRender = true
</script>

<Renderer
  bind:instance={renderer}
  width={400}
  height={400}
  antialias
  on:invalidate={() => {
    needsRender = true
  }}
>
  <Ticker
    on:tick={() => {
      if (needsRender) {
        renderer.render(stage)
        needsRender = false
        // check out the console
        console.log('render')
      }
    }}
  >
    <Container bind:instance={stage}>
      <DraggableCircle x={200} y={200} />
      <Text
        x={200}
        y={300}
        text="Click and drag"
        style={{ fill: 'white' }}
        anchor={0.5}
      />
    </Container>
  </Ticker>
</Renderer>

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.
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	The PIXI.Renderer instance. Can be set or bound to. By default it uses PIXI.autoDetectRenderer()
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.
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	{}

Events

Name	Type	Detail
invalidate	dispatched	null
postrender	dispatched
prerender	dispatched