User Interface

To create user interface first need to creat instance of Canvas (Scene analog for ui) and add it to existing node. Next Add UIElement to Canvas as Root

UIElement - defines area of block or size of ui element and serves as hierarchy element. All consecutive UIElement in this canvas must be set as child to parent UIElement.

UIElement has property RectTransform which coresponds its on screen position and size. If UIElement have parent element size and position calculates relative to parent's RectTransform.

To use UIElement add component via method AddComponent, component must be derieved from VisualComponent.

Available following Interactable Components:

• ButtonComponent - Button with OnClick Event
• CheckboxComponent - Checkbox with OnChange Event. Uses Self UIElement Area for interaction
• TextInputComponent - Input Field than accept text
• SliderCompoent - Slider with OnValueChanged event. Value range 0 - 1.
• ScrollBoxComponent - Container that can be scrolled

Available following non Interactable Components:

• RawImage - Image Drawing component
• UIMaskComponent - Stencil mask that restrict child drawing area. If mask is placed as child to another mask, it will override parent mask area

Example:

var canvas = (Canvas)Node.AddComponent<Canvas>();
var ui0 = new UIElement();
ui0.GetTransform.anchorMax = new Vector2(0f, 1f);
ui0.GetTransform.anchorMin = new Vector2(0f, 1f);
ui0.GetTransform.offsetMax = new Vector2(400, 0);
ui0.GetTransform.offsetMin = new Vector2(0, -400);
canvas.Root = ui0;
canvas.AddObject(ui0);

var ui1 = new UIElement();
ui1.GetTransform.anchorMax = new Vector2(0f, 1f);
ui1.GetTransform.anchorMin = new Vector2(0f, 1f);
ui1.GetTransform.offsetMax = new Vector2(130, 0);
ui1.GetTransform.offsetMin = new Vector2(0, -200);
var button1 = (ButtonComponent)ui1.AddComponent<ButtonComponent>();
ui1.SetParent(ui0);