### Install SveltePixi with Vite Template

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/getting-started/installation.mdx

This snippet demonstrates how to initialize a new SveltePixi project using the Vite template. It involves cloning the template, installing dependencies, and starting the development server. No specific inputs or outputs are detailed beyond the standard NPM commands.

```bash
npx degit mattjennings/svelte-pixi/examples/vite
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Run Dev Server

Source: https://github.com/mattjennings/svelte-pixi/blob/master/README.md

These commands are used to install project dependencies using pnpm and then start the development server for the SveltePixi documentation website. After installation, the 'pnpm run dev' command makes the documentation accessible locally for development.

```bash
pnpm install
pnpm run dev
```

--------------------------------

### External Store Example in Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/examples/vite/README.md

Demonstrates how to create a simple external store using Svelte's `writable` function. This is recommended for preserving component state during Hot Module Replacement (HMR).

```javascript
// store.js
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```

--------------------------------

### Install SveltePixi Dependencies

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/getting-started/installation.mdx

This snippet shows the commands to add SveltePixi and its core dependency, PixiJS, to an existing Svelte project. It assumes the user already has a Svelte project set up and needs to integrate the PixiJS capabilities.

```bash
npm install pixi.js svelte-pixi
```

--------------------------------

### SveltePixi: Setup PixiJS Application with Auto Rendering

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

This snippet shows how to create a PixiJS application using the SveltePixi Application component. It handles canvas setup and automatic rendering. Dependencies include 'svelte-pixi' and 'pixi.js'. It takes props like width, height, and background color.

```svelte
<script>
  import { Application, Sprite, Container } from 'svelte-pixi'
  import { Assets } from 'pixi.js'

  let texture
  Assets.load('https://pixijs.com/assets/bunny.png').then(t => texture = t)
</script>

<Application
  width={800}
  height={600}
  backgroundColor={0x1099bb}
  antialias={true}
  resolution={window.devicePixelRatio}
  render="auto"
>
  {#if texture}
    <Container x={400} y={300}>
      <Sprite {texture} anchor={0.5} rotation={0.5} scale={2} />
    </Container>
  {/if}
</Application>
```

--------------------------------

### Install Custom Pixi.js Dependencies

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/guides/reducing-bundle-size.mdx

This command installs all the necessary individual '@pixi/*' packages that are exported in the custom pixi.js build. Running this ensures that all required modules are available for the custom build to function correctly.

```sh
npm install @pixi/accessibility @pixi/app @pixi/assets @pixi/basis @pixi/compressed-textures @pixi/core @pixi/display @pixi/events @pixi/extract @pixi/graphics @pixi/mesh @pixi/particle-container @pixi/prepare @pixi/sprite-animated @pixi/sprite-tiling @pixi/sprite @pixi/spritesheet @pixi/text-bitmap @pixi/text
```

--------------------------------

### Svelte Pixi Container Usage Example

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/container.mdx

Demonstrates how to use the Container component in svelte-pixi to group and position Text elements. Child elements' coordinates are relative to the parent Container.

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

<Container x={360} y={160}>
  <Text text="Hello" x={0} y={0} anchor={0.5} style={{ fill: 'white' }} />
  <Text text="World" x={0} y={60} anchor={0.5} style={{ fill: 'white' }} />
</Container>
```

--------------------------------

### Install pnpm Package Manager

Source: https://github.com/mattjennings/svelte-pixi/blob/master/README.md

This snippet shows how to install the pnpm package manager globally using npm. pnpm is a requirement for developing and running the SveltePixi project. Ensure Node.js and npm are installed before executing this command.

```bash
npm i -g pnpm
```

--------------------------------

### SveltePixi: Render Sprites with Reactive Properties

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

This example demonstrates rendering sprites using the SveltePixi Sprite component. It allows for reactive properties like position, rotation, and scale. Event handling for user interactions like pointerdown is also supported. Dependencies include 'svelte-pixi' and 'pixi.js'.

```svelte
<script>
  import { Application, Sprite, onTick } from 'svelte-pixi'
  import { Assets } from 'pixi.js'

  let texture
  let rotation = 0

  Assets.load('https://pixijs.com/assets/bunny.png').then(t => texture = t)

  onTick((delta) => {
    rotation += 0.05 * delta
  })
</script>

<Application width={400} height={400}>
  {#if texture}
    <Sprite
      {texture}
      x={200}
      y={200}
      anchor={0.5}
      {rotation}
      blendMode={0}
      interactive={true}
      on:pointerdown={(e) => console.log('Sprite clicked!', e)}
    />
  {/if}
</Application>
```

--------------------------------

### Get PIXI Application Context using getApp in JavaScript

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/utilities/get-app.mdx

This snippet demonstrates how to import and use the getApp function from 'svelte-pixi' to retrieve the PIXI.Application instance. The returned object contains the 'app' property, which is the PIXI.Application instance.

```javascript
import { getApp } from 'svelte-pixi'

const { app } = getApp()
```

--------------------------------

### Basic Svelte Pixi Application Setup

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/application.mdx

This snippet demonstrates the basic usage of the Svelte Pixi Application component. It initializes a PixiJS application with a specified width and height, enabling antialiasing, and renders a simple 'Hello World' text element within it. No external dependencies are required beyond `svelte-pixi`.

```svelte
<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>
```

--------------------------------

### Initialize AssetsLoader in Svelte with PixiJS v7

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/releases/v7-0-0.md

Demonstrates how to initialize PIXI.Assets with a base URL and use the AssetsLoader component in Svelte for loading assets like sprite sheets. It includes a loading progress indicator and displays a sprite once loaded. This example assumes PixiJS v7 compatibility.

```svelte
<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  // optional - only if you need to set Assets configuration options
  const initPromise = PIXI.Assets.init({
    baseUrl: '/assets',
  })
</script>

{#await initPromise then}
  <AssetsLoader assets={['/sprite.png']}>
    <slot let:progress slot="loading">
      <Text text={`Loading... ${progress}`} x={200} y={200} anchor={0.5} />
    </slot>

    <Sprite
      texture={PIXI.Texture.from('/sprite.png')}
      x={20}
      y={50}
      width={360}
      height={300}
    />
  </AssetsLoader>
{/await}
```

--------------------------------

### Render on Demand with Renderer

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/renderer.mdx

Implements render-on-demand functionality with the Renderer component by manually controlling rendering based on a `needsRender` flag and an `invalidate` event. This example logs 'render' to the console each time a render occurs.

```svelte
<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>
```

--------------------------------

### Demand Rendering Optimization in Svelte-Pixi

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

This example illustrates how to optimize performance in Svelte-Pixi applications by enabling demand rendering. The canvas only updates when reactive properties change, reducing unnecessary re-renders. It shows how to load a sprite asset and move it to a random position upon clicking, updating a render count display. This is particularly useful for applications where frequent visual updates are not always required.

```svelte
<script>
  import { Application, Sprite, Text } from 'svelte-pixi'
  import { Assets } from 'pixi.js'

  let texture
  let count = 0
  let position = { x: 200, y: 200 }

  Assets.load('https://pixijs.com/assets/bunny.png').then(t => texture = t)

  // With render="demand", the canvas only updates when reactive props change
  function moveSprite() {
    position = {
      x: Math.random() * 400,
      y: Math.random() * 400
    }
    count++
  }
</script>

<Application
  width={400}
  height={400}
  render="demand"
>
  {#if texture}
    <Sprite
      {texture}
      x={position.x}
      y={position.y}
      anchor={0.5}
      interactive={true}
      eventMode="static"
      on:pointerdown={moveSprite}
    />
  {/if}

  <Text
    text={`Render count: ${count}`}
    x={10}
    y={10}
    style={{ fill: 'white' }}
  />
</Application>
```

--------------------------------

### Load Assets with Progress and Display

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/assets-loader.mdx

Demonstrates how to use the AssetsLoader component to load an image asset ('/assets/great-success.png'). It includes a 'loading' slot to display the loading progress percentage and a default slot to render the loaded Sprite once complete. This example requires svelte-pixi and pixi.js.

```svelte
<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'
</script>

<AssetsLoader assets={['/assets/great-success.png']}>
  <slot let:progress slot="loading">
    <Text x={360} y={200} text={`Loading... ${progress}%`} anchor={0.5} />
  </slot>

  <Sprite
    x={360}
    y={200}
    texture={PIXI.Texture.from('/assets/great-success.png')}
    anchor={0.5}
    width={360}
    height={300}
  />
</AssetsLoader>
```

--------------------------------

### Access PixiJS Instance with bind:instance in Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/getting-started/usage.mdx

Explains how to get a reference to the underlying PixiJS instance of a Svelte Pixi component using the `bind:instance` directive. This allows direct manipulation of the PixiJS object, similar to how `bind:this` works for DOM elements. This example modifies the fill color of a Text instance after the component mounts.

```svelte
<script>
  import { onMount } from 'svelte'
  import { Text } from 'svelte-pixi'

  let text

  onMount(() => {
    // manually set property on the PIXI.Text instance
    text.style.fill = '#00ff00'
  })
</script>

<Text bind:instance={text} x={360} y={200} text="Hello World" anchor={0.5} />
```

--------------------------------

### Svelte Pixi SimplePlane Usage Example

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/simple-plane.mdx

Demonstrates how to use the SimplePlane component to draw a texture and animate its vertices over time. It requires svelte-pixi and pixi.js. The component takes texture, vertex count, and position as props, and the animation logic updates vertex positions based on time.

```svelte
<script>
  import { SimplePlane, onTick } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  let plane
  $: buffer = plane && plane.geometry.getBuffer('aVertexPosition')

  let time = 0
  onTick((delta) => {
    if (buffer) {
      // Randomize the vertice positions a bit to create movement.
      for (let i = 0; i < buffer.data.length; i++) {
        buffer.data[i] += Math.sin(time / 10 + i) * 0.5
      }
      buffer.update()
      time++
    }
  })
</script>

<SimplePlane
  x={75}
  y={0}
  bind:instance={plane}
  anchor={0.5}
  texture={PIXI.Texture.from('/assets/bg_grass.jpg')}
  vertices={10}
/>
```

--------------------------------

### Svelte Pixi TilingSprite Usage Example

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/tiling-sprite.mdx

This Svelte component demonstrates the usage of TilingSprite from svelte-pixi. It utilizes PixiJS for rendering and updates the sprite's scale and position dynamically using the onTick function. Dependencies include svelte-pixi, PixiJS, and the Astro component for API display.

```svelte
import { onMount } from 'svelte'
import { TilingSprite, AssetsLoader, onTick } from 'svelte-pixi'
import * as PIXI from 'pixi.js'

let count = 0
let scale = { x: 1, y: 1 }
let tilePosition = { x: 0, y: 0 }

onTick((delta) => {
  count += 0.01 * delta

  scale = { x: 2 + Math.sin(count), y: 2 + Math.cos(count) }
  tilePosition = { x: tilePosition.x + 1, y: tilePosition.y + 1 }
})

```

```html
<TilingSprite
  x={360}
  y={200}
  texture={PIXI.Texture.from('/assets/tiling-sprite.jpeg')}
  anchor={0.5}
  width={400}
  height={400}
  {tilePosition}
  {scale}
/>
```

--------------------------------

### Draw a dynamic circle with Svelte Pixi Graphics

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/graphics.mdx

This example demonstrates how to use the Svelte Pixi Graphics component to draw a circle whose size animates over time. It utilizes the `draw` prop to interact with the PIXI.Graphics API and `onTick` for animation updates. No external dependencies are required beyond svelte-pixi.

```svelte
<script>
  import { onMount } from 'svelte'
  import { Graphics, onTick } from 'svelte-pixi'

  let size = 100
  let counter = 0

  onTick((delta) => {
    counter += delta * 0.025

    size = 100 + Math.sin(counter) * 50
  })
</script>

<Graphics
  x={375}
  y={200}
  draw={(graphics) => {
    graphics.clear()
    graphics.beginFill(0xde3249)
    graphics.drawCircle(0, 0, size)
    graphics.endFill()
  }}
/>
```

--------------------------------

### Use Custom PixiJS Instance in Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/getting-started/usage.mdx

Demonstrates how to provide a custom, pre-instantiated PixiJS object to a Svelte Pixi component using the `instance` prop. This is useful for integrating with custom PixiJS classes or third-party libraries that extend PixiJS. The example uses a custom `GreenText` class that inherits from `PIXI.Text`.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { Text } from 'svelte-pixi'

  class GreenText extends PIXI.Text {
    constructor(text, style) {
      super(text, style)
      this.style.fill = '#00ff00'
    }
  }
</script>

<Text
  instance={new GreenText()}
  x={360}
  y={200}
  text="Hello World"
  anchor={0.5}
/>
```

--------------------------------

### SveltePixi: Draw Vector Shapes with Graphics Component

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

This example showcases the SveltePixi Graphics component for drawing vector shapes programmatically. It utilizes a `draw` function prop that receives a graphics object to perform drawing operations like `clear`, `beginFill`, and `drawCircle`/`drawRect`. Dependencies include 'svelte-pixi'.

```svelte
<script>
  import { Application, Graphics } from 'svelte-pixi'

  let size = 100

  function drawCircle(graphics) {
    graphics.clear()
    graphics.beginFill(0xFF3300)
    graphics.drawCircle(0, 0, size)
    graphics.endFill()
  }

  function drawRectWithStroke(graphics) {
    graphics.clear()
    graphics.lineStyle(4, 0xFFFFFF, 1)
    graphics.beginFill(0x00FF00)
    graphics.drawRect(-50, -50, 100, 100)
    graphics.endFill()
  }
</script>

<Application width={600} height={400}>
  <Graphics
    x={150}
    y={200}
    draw={drawCircle}
    interactive={true}
    eventMode="static"
    on:pointerdown={() => size += 10}
  />

  <Graphics
    x={450}
    y={200}
    draw={drawRectWithStroke}
    tint={0xFFFFFF}
  />
</Application>
```

--------------------------------

### Handle Mouse, Pointer, and Touch Events in Svelte-Pixi

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

This snippet demonstrates how to handle interactive events such as pointerdown, pointerup, pointermove, and click events on display objects within a Svelte-Pixi application. It utilizes Svelte's reactive system to update the UI based on user interactions, including hover states and click counts. The example showcases drag-and-drop functionality and visual feedback for hover effects.

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

  let isHovered = false
  let clickCount = 0
  let dragData = null
  let position = { x: 200, y: 200 }

  function drawButton(graphics) {
    graphics.clear()
    graphics.beginFill(isHovered ? 0xFF6666 : 0xFF0000)
    graphics.drawRoundedRect(-75, -30, 150, 60, 10)
    graphics.endFill()
  }

  function onDragStart(event) {
    dragData = event.data
  }

  function onDragEnd() {
    dragData = null
  }

  function onDragMove(event) {
    if (dragData) {
      const newPosition = dragData.getLocalPosition(event.currentTarget.parent)
      position = { x: newPosition.x, y: newPosition.y }
    }
  }
</script>

<Application width={600} height={400} backgroundColor={0x1099bb}>
  <Container
    x={position.x}
    y={position.y}
    interactive={true}
    eventMode="static"
    on:pointerdown={onDragStart}
    on:pointerup={onDragEnd}
    on:pointerupoutside={onDragEnd}
    on:pointermove={onDragMove}
    on:pointerover={() => isHovered = true}
    on:pointerout={() => isHovered = false}
    on:click={() => clickCount++}
  >
    <Graphics draw={drawButton} />
    <Text
      text={`Clicks: ${clickCount}`}
      anchor={0.5}
      style={{ fill: 'white', fontSize: 20 }}
    />
  </Container>
</Application>
```

--------------------------------

### Create Custom Pixi.js Build

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/guides/reducing-bundle-size.mdx

This JavaScript code exports specific modules from various '@pixi/*' packages to create a minimized pixi.js build. This allows developers to include only the features they need, reducing the overall bundle size. Ensure all listed dependencies are installed.

```javascript
// custom pixi.js file
export * from '@pixi/accessibility'
export * from '@pixi/app'
export * from '@pixi/assets'
export * from '@pixi/basis'
export * from '@pixi/compressed-textures'
export * from '@pixi/core'
export * from '@pixi/display'
export * from '@pixi/events'
export * from '@pixi/extract'
export * from '@pixi/graphics'
export * from '@pixi/mesh'
export * from '@pixi/particle-container'
export * from '@pixi/prepare'
export * from '@pixi/sprite-animated'
export * from '@pixi/sprite-tiling'
export * from '@pixi/sprite'
export * from '@pixi/spritesheet'
export * from '@pixi/text-bitmap'
export * from '@pixi/text'
```

--------------------------------

### Customizing Canvas View in Svelte Pixi Application

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/application.mdx

This example shows how to customize the DOM element where the PixiJS canvas is rendered using the `view` slot. The canvas will be appended as a child to the element provided in the slot. It also includes CSS to style the canvas itself. Dependencies: `svelte-pixi`.

```svelte
<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 Custom Mesh with Geometry and Shader in Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/mesh.mdx

This snippet demonstrates how to create and render a custom mesh using svelte-pixi. It defines geometry with vertex positions and UVs, a custom vertex and fragment shader, and updates uniforms over time. This example is suitable for Svelte applications and requires the 'svelte-pixi' and 'pixi.js' libraries.

```svelte
<script>
  import { Mesh, onTick } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  let rotation = 0

  const geometry = new PIXI.Geometry()
    .addAttribute(
      'aVertexPosition', // the attribute name
      [
        -100,
        -100, // x, y
        100,
        -100, // x, y
        100,
        100,
        -100,
        100,
      ], // x, y
      2,
    ) // the size of the attribute
    .addAttribute(
      'aUvs', // the attribute name
      [
        0,
        0, // u, v
        1,
        0, // u, v
        1,
        1,
        0,
        1,
      ], // u, v
      2,
    ) // the size of the attribute
    .addIndex([0, 1, 2, 0, 2, 3])

  const vertexSrc = `
    precision mediump float;

    attribute vec2 aVertexPosition;
    attribute vec2 aUvs;

    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;

    varying vec2 vUvs;

    void main() {

        vUvs = aUvs;
        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

    }`

  const fragmentSrc = `
    precision mediump float;

    varying vec2 vUvs;

    uniform sampler2D uSampler2;
    uniform float time;

    void main() {

        gl_FragColor = texture2D(uSampler2, vUvs + sin( (time + (vUvs.x) * 14.) ) * 0.1 );
    }`

  const uniforms = {
    uSampler2: PIXI.Texture.from('/assets/bg_mesh.jpg'),
    time: 0,
  }

  const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms)

  onTick((delta) => {
    rotation += 0.01 * delta
    shader.uniforms.time += 0.1 * delta
  })
</script>

<Mesh x={360} y={200} anchor={0.5} scale={2} {geometry} {shader} {rotation} />

```

--------------------------------

### Svelte Pixi ParticleContainer Usage Example

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/particle-container.mdx

Demonstrates how to use the ParticleContainer component in Svelte for rendering a large number of stars. It initializes stars with random positions and updates their scale, anchor, and screen position based on camera movement for a 3D starfield effect. Performance is optimized by directly managing Pixi instances for thousands of components.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { Sprite, onTick, ParticleContainer } from 'svelte-pixi'
  import { onMount } from 'svelte'

  const width = 720
  const height = 400
  const speed = 0.025
  const fov = 20
  const starSize = 0.05

  let container
  let cameraZ = 0
  let amount = 5000
  let stars = []

  // create stars for amount value
  $: {
    // cleanup previous stars
    stars.forEach((star) => star.destroy())

    // create stars
    if (container) {
      stars = new Array(amount).fill(null).map(() => {
        const star = new PIXI.Sprite(PIXI.Texture.from('/assets/star.png'))
        const deg = Math.random() * Math.PI * 2
        const distance = Math.random() * 50 + 1

        star.initX = Math.cos(deg) * distance
        star.initY = Math.sin(deg) * distance
        star.initZ = Math.random() * 1000 + 750

        star.x = star.initX
        star.y = star.initY
        star.z = star.initZ

        updateStar(star)

        return star
      })

      if (stars.length) {
        container.addChild(...stars)
      }
    }
  }

  function updateStar(star) {
    const z = star.z - cameraZ
    const distance = Math.max(0, (2000 - z) / 2000)

    star.scale.set(distance * starSize)
    star.anchor.set(0.5, 0.7)

    star.x = star.initX * (fov / z) * width + width / 2
    star.y = star.initY * (fov / z) * height + height / 2
  }

  // move the camera forward
  onTick((delta) => {
    cameraZ += delta * 10 * speed

    stars.forEach(updateStar)
  })

  onMount(() => {
    // make sure to destroy stars on unmount
    return () => {
      stars.forEach((star) => star.destroy())
    }
  })
</script>

<label class="flex flex-col !mt-0">
  <span class="text-white text-center">Amount: {amount}</span>
  <input type="range" min="0" max="10000" step="100" bind:value={amount} />
</label>

<ParticleContainer
  bind:instance={container}
  autoResize
  properties={{
    scale: true,
    position: true,
    rotation: true,
  }}
/>

```

--------------------------------

### Ticker Usage with Text Updates

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/ticker.mdx

This example demonstrates how to use the Ticker component to update a Text element on each frame. It imports Ticker and Text from 'svelte-pixi' and uses the 'on:tick' event to update frame count and delta time. The Text component displays these values, and its position and style are configured.

```svelte
<script>
  import { Ticker, Text } from 'svelte-pixi'

  let delta = 0
  let frame = 0
</script>

<Ticker
  on:tick={(ev) => {
    frame++
    delta = ev.detail
  }}>
  <Text
    x={360}
    y={200}
    text={`Frame ${frame}\nDelta: ${delta.toFixed(10)}`}
    style={{ fill: 'white' }}
    anchor={0.5} />
</Ticker>
```

--------------------------------

### Animate Sprite using onTick in Svelte Pixi

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/getting-started/usage.mdx

Demonstrates how to create animations by hooking into the PixiJS application's update loop using the `onTick` function. The `onTick` callback receives the time delta since the last frame, allowing for framerate-independent movement. This example animates a sprite in a circular path.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { Sprite, onTick } from 'svelte-pixi'

  let x = 360
  let y = 200

  let time = 0
  onTick((delta) => {
    // delta is the time since the last frame in milliseconds
    // for any kind of movement, you should multiply by delta
    // to ensure it moves at the same speed regardless of framerate
    time += delta * 0.05
    x = 360 + Math.cos(time) * 50
    y = 200 + Math.sin(time) * 50
  })
</script>

<Sprite
  texture={PIXI.Texture.from('/assets/food/lemonpie.png')}
  anchor={0.5}
  {x}
  {y}
  scale={2}
/>
```

--------------------------------

### NineSlicePlane Component Usage in Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/nine-slice-plane.mdx

Demonstrates how to use the NineSlicePlane component in a Svelte application. It requires PixiJS and svelte-pixi to be installed. The component takes a texture and defines stretchable areas via `leftWidth`, `topHeight`, `rightWidth`, and `bottomHeight`. The example dynamically updates the width and height for a visual effect.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { NineSlicePlane, onTick } from 'svelte-pixi'

  let width = 100
  let height = 100
  let counter = 0

  onTick((delta) => {
    counter += delta * 0.04

    width = 100 + Math.cos(counter) * 20
    height = 100 + Math.sin(counter) * 20
  })
</script>

<NineSlicePlane
  x={360}
  y={200}
  texture={PIXI.Texture.from('/assets/nine-slice-blue.png')}
  leftWidth={12}
  topHeight={12}
  rightWidth={12}
  bottomHeight={12}
  {width}
  {height}
  pivot={{ x: width / 2, y: height / 2 }}
  scale={2}
/>
```

--------------------------------

### Render Text with Svelte Pixi

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/text.mdx

Demonstrates how to use the Text component from svelte-pixi to render "Hello World" on the canvas. It showcases basic positioning, text content, anchor point, and style customization like text fill color.

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

<Text
  x={360}
  y={200}
  text="Hello World"
  anchor={0.5}
  style={{
    fill: 'white',
  }}
/>
```

--------------------------------

### Context Helpers for PixiJS Instance Access

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

Access parent PixiJS instances using context helpers within Svelte components. Functions like getApp, getContainer, and getStage allow retrieving the PIXI.Application, the current Container, and the root Stage respectively. This is useful for interacting with the PixiJS rendering context from child components.

```svelte
<script>
  import { Application, Container, Sprite, getApp, getContainer, getStage } from 'svelte-pixi'
  import { onMount } from 'svelte'
  import { Assets } from 'pixi.js'

  let texture

  Assets.load('https://pixijs.com/assets/bunny.png').then(t => texture = t)

  onMount(() => {
    // Access the PIXI.Application instance
    const { app } = getApp()
    console.log('App renderer:', app.renderer)

    // Access the parent container
    const { container } = getContainer()
    console.log('Parent container:', container)

    // Access the stage (root container)
    const { stage } = getStage()
    console.log('Stage:', stage)
  })
</script>

<Application width={400} height={400}>
  <Container x={200} y={200}>
    {#if texture}
      <Sprite {texture} anchor={0.5} />
    {/if}
  </Container>
</Application>
```

--------------------------------

### Get Parent Container Instance with svelte-pixi

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/utilities/get-container.mdx

Retrieves the PIXI.Container instance of the parent component. This is useful for components that need to interact with or manipulate their parent container, such as Sprites or Graphics. It relies on the svelte-pixi library.

```javascript
import { getContainer } from 'svelte-pixi'

const { container } = getContainer()
```

--------------------------------

### Get Renderer Context with JavaScript

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/utilities/get-renderer.mdx

Retrieves the PIXI.Renderer instance and an invalidate function from the parent Renderer component. The `renderer` is a PIXI.Renderer object, and `invalidate` is a function to trigger a manual render if using Svelte Pixi's Application.

```javascript
import { getRenderer } from 'svelte-pixi'

const { renderer, invalidate } = getRenderer()
```

--------------------------------

### Initialize PIXI.Assets with Base Path

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/assets-loader.mdx

Shows how to initialize PIXI.Assets with a custom base path before rendering the AssetsLoader. The initialization is asynchronous and must be awaited. This ensures that all subsequent asset loading uses the specified base path. It requires svelte-pixi and pixi.js.

```svelte
<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  // init is async, so we must await it
  const initPromise = PIXI.Assets.init({
    basePath: '/assets',
  })
</script>

{#await initPromise then}
  <Application>
    <AssetsLoader assets={['/great-success.png']}>
      <Sprite anchor={0.5} texture={PIXI.Texture.from('/great-success.png')} />
    </AssetsLoader>
  </Application>
{/await}
```

--------------------------------

### Basic Renderer Usage with Ticker

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/renderer.mdx

Demonstrates the basic usage of the Renderer component, binding to its instance and stage, and utilizing a Ticker to manually control the render loop. It includes a DraggableCircle and Text component within a Container.

```svelte
<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>
```

--------------------------------

### Display Animation from Spritesheet with Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/animated-sprite.mdx

Demonstrates how to display an animation using a spritesheet in svelte-pixi. It requires loading the spritesheet using AssetsLoader and then providing an array of textures to the AnimatedSprite component. The animation can be controlled with properties like 'playing' and 'animationSpeed'.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { AnimatedSprite, AssetsLoader } from 'svelte-pixi'
</script>

<AssetsLoader assets={['/assets/adventurer-spritesheet.json']}>
  <AnimatedSprite
    x={360}
    y={200}
    textures={[
      PIXI.Texture.from('adventurer-idle-00.png'),
      PIXI.Texture.from('adventurer-idle-01.png'),
      PIXI.Texture.from('adventurer-idle-02.png'),
    ]}
    playing
    animationSpeed={0.1}
    anchor={0.5}
    scale={3}
  />
</AssetsLoader>
```

--------------------------------

### AssetsLoader Component for Asset Loading with Progress

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

Load assets with progress tracking and conditional rendering. This component uses Svelte-Pixi and PixiJS to manage asset loading. It accepts an array of assets to load, a bundle name, and an option to unload assets after loading. It provides progress updates and allows rendering of content only after assets are loaded.

```svelte
<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import { Assets } from 'pixi.js'

  const assetsToLoad = [
    'https://pixijs.com/assets/bunny.png',
    'https://pixijs.com/assets/bg_grass.jpg',
    { alias: 'spritesheet', src: 'https://pixijs.com/assets/spritesheet.json' }
  ]

  function handleComplete() {
    console.log('All assets loaded!')
  }

  function handleProgress(progress) {
    console.log(`Loading: ${(progress * 100).toFixed(0)}%`)
  }
</script>

<Application width={600} height={400}>
  <AssetsLoader
    assets={assetsToLoad}
    bundleName="game-assets"
    unload={true}
    on:complete={handleComplete}
    on:progress={(e) => handleProgress(e.detail)}
    let:progress
  >
    <svelte:fragment slot="loading">
      <Text
        text={`Loading... ${(progress * 100).toFixed(0)}%`}
        x={300}
        y={200}
        anchor={0.5}
        style={{ fill: 'white', fontSize: 32 }}
      />
    </svelte:fragment>

    <Sprite
      texture={Assets.get('https://pixijs.com/assets/bunny.png')}
      x={300}
      y={200}
      anchor={0.5}
      scale={3}
    />
  </AssetsLoader>
</Application>
```

--------------------------------

### SveltePixi: Display Styled Text with Text Component

Source: https://context7.com/mattjennings/svelte-pixi/llms.txt

This snippet demonstrates using the SveltePixi Text component to display styled text. It allows for customization of font properties, colors, effects like drop shadows, and text wrapping. Dependencies include 'svelte-pixi'.

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

  let message = 'Hello PixiJS!'
  let fontSize = 48

  const textStyle = {
    fontFamily: 'Arial',
    fontSize: fontSize,
    fill: ['#ffffff', '#00ff99'],
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 440
  }
</script>

<Application width={500} height={300} backgroundColor={0x1099bb}>
  <Text
    text={message}
    x={250}
    y={150}
    anchor={0.5}
    style={textStyle}
    rotation={0.1}
    interactive={true}
    eventMode="static"
    on:pointerdown={() => fontSize += 5}
  />
</Application>
```

--------------------------------

### Render a Sprite with Texture in Svelte

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/sprite.mdx

Demonstrates how to use the Sprite component from svelte-pixi to render an image on the screen. It requires PixiJS to be imported and specifies properties like position, texture, anchor, and scale.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { Sprite } from 'svelte-pixi'
</script>

<Sprite
  x={360}
  y={200}
  texture={PIXI.Texture.from('/assets/adventurer.png')}
  anchor={0.5}
  scale={3}
/>
```

--------------------------------

### Render Bitmap Text with Svelte Pixi

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/api/components/bitmap-text.mdx

This snippet demonstrates how to use the BitmapText component in Svelte Pixi to render text. It requires loading font assets beforehand using AssetsLoader and specifies font properties like name, size, and alignment. The text can include line breaks.

```svelte
<script>
  import { Application, AssetsLoader, BitmapText } from 'svelte-pixi'
</script>

<AssetsLoader assets={['/assets/desyrel.xml']}>
  <BitmapText
    text={'the fox jumps over\nthe lazy dog'}
    x={380}
    y={200}
    anchor={0.5}
    style={{ fontName: 'Desyrel', fontSize: 48, align: 'center' }}
  />
</AssetsLoader>
```

--------------------------------

### Render Many Sprites with Svelte Components

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/guides/optimizing-performance.mdx

Demonstrates rendering a large number of stars using individual Svelte Sprite components. This approach can lead to performance issues due to excessive prop updates and component lifecycle management for thousands of elements. It serves as a baseline for performance comparison.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { Sprite, onTick } from 'svelte-pixi'

  const width = 720
  const height = 400
  const speed = 0.025
  const fov = 20
  const starSize = 0.05

  let cameraZ = 0
  let amount = 100

  // create an array describing each star's initial position
  $: stars = new Array(amount).fill(null).map(() => {
    const deg = Math.random() * Math.PI * 2
    const distance = Math.random() * 50 + 1

    return {
      x: Math.cos(deg) * distance,
      y: Math.sin(deg) * distance,
      z: Math.random() * 1000 + 750,
    }
  })

  // move the camera forward
  onTick((delta) => {
    cameraZ += delta * 10 * speed
  })
</script>

{#each stars as star}
  <!-- calculate new position based on cameraZ -->
  {@const z = star.z - cameraZ}
  {@const distance = Math.max(0, (2000 - z) / 2000)}

  <Sprite
    texture={PIXI.Texture.from('/assets/star.png')}
    anchor={{ x: 0.5, y: 0.7 }}
    scale={{ x: distance * starSize, y: distance * starSize }}
    x={star.x * (fov / z) * width + width / 2}
    y={star.y * (fov / z) * height + height / 2}
  />
{/each}

<label class="flex flex-col !mt-0">
  <span class="text-white text-center">Amount: {amount}</span>
  <input type="range" min="0" max="10000" step="100" bind:value={amount} />
</label>
```

--------------------------------

### Preload Assets with Svelte Pixi AssetsLoader

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/getting-started/usage.mdx

Illustrates how to preload multiple assets using the `AssetsLoader` component in Svelte Pixi. This component displays a loading state (via the `loading` slot) until all specified assets are ready, after which it renders its default content. This prevents assets from appearing one by one.

```svelte
<script>
  import * as PIXI from 'pixi.js'
  import { Application, Text, Sprite, AssetsLoader } from 'svelte-pixi'

  let images = [
    '/assets/food/lemonpie.png',
    '/assets/food/strawberrycake.png',
    '/assets/food/cheesecake.png',
  ]
</script>

<Application width={400} height={400}>
  <AssetsLoader assets={images}>
    <slot slot="loading">
      <Text
        text="Loading..."
        anchor={0.5}
        x={200}
        y={200}
        style={{
          fill: 'white',
        }}
      />
    </slot>

    {#each images as image, i}
      <Sprite
        texture={PIXI.Texture.from(image)}
        anchor={0.5}
        x={150 + i * 50}
        y={200}
        scale={2}
      />
    {/each}
  </AssetsLoader>
</Application>
```

--------------------------------

### Configure Vite Alias for Custom Pixi.js

Source: https://github.com/mattjennings/svelte-pixi/blob/master/docs/src/content/docs/guides/reducing-bundle-size.mdx

This JavaScript configuration updates the Vite build process to use the custom pixi.js file. By setting up an alias, Vite will resolve 'pixi.js' requests to the custom file, ensuring that the optimized build is used. The `optimizeDeps.exclude` setting is crucial for SveltePixi to correctly adopt the alias.

```javascript
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  /* ... */

  optimizeDeps: {
    // required so svelte-pixi will use pixi.js alias
    exclude: ['svelte-pixi'],
  },
  resolve: {
    alias: {
      // update path to wherever your pixi.js is
      'pixi.js': '/src/pixi.js',
    },
  },
})
```