Source Code github [#142]Created with Sketch.

Sprite

Overview

The Sprite component displays images and textures in your Glixy application. It supports various image formats and provides powerful features like object fitting, transformations, interactions, and opacity control.

Loading...
<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} 
        width={200}
        height={150}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Sprite component accepts the following properties:

texture (string, required)

Path to the image file. Supports PNG, JPG, GIF, and other common image formats.

x (number, default: 0)

X position of the sprite in pixels.

y (number, default: 0)

Y position of the sprite in pixels.

zIndex (number, default: 0)

Z-index for layering. Higher values appear on top.

width (number, default: 0)

Width of the sprite. If 0, uses the original image width.

height (number, default: 0)

Height of the sprite. If 0, uses the original image height.

rotation (number, default: 0)

Rotation angle in radians.

opacity (number, default: 1)

Opacity value between 0 (transparent) and 1 (opaque).

scale (object, default: {x: 1, y: 1})

Scale factor for the sprite.

anchor (object, default: {x: 0, y: 0})

Relative anchor point for transformations. {x: 0.5, y: 0.5} centers the anchor.

objectFit ("fill" | "cover" | "contain", default: "fill")

How the image should be resized to fit the specified dimensions:

  • fill : Stretch to fill exactly (may distort)
  • cover : Scale to cover entire area (may crop)
  • contain : Scale to fit within area (may have empty space)

Interaction Props

The Sprite component supports mouse and pointer interactions:

onpointerover (function)

Called when the pointer enters the sprite area.

onpointerout (function)

Called when the pointer leaves the sprite area.

onpointerdown (function)

Called when the pointer is pressed down on the sprite.

onpointermove (function)

Called when the pointer moves over the sprite.

onpointerup (function)

Called when the pointer is released over the sprite.

Usage Notes

Important considerations when using the Sprite component:

  • Sprite must be placed inside a Stage or Container
  • The texture path should be accessible from your application
  • Use objectFit to control how images are resized
  • Interactions automatically make the sprite interactive
  • Anchor points affect rotation and scaling behavior
<- Previous Page

Container

 Next Page ->

Text