@kayelaa/canvas API - v0.2.15
    Preparing search index...

    Variable LayerConst

    Layer: FC<KaylaLayerProps> = ...

    Defines a named rendering layer with optional transform, blend mode, visibility, and draw order.

    <Layer> is a special component that groups its children into a separate rendering pass. It allows you to:

    • Control draw order between major groups of entities (via z)
    • Apply coordinate transforms (camera, zoom, scroll, rotation) to an entire subtree
    • Change blending behavior for the whole layer
    • Toggle visibility of large parts of the scene without unmounting components

    Coordinate system behavior:

    • If transform is provided, all pointer coordinates delivered to usePointer / useGlobalPointer inside this layer (and its descendants) are automatically transformed into the layer-local coordinate system.
    • The automatic hit-test for usePointer also happens in layer-local space.
    • Without transform (identity/default), coordinates remain in world space.

    Important notes:

    • Layers are not nested in the traditional sense — each <Layer> creates an independent rendering group.
    • Multiple <Layer> components with the same name will share the same layer configuration (last one wins for most properties).
    • The rootFiber of the layer is set to the fiber of the first <Layer name="..." component encountered with that name.
    • Children inside <Layer> still participate in normal component lifecycle, ticking, painting, pointer handling, etc.
    // Simple UI overlay that draws on top
    <Layer name="ui" z={1000} visible={true}>
      <HUD />
      <PauseMenu />
    </Layer>

    // Zoomable / scrollable map area
    function MapView() {
      const zoom = useSelf(() => ({ scale: 1.8, offset: new LEA.Vector2(120, 80) }));

      const matrix = new KMatrix2D();
      matrix.translateSelf(zoom.offset.x, zoom.offset.y);
      matrix.scaleSelf(zoom.scale, zoom.scale);

      return (
        <Layer
          name="world-map"
          z={10}
          transform={matrix}
          blend="source-over"
        >
          <BackgroundTiles />
          <Player />
          <Enemies />
          {// Pointer events inside here receive map-local coordinates }
        </Layer>
      );
    }

    Settings

    Member Visibility