Getting Started

1. Creating a Stage

The Stage component is the root of your WebGL PixiJS application. It creates a canvas element and appends it to the host element.

<script lang="ts">
  import { Stage } from 'glixy';

  let host: HTMLElement | null = $state(null);
</script>

<div bind:this={host} style="background-color: #111111;">
  {#if host}
    <Stage {host} background="#111111">
      <!-- rendered contents will go there -->
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

2. Rendering stuff

Now that we have a stage, let's render some stuff on it. We can use the Sprite component to render an image.

<script lang="ts">
  import { Sprite, Stage } from 'glixy';

  let host: HTMLElement | null = $state(null);
</script>

<div bind:this={host} style="background-color: #111111;">
  {#if host}
    <Stage {host} background="#111111">
      <Sprite
        texture="/bunny.png"
        x={100}
        y={100}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

3. Updating stuff

Render loop underneath won't run if there are no updates to render, but once we update the x or y properties, the render loop will run and update the position of the sprite.

<script lang="ts">
  import { Sprite, Stage } from 'glixy';

  let host: HTMLElement | null = $state(null);
  let x = $state(10);
  let y = $state(10);

  $effect(() => {
    setInterval(() => {
      x = Math.random();
      y = Math.random();
    }, 1000);
  });
</script>

<div bind:this={host} style="background-color: #111111;">
  {#if host}
    <Stage {host} background="#111111">
      <Sprite
        texture="/bunny.png"
        {x}
        {y}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

4. Result

You should see a bunny moving around the stage.

<script lang="ts">
  import { Sprite, Stage } from 'glixy';

  let host: HTMLElement | null = $state(null);
  let x = $state(10);
  let y = $state(10);
  
  $effect(() => {
    setInterval(() => {
      x = Math.random();
      y = Math.random();
    }, 1000);
  });
</script>

<div bind:this={host} style="background-color: #111111;">
  {#if host}
    <Stage {host} background="#111111">
      <Sprite
        anchor={{ x: 0.5, y: 0.5 }}
        texture="/bunny.png"
        x={x * hostWidth}
        y={y * hostHeight}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

5. Bonus (some magic)

What if we were able to connect HTML rendered content with WebGL rendered content?

<script lang="ts">
  import { Sprite, Stage } from 'glixy';

  let host: HTMLElement | null = $state(null);
  let speedX = $state(10);
  let speedY = $state(10);
  let updatePositionIntervalMS = $state(1000);
  let visible = $state(true);
    
  $effect(() => {
    speedX = Math.random();
    speedY = Math.random();

    const speedyInterval = setInterval(() => {
      speedX = Math.random();
      speedY = Math.random();
    }, updatePositionIntervalMS);

    return () => clearInterval(speedyInterval);
  });
</script>

<div bind:this={host} style="background-color: #111111;">
  {#if host}
    <Stage {host} background="#111111">
      <Sprite
        anchor={{ x: 0.5, y: 0.5 }}
        texture="/bunny.png"
        x={speedX * hostWidth}
        y={speedY * hostHeight}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>