Frame

A plain rectangle: panels, bars and backgrounds.

• Inherits: GuiObject → Instance
• Creatable: Yes: new Frame(), or Instance.new('Frame', parent).
• Replication: Replicated: clients get a copy, and changes the server makes reach them.

A Frame is a GuiObject with nothing added: use it to group other UI and draw boxes behind it.

Properties

Inherited from GuiObject: position, positionScale, size, sizeScale, anchorPoint, backgroundColor, backgroundTransparency, cornerRadius, visible, zIndex

Inherited from Instance: name, archivable, id, className, parent, destroyed

Methods

Inherited from Instance: getPropertyChangedSignal, setAttribute, getAttribute, getAttributes, getAttributeChangedSignal, getChildren, getDescendants, findFirstChild, findFirstChildOfClass, findFirstChildWhichIsA, findFirstAncestor, findFirstAncestorWhichIsA, waitForChild, isA, isDescendantOf, isAncestorOf, getFullName, clearAllChildren, destroy, clone, toString

Events

Inherited from Instance: changed, childAdded, childRemoved, descendantAdded, descendantRemoving, ancestryChanged, destroying, attributeChanged

Examples

A health bar

import {
  Character,
  Color3,
  Frame,
  PlayerGui,
  ScreenGui,
  Vector2,
  task,
  waitForChild,
  waitForLocalPlayer,
} from '@rally/sdk';

task.spawn(async () => {
  const me = await waitForLocalPlayer();
  const gui = new ScreenGui();
  const back = new Frame();
  back.position = new Vector2(16, -16);
  back.positionScale = new Vector2(0, 1); // bottom left
  back.anchorPoint = new Vector2(0, 1);
  back.size = new Vector2(200, 16);
  back.backgroundColor = Color3.fromHex('#1d2b53');
  back.cornerRadius = 8;
  back.parent = gui;

  const fill = new Frame();
  fill.sizeScale = new Vector2(1, 1);
  fill.size = new Vector2(0, 0);
  fill.backgroundColor = Color3.fromHex('#4ade80');
  fill.cornerRadius = 8;
  fill.parent = back;
  gui.parent = await waitForChild(me, 'PlayerGui', PlayerGui);

  const watch = (character: Character) => {
    const update = () => {
      fill.sizeScale = new Vector2(Math.max(0, character.health / character.maxHealth), 1);
    };
    character.getPropertyChangedSignal('health').connect(update);
    update();
  };
  if (me.character) watch(me.character);
  me.characterAdded.connect(watch);
});