Rectangle
The Rectangle
is a sub-type of the Text data type used to store four decimal values representing a rectangle. The components represent X
, Y
, Width
, and Height
, in that order. Values are separated by spaces and must be parsed from the string before use at runtime.
UI Behavior
This field is represented in the editor as a group of input fields labeled X
, Y
, Width
, and Height
. Each component accepts decimal numbers.
Validation Behavior
The editor ensures that a valid rectangle value is entered and only stores properly formatted values. However, there is no runtime validation or built-in parsing logic, so values must be parsed manually in game code.
Example
"50.0 100.0 200.5 25.0"
Parsing
Unity (C#) example:
var uiElement = gameData.AllUIElements.Get("HealthBar"); // -> UIElement
var boundsString = uiElement.Bounds; // -> "50.0 100.0 200.5 25.0"
var components = boundsString.Split(' ');
var bounds = new Rect(
float.Parse(components[0]), // X
float.Parse(components[1]), // Y
float.Parse(components[2]), // Width
float.Parse(components[3]) // Height
);
Unreal Engine (C++) example:
auto UIElement = GameData->AllUIElements->Find(TEXT("HealthBar")); // -> UUIElement*
FString BoundsString = UIElement->Bounds; // -> "50.0 100.0 200.5 25.0"
TArray<FString> Components;
BoundsString.ParseIntoArray(Components, TEXT(" "));
FSlateRect Bounds(
FCString::Atof(*Components[0]), // X
FCString::Atof(*Components[1]), // Y
FCString::Atof(*Components[2]), // Width
FCString::Atof(*Components[3]) // Height
);
TypeScript example:
let uiElement = gameData.uiElementsAll.find("HealthBar"); // -> UIElement
let boundsString = uiElement.Bounds; // -> "50.0 100.0 200.5 25.0"
let parts = boundsString.split(" ").map(x => parseFloat(x));
let bounds = { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };
Haxe example:
var uiElement = gameData.uiElementsAll.get("HealthBar"); // -> UIElement
var boundsString = uiElement.Bounds; // -> "50.0 100.0 200.5 25.0"
var parts = boundsString.split(" ").map(Std.parseFloat);
var bounds = { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };