Renderer

Creates a PIXI.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/site/DraggableCircle.svelte'

  let renderer
  let stage

</script>

<Renderer
  bind:instance={renderer}
  bind:stage={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}>
        <Text
          x={200}
          y={300}
          text="Click and drag"
          style={{ fill: 'white' }}
          anchor={0.5}
        />
        <DraggableCircle x={200} y={200}/>
    </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={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/site/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}>
      <Text
        x={200}
        y={300}
        text="Click and drag"
        style={{ fill: 'white' }}
        anchor={0.5}
      />
      <DraggableCircle x={200} y={200}/>
    </Container>
  </Ticker>
</Renderer>

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.
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 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).
preserveDrawingBuffer boolean false 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.
width number 800 The width of the renderers view.

Slots

Name Props Fallback
default
view

Events

Name Type Detail
invalidate dispatched
postrender dispatched
prerender dispatched