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="https://pixijs.com/assets/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="https://pixijs.com/assets/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="https://pixijs.com/assets/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="https://pixijs.com/assets/bunny.png"
                x={speedX * hostWidth}
                y={speedY * hostHeight}
            />
        </Stage>
    {:else}
        <div>Loading stage...</div>
    {/if}
</div>