Editor API
Return to top
UIService
Edit

UI / UIService

UIService Class ​

UI Management

  1. Explanation of some terms related to UI
  • UIPrefab/world UI/screen UI/UI script
  1. How is the screen UI used and launched?

You can use and launch the screen UI in your game in three ways:

  • 🌵 Control the script inherited from UIScript through UIService to manage your screen 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, and a screen UI button will be generated in the scene.

ts
@Component
 export default class NewScript extends Script {

     protected onStart(): void {
         if(SystemUtil.isClient()){
             UIService.show(NewUIScript);
         }
     }
 }

 class NewUIScript 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");
         })
     }
 }
@Component
 export default class NewScript extends Script {

     protected onStart(): void {
         if(SystemUtil.isClient()){
             UIService.show(NewUIScript);
         }
     }
 }

 class NewUIScript 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");
         })
     }
 }

Of course, if UIPrefab mounts a script that inherits from UIScript, it can also be managed using UIService. Do not mount it in the object manager manually.

  • 🌵 Object Manager mounts UIPrefab startup screen UI.

  • 🌵 Create screen UI using UserWidget and code customize.

Example usage: Create a script named NewExample, place it in the object bar, open the script, modify the original content to the following, save and run the game, press the F key to move the button to the player's location

ts
@Component
export default class NewExample extends Script {

    protected onStart(): void {
        if (!SystemUtil.isClient()) return;
        this.test();
    }

    private async test(): Promise<void> {
        let btn = new ButtonUI();
        InputUtil.onKeyDown(Keys.F, async () => {
            let playerPos = Player.localPlayer.character.worldTransform.position;
            let result = InputUtil.projectWorldPositionToWidgetPosition(playerPos);
            if (result) {
                btn.button.position = result.screenPosition;
            }
        })
    }

}

class ButtonUI {
    public button: StaleButton;

    constructor(fun: Function = null) {
        this.creatUI(fun);
    }

    private creatUI(fun: Function = null) {
        // Create a UI object
        let ui = UserWidget.newObject();
        // Add UI to screen
        ui.addToViewport(1);
        // Create a canvas component
        let rootCanvas = Canvas.newObject();
        rootCanvas.size = new Vector2(1920, 1080);
        rootCanvas.position = Vector2.zero;
        // Set Ui's root canvas to rootCanvas
        ui.rootContent = rootCanvas;
        // Create a button
        this.button = StaleButton.newObject(rootCanvas);
        this.button.position = new Vector2(1700, 310);
        this.button.size = new Vector2(150, 50);
        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(() => {
            if (fun) {
                fun();
            }
        })

    }
}
@Component
export default class NewExample extends Script {

    protected onStart(): void {
        if (!SystemUtil.isClient()) return;
        this.test();
    }

    private async test(): Promise<void> {
        let btn = new ButtonUI();
        InputUtil.onKeyDown(Keys.F, async () => {
            let playerPos = Player.localPlayer.character.worldTransform.position;
            let result = InputUtil.projectWorldPositionToWidgetPosition(playerPos);
            if (result) {
                btn.button.position = result.screenPosition;
            }
        })
    }

}

class ButtonUI {
    public button: StaleButton;

    constructor(fun: Function = null) {
        this.creatUI(fun);
    }

    private creatUI(fun: Function = null) {
        // Create a UI object
        let ui = UserWidget.newObject();
        // Add UI to screen
        ui.addToViewport(1);
        // Create a canvas component
        let rootCanvas = Canvas.newObject();
        rootCanvas.size = new Vector2(1920, 1080);
        rootCanvas.position = Vector2.zero;
        // Set Ui's root canvas to rootCanvas
        ui.rootContent = rootCanvas;
        // Create a button
        this.button = StaleButton.newObject(rootCanvas);
        this.button.position = new Vector2(1700, 310);
        this.button.size = new Vector2(150, 50);
        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(() => {
            if (fun) {
                fun();
            }
        })

    }
}

Whether you use UIPrefab create a screen UI or use code to dynamically edit a screen UI, you can achieve the effect you want.

It can inherit this type and come with a global UI as the overall node of the UI. It needs to be called globally, otherwise a default management class will be automatically generated when the first UI is generated.

Table of contents ​

Properties ​

allPanels: UIScript[]
All create panels
createPanelMap: Map<string, UIScript[]>
All create managed panels
logUIInfo: boolean
Do you want to dump GameUI Log information
uniquePanel: UIScript
Exclusive Panel

Accessors ​

canvas(): Canvas other
Root canvas for all global UI
uiLogInfoEnable(): boolean other
Get information that allows timed output of UI managed in UIService

Methods ​

dumpUIData(): void other
Print all managed UI information
init(): void other
Initialize UIManger
addUILayerMap(layer: number, startZOrder: number): void other
Add UI management layer
asyncCreate<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>): Promise<T: extends UIScript<T>> other
Asynchronous create of a interface, null if failed
asyncShow<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>, ...params: any[]): Promise<T: extends UIScript<T>> other
Asynchronous display of a interface will add the interface to the interface, remove it from the original parent node, and return null if failed
create<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>): T: extends UIScript<T> other
Create a interface
destroy(): void other
Destroying this service will also destroy all UI, and using the server again will reinitialize it
destroyUI<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>): void other
Destroying an interface is equivalent to DestroyObject
getAllUI<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>): T: extends UIScript<T>[] other
Obtain all objects of the interface according to the interface class
getUI<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>, bNeedNew?: boolean): T: extends UIScript<T> other
Get the object of the interface according to the interface class
getUILayer(panel: UIScript): number other
Get a layer of UI
hide<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>): T: extends UIScript<T> other
Hide an interface, just set the hidden interface to collapsed
hideUI(panel: UIScript): boolean other
Remove a displayed interface, just hide the interface and set it to Collapsed
isShown(panel: UIScript): boolean other
To judge whether the interface is in display status, it needs to be in the layer class display and visible
setAllMiddleAndBottomPanelVisible(value: boolean): void other
Set the visibility of all panels in the Middle and Bottom layers
show<T: extends UIScript<T>>(PanelClass: () => T: extends UIScript<T>, ...params: any[]): T: extends UIScript<T> other
A interface is displayed. The interface will be added to the interface and removed from the original parent node
showUI(panel: UIScript, layer?: number, ...params: any[]): UIScript other
A interface is displayed. The interface will be added to the interface and removed from the original parent node

Properties ​

allPanels ​

• Protected allPanels: UIScript[]

All create panels

createPanelMap ​

• Protected createPanelMap: Map<string, UIScript[]>

All create managed panels

logUIInfo ​

• Protected logUIInfo: boolean

Do you want to dump GameUI Log information

uniquePanel ​

• Protected uniquePanel: UIScript

Exclusive Panel

Accessors ​

canvas ​

• Static get canvas(): Canvas other

Root canvas for all global UI

Returns ​

CanvasRoot Canvas

uiLogInfoEnable ​

• Static get uiLogInfoEnable(): boolean other

• Static set uiLogInfoEnable(enable): void other

Get information that allows timed output of UI managed in UIService

Returns ​

booleanIs it allowed

Allow timed output of UI information managed in UIService

Parameters ​

enable booleanUsage: Running or not

Methods ​

dumpUIData ​

• dumpUIData(): void other

Print all managed UI information

init ​

• Protected init(): void other

Initialize UIManger

addUILayerMap ​

• Static Protected addUILayerMap(layer, startZOrder): void other

Add UI management layer

Parameters ​

layer numberlayer Serial number range: unrestricted type: integer
startZOrder numberUsage: zOrder range at the beginning of this layer: unrestricted type: integer

asyncCreate ​

• Static asyncCreate<T>(PanelClass): Promise<T> other

Asynchronous create of a interface, null if failed

Parameters ​

PanelClass () => TUsage: interface class

Returns ​

Promise<T>Return to the create UI behavior script

Type parameters ​

Textends UIScript<T>

asyncShow ​

• Static asyncShow<T>(PanelClass, ...params): Promise<T> other

Asynchronous display of a interface will add the interface to the interface, remove it from the original parent node, and return null if failed

Parameters ​

PanelClass () => TUsage: If the interface class does not have a UI binding, a default empty UI will be created
...params any[]Usage: display parameter (this parameter can be passed to the onShow method of the interface)

Returns ​

Promise<T>Displayed interface

Type parameters ​

Textends UIScript<T>

create ​

• Static create<T>(PanelClass): T other

Create a interface

Parameters ​

PanelClass () => TUsage: interface class

Returns ​

TReturn to the create UI behavior script

Type parameters ​

Textends UIScript<T>

destroy ​

• Static destroy(): void other

Destroying this service will also destroy all UI, and using the server again will reinitialize it

destroyUI ​

• Static destroyUI<T>(PanelClass): void other

Destroying an interface is equivalent to DestroyObject

Parameters ​

PanelClass () => TUsage: destroy interface

Type parameters ​

Textends UIScript<T>

getAllUI ​

• Static getAllUI<T>(PanelClass): T[] other

Obtain all objects of the interface according to the interface class

Parameters ​

PanelClass () => TUsage: Interface type

Returns ​

T[]Interface object array, if not, returns null

Type parameters ​

Textends UIScript<T>

getUI ​

• Static getUI<T>(PanelClass, bNeedNew?): T other

Get the object of the interface according to the interface class

Parameters ​

PanelClass () => TUsage: Interface type
bNeedNew? booleanUsage: Do I need to create a new default: true when a cached UI interface is not found

Returns ​

TInterface object

Type parameters ​

Textends UIScript<T>

getUILayer ​

• Static getUILayer(panel): number other

Get a layer of UI

Parameters ​

panel UIScriptGameUI

Returns ​

numberLayer of UI

hide ​

• Static hide<T>(PanelClass): T other

Hide an interface, just set the hidden interface to collapsed

Parameters ​

PanelClass () => TUsage: interface class

Returns ​

TReturn the hidden UI behavior class (this parameter can be passed to the onHide method of the interface)

Type parameters ​

Textends UIScript<T>

hideUI ​

• Static hideUI(panel): boolean other

Remove a displayed interface, just hide the interface and set it to Collapsed

Parameters ​

panel UIScriptUsage: interface

Returns ​

booleanWas the removal successful

isShown ​

• Static Protected isShown(panel): boolean other

To judge whether the interface is in display status, it needs to be in the layer class display and visible

Parameters ​

panel UIScriptUsage: interface

Returns ​

booleanIs it displayed

setAllMiddleAndBottomPanelVisible ​

• Static setAllMiddleAndBottomPanelVisible(value): void other

Set the visibility of all panels in the Middle and Bottom layers

Parameters ​

value booleanUsage: explicit and implicit values

show ​

• Static show<T>(PanelClass, ...params): T other

A interface is displayed. The interface will be added to the interface and removed from the original parent node

Parameters ​

PanelClass () => TUsage: If the interface class does not have a UI binding, a default empty UI will be created
...params any[]Usage: display parameter (this parameter can be passed to the onShow method of the interface)

Returns ​

TDisplayed interface

Type parameters ​

Textends UIScript<T>

showUI ​

• Static showUI(panel, layer?, ...params): UIScript other

A interface is displayed. The interface will be added to the interface and removed from the original parent node

Parameters ​

panel UIScriptUsage: interface
layer? numberUsage: Layer default: UILayer UILayerMiddle range: Unrestricted, can be enumerated using UILayerMiddle type type: integer
...params any[]Usage: display parameter (this parameter can be passed to the onShow method of the interface)

Returns ​

UIScriptDisplayed interface