Source Code github [#142]Created with Sketch.

Stage

Overview

The Stage component is the root container for all Glixy elements. It initializes a PixiJS Application and provides the rendering context for all child elements. Every Glixy application must start with a Stage component.

<script>
  import { Stage, Sprite } from 'glixy';
  
  let host: HTMLElement | null = $state(null);
</script>

<div bind:this={host} class="w-full h-96">
  {#if host}
    <Stage {host}>
      <Sprite texture="/image.png" x={100} y={100} />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Stage component accepts all PixiJS Application initialization options plus the following:

host (HTMLElement, required)

The DOM element that will contain the PixiJS canvas. The Stage will automatically resize to fit this container.

mounted (boolean, bindable)

A bindable property that becomes true when the PixiJS Application is fully initialized and ready to render child elements.

width (number, optional)

Initial width of the canvas. If not specified, will resize to the host container.

height (number, optional)

Initial height of the canvas. If not specified, will resize to the host container.

backgroundColor (number, optional)

Background color of the canvas as a hex number (e.g., 0x1099bb ).

backgroundAlpha (number, optional)

Background alpha/opacity value between 0 and 1.

resolution (number, optional)

Rendering resolution. Defaults to window.devicePixelRatio for crisp rendering on high-DPI displays.

antialias (boolean, optional)

Enable antialiasing for smoother graphics. Default is false .

Usage Notes

Important considerations when using the Stage component:

  • The Stage component must be the root container for all other Glixy elements
  • Nested Stage components are not supported and will throw an error
  • Always wait for the mounted prop to be true before rendering child elements
  • The canvas will automatically resize to match the host container
  • The Stage uses a 60fps render loop that only updates when changes are detected
<- Previous Page

Getting Started

 Next Page ->

Container