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

    Interface KaylaRect

    A convenient facade for the rectangle entity associated with the current Kayla component.

    Provides direct, mutable access to position, size and basic properties of the underlying LEA.RectLeaEntity. Most properties are getters/setters that forward to the internal entity.

    Important notes:

    • pos is a live reference to a LEA.Vector2 instance — mutating it (.x, .y, .add(...), etc.) directly affects the entity's position without triggering a component refresh.
    • Changing width / height affects collision & drawing bounds.
    • z controls draw order (higher = drawn later / on top).
    const rect = useRect();

    // Direct mutation — no refresh
    rect.pos.x += 120 * dt;
    rect.pos.y = 400;
    rect.width = 64;
    rect.z = 10;           // bring to front

    // Or use convenience setters
    rect.x = 200;
    rect.y += 5;
    interface KaylaRect {
        get color(): string;
        set color(s: string): void;
        getRaw(): RawKaylaRect;
        get entity(): KaylaRectEntity;
        isCollidingWith(rect: KaylaInternalRect): boolean;
        get setFlag(): (key: string, value: unknown) => Map<string, unknown>;
        get getFlag(): (key: string) => unknown;
        get removeFlag(): (key: string) => boolean;
        isHovered(): boolean;
        get pos(): Vector2;
        get x(): number;
        set x(s: number): void;
        get y(): number;
        set y(s: number): void;
        get width(): number;
        set width(s: number): void;
        get height(): number;
        set height(s: number): void;
        get z(): number;
        set z(s: number): void;
        get left(): number;
        set left(s: number): void;
        get right(): number;
        set right(s: number): void;
        get top(): number;
        set top(s: number): void;
        get bottom(): number;
        set bottom(s: number): void;
        get toLocal(): (worldVec: Vector2) => Vector2;
        get toWorld(): (localVec: Vector2) => Vector2;
    }

    Hierarchy (View Summary)

    Index

    Accessors

    color entity setFlag getFlag removeFlag pos x y width height z left right top bottom toLocal toWorld

    Methods

    getRaw isCollidingWith isHovered

    Accessors

    • get color(): string

      Default behavior color

      Returns string

    • set color(s: string): void

      Parameters

      • s: string

      Returns void

    • get setFlag(): (key: string, value: unknown) => Map<string, unknown>

      Returns (key: string, value: unknown) => Map<string, unknown>

    • get getFlag(): (key: string) => unknown

      Returns (key: string) => unknown

    • get removeFlag(): (key: string) => boolean

      Returns (key: string) => boolean

    • get pos(): Vector2

      The position of the rectangle's top-left corner (or center, depending on LEA's origin convention).

      This is a live reference to a LEA.Vector2 instance. Mutating .x, .y, Using Vector2 methods (.add(), .sub(), .scale(), etc.) will NEVER mutate the vector unless the .override(x, y) immediately updates the entity's position without causing a component refresh.

      Returns Vector2

    • get x(): number

      X-coordinate of the rectangle (alias for pos.x). Writing to this property immediately updates pos.x.

      Returns number

    • set x(s: number): void

      Parameters

      • s: number

      Returns void

    • get y(): number

      Y-coordinate of the rectangle (alias for pos.y). Writing to this property immediately updates pos.y.

      Returns number

    • set y(s: number): void

      Parameters

      • s: number

      Returns void

    • get width(): number

      Width of the rectangle (affects collision & rendering bounds).

      Returns number

    • set width(s: number): void

      Parameters

      • s: number

      Returns void

    • get height(): number

      Height of the rectangle (affects collision & rendering bounds).

      Returns number

    • set height(s: number): void

      Parameters

      • s: number

      Returns void

    • get z(): number

      Z-index / draw order. Higher values are drawn later (appear on top).

      Returns number

      0
    • set z(s: number): void

      Parameters

      • s: number

      Returns void

    • get left(): number

      Left edge of the rectangle from pos.x and width. Writing to this property immediately updates the used properties.

      Returns number

    • set left(s: number): void

      Parameters

      • s: number

      Returns void

    • get right(): number

      Right edge of the rectangle from pos.x and width. Writing to this property immediately updates the used properties.

      Returns number

    • set right(s: number): void

      Parameters

      • s: number

      Returns void

    • get top(): number

      Top edge (flipped Y) of the rectangle from pos.y and height. Writing to this property immediately updates the used properties.

      Returns number

    • set top(s: number): void

      Parameters

      • s: number

      Returns void

    • get bottom(): number

      Top edge (flipped Y) of the rectangle from pos.y and height. Writing to this property immediately updates the used properties.

      Returns number

    • set bottom(s: number): void

      Parameters

      • s: number

      Returns void

    • get toLocal(): (worldVec: Vector2) => Vector2

      Converts a world position to local space relative to this entity.

      Returns (worldVec: Vector2) => Vector2

      Local position

        • (worldVec: Vector2): Vector2

        • Converts a world position to local space relative to this entity.

          Parameters

          Returns Vector2

          Local position

    Methods

    • Checks whether this rectangle is currently colliding (overlapping or touching) with another rectangle.

      Uses axis-aligned bounding box (AABB) collision detection — very fast and suitable for most 2D games.

      Important:

      • Both rectangles must belong to active entities in the same scene.
      • Collision is based on the current pos, width, height values (no rotation support by default).
      • Touching edges are considered colliding (inclusive bounds check).
      • Returns false if either entity is missing or not yet mounted.

      Parameters

      Returns boolean

      true if the rectangles overlap or touch, false otherwise

      const playerRect = useRect();
      const enemyRect = otherEnemy.exportsRef.current?.rect; // assuming exported via useExports

      useTick(dt => {
        // move player...

        if (enemyRect && playerRect.isCollidingWith(enemyRect)) {
          // take damage, play sound, etc.
          playerRect.z = 999; // visual feedback: bring to front
        }
      });

      LEA.RectLeaEntity.isCollidingWith — the underlying LEA implementation

    Settings

    Member Visibility

    On This Page

    Accessors
    Methods