Source Code github [#142]Created with Sketch.

Container

Overview

The Container component is a grouping element that allows you to organize and transform multiple child elements together. It's similar to a <div> in HTML - it provides a way to group elements and apply transformations like position, rotation, and scale to all children at once.

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

<div bind:this={host} class="w-full h-96">
  {#if host}
    <Stage {host}>
      <Container x={100} y={100} rotation={0.5}>
        <Sprite texture="/image1.png" x={0} y={0} />
        <Sprite texture="/image2.png" x={50} y={50} />
      </Container>
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Container component accepts the following transformation properties:

x (number, default: 0)

X position of the container in pixels.

y (number, default: 0)

Y position of the container in pixels.

rotation (number, default: 0)

Rotation angle in radians. Use Math.PI / 4 for 45 degrees.

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

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

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

Scale factor for the container and all its children. {x: 2, y: 2} doubles the size.

Usage Notes

Important considerations when using the Container component:

  • Container must be placed inside a Stage or another Container
  • All transformations applied to a Container affect its children
  • Child element positions are relative to the Container's position
  • Containers can be nested to create complex hierarchies
  • Use Containers to group related elements for easier management
<- Previous Page

Stage

 Next Page ->

Sprite