Editor API
Return to top
UIScript
Edit

UI / UIScript

UIScript Class ​

UI Driver script base class for

  1. UIScript How does it work?

When you want to use the UI functionality of an editor, there is a high chance that you will need to come into contact with UIScript, unless you customize the interface using UserWidget.

The script inherited from UIScript is different from that inherited from Script. The script inherited from Script is mounted in the object manager, and the editor will automatically call the life cycle function for you. But scripts inherited from UIScript are placed in the object manager, and the editor will not automatically call lifecycle functions for you.

He needs to rely on UIService or UIPrefab.

  1. What are the lifecycles enjoyed by inheriting from UIScript scripts?

🌵 Here is a detailed description

  1. When will the editor help you call the UI life cycle?

There are two ways:

  • Use UIService to manage this script for you. When UIService. create and show, the lifecycle of the script will be initiated.

  • Use UIPrefab. The script is mounted on UIPrefab and placed in the object manager.

Hierarchy ​

Table of contents ​

Accessors ​

canUpdate(): boolean other
Obtain whether the onUpdate lifecycle function in the UI can be triggered
fullScreen(inFull: boolean): void other
Setting up full screen adaptation with the parent node will verify the size of the parent node to ensure that it follows the size of the parent node
layer(): number other
Get the layer layer of UI
rootCanvas(): Canvas other
Get the root Canvas node of the UI
uiObject(): Widget
Get UI top level widget object
uiWidgetBase(): UserWidget other
Get UI top level widget object
visible(): boolean other
Get whether the UI is displayed

Methods ​

destroy(): void other
Destroy UI objects
detectDrag(dragKey: Keys): EventReply other
Trigger detection of DragDrop event
detectDragIfPressed(inPointEvent: PointerEvent, dragKey: Keys): EventReply other
Event detection passed, triggering a reply to the DragDrop event.
newDragDrop(inVisualWidget: Widget, inTag?: string, inPayLoad?: any, inPivot?: DragPivot, inOffset?: Vector2): DragDropOperation other
Create DragDrop event
remove(): void other
Remove UI object
setVisible(inVisible: boolean SlateVisibility, ...params: any[]): void other
Set whether the UI is displayed
addBehavior(key: string, value: any): void other
Add a global behavior
clearBehavior(): void other
Clear a global action
getBehavior(key: string): any other
Execute a global action
removeBehavior(key: string): void other
Remove a global behavior

Accessors ​

canUpdate ​

• get canUpdate(): boolean other

• set canUpdate(bCanUpdate): void other

Obtain whether the onUpdate lifecycle function in the UI can be triggered

Default is false

Returns ​

booleanCan the return be triggered

Set whether the onUpdate lifecycle function in the UI can be triggered

Parameters ​

bCanUpdate booleanCan it trigger

fullScreen ​

• set fullScreen(inFull): void other

Setting up full screen adaptation with the parent node will verify the size of the parent node to ensure that it follows the size of the parent node

Parameters ​

inFull booleanSet to fully screen adapt to the size of the parent node

layer ​

• get layer(): number other

• set layer(inLayer): void other

Get the layer layer of UI

Usage example: Generally speaking, you can use built-in defined ones or customize extended layer

ts
// @description Scene zOrder starts at 0
const UILayerScene: typeof mw.UILayerScene;
// @description The bottom level zOrder starts at 100000
const UILayerBottom: typeof mw.UILayerBottom;
// @description Mid level zOrder starts at 200000
const UILayerMiddle: typeof mw.UILayerMiddle;
// @description Exclusive layer (calling this layer will automatically hide the Bottom and Middle layers) zOrder starts at 300000
const UILayerOwn: typeof mw.UILayerOwn;
// @description Top level zOrder starts at 400000
const UILayerTop: typeof mw.UILayerTop;
// @description Dialogue zOrder starts at 500000
const UILayerDialog: typeof mw.UILayerDialog;
// @description System zOrder started at 600000
const UILayerSystem: typeof mw.UILayerSystem;
// @description Error This layer cannot be used. If you need to add a layer, you can use addUILayerMap zOrder from 700000
const UILayerError: typeof mw.UILayerError;
// @description Scene zOrder starts at 0
const UILayerScene: typeof mw.UILayerScene;
// @description The bottom level zOrder starts at 100000
const UILayerBottom: typeof mw.UILayerBottom;
// @description Mid level zOrder starts at 200000
const UILayerMiddle: typeof mw.UILayerMiddle;
// @description Exclusive layer (calling this layer will automatically hide the Bottom and Middle layers) zOrder starts at 300000
const UILayerOwn: typeof mw.UILayerOwn;
// @description Top level zOrder starts at 400000
const UILayerTop: typeof mw.UILayerTop;
// @description Dialogue zOrder starts at 500000
const UILayerDialog: typeof mw.UILayerDialog;
// @description System zOrder started at 600000
const UILayerSystem: typeof mw.UILayerSystem;
// @description Error This layer cannot be used. If you need to add a layer, you can use addUILayerMap zOrder from 700000
const UILayerError: typeof mw.UILayerError;

Returns ​

numberLayer layer

Set the layer layer where the UI is located

The display may affect the zOrder. When UIService is used to display the UI, the zOrder will be dynamically set according to the layer layer. Each call will recalculate the new zOrder of the current layer to ensure that the UI is at the top of the current layer.

Parameters ​

inLayer numberSet Layer Hierarchy

rootCanvas ​

• get rootCanvas(): Canvas other

Get the root Canvas node of the UI

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game. In this example, this.rootCanvas.name is empty because Canvas has not been added to this interface.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        console.log(this.uiObject.name);
        console.log(this.uiWidgetBase.name);
        console.log(this.rootCanvas.name);

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        console.log(this.uiObject.name);
        console.log(this.uiWidgetBase.name);
        console.log(this.rootCanvas.name);

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
    }
}

Returns ​

CanvasReturn the canvas node

uiObject ​

• get uiObject(): Widget

Get UI top level widget object

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, the editor will dynamically generate a UserWidget, and you can see the name of the UserWidget control.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        console.log(this.uiObject.name);
        console.log(this.uiWidgetBase.name);
        console.log(this.rootCanvas.name);

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        console.log(this.uiObject.name);
        console.log(this.uiWidgetBase.name);
        console.log(this.rootCanvas.name);

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
    }
}

Returns ​

WidgetScript mounted UI objects

uiWidgetBase ​

• get uiWidgetBase(): UserWidget other

Get UI top level widget object

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, the editor will dynamically generate a UserWidget, and you can see the name of the UserWidget control.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        console.log(this.uiObject.name);
        console.log(this.uiWidgetBase.name);
        console.log(this.rootCanvas.name);

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        console.log(this.uiObject.name);
        console.log(this.uiWidgetBase.name);
        console.log(this.rootCanvas.name);

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
    }
}

Returns ​

UserWidgetReturn the conversion to the specified UserWidget object

visible ​

• get visible(): boolean other

• set visible(inVisible): void other

Get whether the UI is displayed

Returns ​

booleanReturn whether it is visible or not

Set whether the UI is displayed

The OnShow/OnHide event in the life cycle of the bound script will be triggered. If you need to pass parameters, you can use the setVisible method.

Parameters ​

inVisible booleanSet Visible to SelfHitTestInvisible, Invisible to Collapsed

Methods ​

destroy ​

• destroy(): void other

Destroy UI objects

detectDrag ​

• detectDrag(dragKey): EventReply other

Trigger detection of DragDrop event

Parameters ​

dragKey KeysUsage: Trigger button default: mw.Keys

Returns ​

EventReplyReturn the triggered event reply

detectDragIfPressed ​

• detectDragIfPressed(inPointEvent, dragKey): EventReply other

Event detection passed, triggering a reply to the DragDrop event.

Parameters ​

inPointEvent PointerEventUsage: Transmitting triggered event information
dragKey KeysUsage: Trigger button

Returns ​

EventReplyReturn the triggered event reply

newDragDrop ​

• newDragDrop(inVisualWidget, inTag?, inPayLoad?, inPivot?, inOffset?): DragDropOperation other

Create DragDrop event

Parameters ​

inVisualWidget WidgetUsage: drag the displayed UI widget
inTag? stringUsage: tag text default: "" range: unlimited
inPayLoad? anyUsage: Drag and drop event data information default: null
inPivot? DragPivotUsage: Drag and drop to display UI anchor point default: UIType DragPivot.TopLeft
inOffset? Vector2Usage: Drag to display the percentage of offset of UI relative to anchor default: vector2 (0,0)

Returns ​

DragDropOperationReturn the triggered event reply

remove ​

• remove(): void other

Remove UI object

setVisible ​

• setVisible(inVisible, ...params): void other

Set whether the UI is displayed

Parameters ​

inVisible boolean SlateVisibilitySet whether it is visible. If it is a boolean type, set it to SelfHitTestInvisible, and if it is invisible, set it to Collapsed, Otherwise, set the specific display type according to the enumeration.
...params any[]Parameters passed to onShow

The OnShow/OnSide event that triggers the bound script can pass parameters.

addBehavior ​

• Static addBehavior(key, value): void other

Add a global behavior

Parameters ​

key stringBehavior tag range: The string length is not limited, as long as it is reasonable
value anyBehavioral value

UI A more convenient way of event communication.

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, a screen UI button will be generated in the scene, press the P key, and the button text will change.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            //UIService.create(newUI);
            UIService.show(newUI);
            UIScript.addBehavior("UI",(ui:StaleButton)=>{
                ui.text = "change";
            });
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {
        //Set whether onUpdate can be triggered every frame
        this.canUpdate = false;
        this.layer = UILayerMiddle;

        this.button = StaleButton.newObject(this.rootCanvas);

        this.button.text = "Press to turn red";
        this.button.transitionEnable = true;
        this.button.pressedImagColor = LinearColor.red;
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(() => {
            console.log("click");
        })
        InputUtil.onKeyDown(Keys.P,()=>{
            let ui = UIScript.getBehavior("UI");
            ui(this.button);
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            //UIService.create(newUI);
            UIService.show(newUI);
            UIScript.addBehavior("UI",(ui:StaleButton)=>{
                ui.text = "change";
            });
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {
        //Set whether onUpdate can be triggered every frame
        this.canUpdate = false;
        this.layer = UILayerMiddle;

        this.button = StaleButton.newObject(this.rootCanvas);

        this.button.text = "Press to turn red";
        this.button.transitionEnable = true;
        this.button.pressedImagColor = LinearColor.red;
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(() => {
            console.log("click");
        })
        InputUtil.onKeyDown(Keys.P,()=>{
            let ui = UIScript.getBehavior("UI");
            ui(this.button);
        });
    }
}

clearBehavior ​

• Static clearBehavior(): void other

Clear a global action

getBehavior ​

• Static getBehavior(key): any other

Execute a global action

Parameters ​

key stringBehavior tag range: The string length is not limited, as long as it is reasonable

Returns ​

anyReturn an action

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, a screen UI button will be generated in the scene, press the P key, and the button text will change.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            //UIService.create(newUI);
            UIService.show(newUI);
            UIScript.addBehavior("UI",(ui:StaleButton)=>{
                ui.text = "change";
            });
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {
        //Set whether onUpdate can be triggered every frame
        this.canUpdate = false;
        this.layer = UILayerMiddle;

        this.button = StaleButton.newObject(this.rootCanvas);

        this.button.text = "Press to turn red";
        this.button.transitionEnable = true;
        this.button.pressedImagColor = LinearColor.red;
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(() => {
            console.log("click");
        })
        InputUtil.onKeyDown(Keys.P,()=>{
            let ui = UIScript.getBehavior("UI");
            ui(this.button);
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            //UIService.create(newUI);
            UIService.show(newUI);
            UIScript.addBehavior("UI",(ui:StaleButton)=>{
                ui.text = "change";
            });
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {
        //Set whether onUpdate can be triggered every frame
        this.canUpdate = false;
        this.layer = UILayerMiddle;

        this.button = StaleButton.newObject(this.rootCanvas);

        this.button.text = "Press to turn red";
        this.button.transitionEnable = true;
        this.button.pressedImagColor = LinearColor.red;
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(() => {
            console.log("click");
        })
        InputUtil.onKeyDown(Keys.P,()=>{
            let ui = UIScript.getBehavior("UI");
            ui(this.button);
        });
    }
}

removeBehavior ​

• Static removeBehavior(key): void other

Remove a global behavior

Parameters ​

key stringBehavior tag range: The string length is not limited, as long as it is reasonable