Editor API
Return to top
UserWidget
Edit

UI / UserWidget

UserWidget Class ​

Custom Control

Collection of UI widget, prefab UI

Hierarchy ​

Table of contents ​

Properties ​

click

Properties ​

onCustomPropertyChange: Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>> other
Monitor custom attribute synchronization events

Accessors ​

focusable(): boolean other
Get whether to respond to keyboard focus events
rootContent(): Canvas other
Get the root Canvas
safeAreaEnable(): boolean other
Is it suitable for safe zones
click

Accessors ​

alignPosition(): Readonly<Vector2> other
Get the align position of the widget. When the align method is right align, bottom align, and center align, the value of alignPosition is different from that of position;
autoSizeHorizontalEnable(): boolean other
Get whether to automatically set the size horizontally
autoSizeVerticalEnable(): boolean other
Get whether to set the size automatically vertical
cachedGeometry(): Geometry other
Get the previous Get TickSpaceGeometry
constraints(): Readonly<UIConstraintAnchors> other
Get the layout of the control
desiredSize(): Vector2 other
Obtain expected size
enable(): boolean other
Is it available
guid(): string other
Get the widget GUID
isHovered(): boolean other
Is it hovered
mouseCursor(): MouseCursor other
Get the cursor type on the widget
name(): string other
Get Name
paintSpaceGeometry(): Geometry other
Get the last geometric information used to render the Widget
parent(): Widget other
Get parent node
pivot(): Vector2 other
Get the position of the widget anchor. This property determine the relative position of the widget graph and the anchor; At (0,0), the anchor point is located in the upper left corner of the control; (0.5,0.5), the anchor is at the center of the widget
position(): Readonly<Vector2> other
Get the position of the control
renderOpacity(): number other
Obtain rendering transparency
renderScale(): Vector2 other
Get rendering scaling
renderShear(): Vector2 other
Obtain rendering misalignment deformation
renderTransformAngle(): number other
Obtain the rendering angle
renderTransformPivot(): Vector2 other
Get Render anchor
size(): Vector2 other
Get size
tickSpaceGeometry(): Geometry other
Retrieve the last geometric information used to drive Widget Tick
transform(): Readonly<UITransform> other
Obtain the size and position of the control
visibility(): SlateVisibility other
Get visibility
visible(): boolean other
Is it visible
zOrder(): number other
Get Zorder

Methods ​

addToViewport(zOrder: number): void other
Add to screen
removeRootContent(): void other
Removing the root Canvas will destroy it and make it unusable again
newObject(parent?: Canvas): UserWidget other
Create UserWidget widget
click

Methods ​

addChild(child: Widget): void other
Add child nodes
clone(position: Vector2, Parent?: any): Widget other
Clone the UI widget and its child nodes to the specified parent widget position (default to its parent node)
destroyObject(): void other
Remove and destroy immediately. Cannot be used again
equal(that: Widget): boolean other
Determine if it is the same object
findChildByPath(inPath: string): Widget other
Find nodes by relative path
getChildAt(index: number): Widget other
What is the position node to obtain
getChildByName<T: extends Widget<T>>(name: string): T: extends Widget<T> other
Search for nodes by name
getChildrenCount(): number other
Obtain the number of child nodes
getCustomProperties(): string[] other
Get all customize property
getCustomProperty<T: extends CustomPropertyType>(propertyName: string): T: extends CustomPropertyType other
Get customize property
getCustomPropertyChangeDelegate(property): Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>> other
Event proxy triggered when a given object property is modified
invalidateLayoutAndVolatility(): void other
Immediately trigger re rendering and layout calculation
removeAllChildren(): void other
Clearing all child nodes will destroy the UI and render it unusable
removeChild(child: Widget): void other
Removing a node will destroy the UI and make it unusable
removeChildAt(index: number): void other
Removing the third node will destroy the UI and render it unusable
removeObject(): void other
Immediately remove and add to the root node for reuse
serialize(): string other
Serialize UI widget
setCustomProperty(propertyName: string, value: undefined CustomPropertyType): void other
Set custom attributes
deserialize(Data: string, Parent?: Widget): Widget other
Deserialize UI

Properties ​

Accessors ​

focusable ​

• get focusable(): boolean other

• set focusable(isFocus): void other

Get whether to respond to keyboard focus events

Returns ​

booleanReturn the focus event of the corresponding keyboard

Set whether to respond to keyboard focus events

Parameters ​

isFocus booleanUsage: Is it appropriate

rootContent ​

• get rootContent(): Canvas other

• set rootContent(content): void other

Get the root Canvas

Returns ​

CanvasReturn to the root Canvas

Set the root Canvas of the UI

Parameters ​

content CanvasUsage: Content of the root UI

safeAreaEnable ​

• get safeAreaEnable(): boolean other

• set safeAreaEnable(isEnable): void other

Is it suitable for safe zones

Returns ​

booleanAdapted or not

Is it suitable for safe zones

Parameters ​

isEnable booleanUsage: Is it compatible

Methods ​

addToViewport ​

• addToViewport(zOrder): void other

Add to screen

Parameters ​

zOrder numberUsage: Add hierarchical relationship to screen range: No restrictions type: Integer

Usage example: Create a script called AccountExample, place it in the object bar, open the script, modify the original content to the following, save and run the game, the user's avatar will be displayed in the upper right corner of the screen, and it will be a white image in PC environment

ts
@Component
export default class AccountExample extends Script {

    protected onStart(): void {
        if (!SystemUtil.isClient()) return;
        let button = new ButtonUI();
    }
}

class ButtonUI {
    public button:StaleButton;

    constructor() {
        this.creatUI();
    }

    private creatUI() {
        let size = WindowUtil.getViewportSize();

        // Create a UI object
        let ui = UserWidget.newObject();
        // Add UI to screen
        ui.addToViewport(1);

        // Create a canvas component
        let canvas = Canvas.newObject();
        canvas.size = new Vector2(1920, 1080);
        canvas.position = Vector2.zero;
        // Set Ui's root canvas to canvas
        ui.rootContent = canvas;

        this.button = StaleButton.newObject(canvas);
        this.button.size = new Vector2(size.x / 14, size.y / 20);
        this.button.text = "StaleButton";
        this.button.fontSize = 18;
        this.button.transitionEnable = true;
        InputUtil.bindButton(Keys.X, this.button);
        this.button.setPressedImageColorDecimal(200, 200, 200, 255);
        this.button.onClicked.add(() => {
        // When the button is pressed, execute the following logic
            console.log("The \"StaleButton\" button was pressed ~");
        })
    }
}
@Component
export default class AccountExample extends Script {

    protected onStart(): void {
        if (!SystemUtil.isClient()) return;
        let button = new ButtonUI();
    }
}

class ButtonUI {
    public button:StaleButton;

    constructor() {
        this.creatUI();
    }

    private creatUI() {
        let size = WindowUtil.getViewportSize();

        // Create a UI object
        let ui = UserWidget.newObject();
        // Add UI to screen
        ui.addToViewport(1);

        // Create a canvas component
        let canvas = Canvas.newObject();
        canvas.size = new Vector2(1920, 1080);
        canvas.position = Vector2.zero;
        // Set Ui's root canvas to canvas
        ui.rootContent = canvas;

        this.button = StaleButton.newObject(canvas);
        this.button.size = new Vector2(size.x / 14, size.y / 20);
        this.button.text = "StaleButton";
        this.button.fontSize = 18;
        this.button.transitionEnable = true;
        InputUtil.bindButton(Keys.X, this.button);
        this.button.setPressedImageColorDecimal(200, 200, 200, 255);
        this.button.onClicked.add(() => {
        // When the button is pressed, execute the following logic
            console.log("The \"StaleButton\" button was pressed ~");
        })
    }
}

removeRootContent ​

• removeRootContent(): void other

Removing the root Canvas will destroy it and make it unusable again

newObject ​

• Static newObject(parent?): UserWidget other

Create UserWidget widget

Parameters ​

parent? CanvasUsage: Create an outer Outer object for the control with default: null

Returns ​

UserWidgetReturn the created control