Editor API
Return to top
InputUtil
Edit

Input / InputUtil

InputUtil Class ​

Input Event Tool

Usage example: Create a script called "InputExample", place it in the object bar, open the script, enter the following code to save, run the game, click the keyboard 1 key and the screen, you will see the Input related effects. The code is as follows:

ts
@Component
export default class InputExample extends Script {
    protected onStart(): void {
        InputUtil.onKeyDown(Keys.One, () => {
            console.error(`===>onKeyDown: Keys.One`);
        });
        InputUtil.onKeyUp(Keys.One, () => {
            console.error(`===>onKeyUp: Keys.One`);
        });
        InputUtil.onKeyPress(Keys.One, () => {
            console.error(`===>onKeyPress: Keys.One`);
        });
        InputUtil.onTouch((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouch: ${index}, ${location}, ${touchType}`);
        });
        InputUtil.onTouchBegin((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouchBegin: ${index}, ${location}, ${touchType}`);
        });
        InputUtil.onTouchMove((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouchMove: ${index}, ${location}, ${touchType}`);
        });
        InputUtil.onTouchEnd((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouchEnd: ${index}, ${location}, ${touchType}`);
        });
    }
}
@Component
export default class InputExample extends Script {
    protected onStart(): void {
        InputUtil.onKeyDown(Keys.One, () => {
            console.error(`===>onKeyDown: Keys.One`);
        });
        InputUtil.onKeyUp(Keys.One, () => {
            console.error(`===>onKeyUp: Keys.One`);
        });
        InputUtil.onKeyPress(Keys.One, () => {
            console.error(`===>onKeyPress: Keys.One`);
        });
        InputUtil.onTouch((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouch: ${index}, ${location}, ${touchType}`);
        });
        InputUtil.onTouchBegin((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouchBegin: ${index}, ${location}, ${touchType}`);
        });
        InputUtil.onTouchMove((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouchMove: ${index}, ${location}, ${touchType}`);
        });
        InputUtil.onTouchEnd((index: number, location: Vector2, touchType: TouchInputType) => {
            console.error(`===>onTouchEnd: ${index}, ${location}, ${touchType}`);
        });
    }
}

Table of contents ​

Accessors ​

isCursorInteractiveWithUI(): boolean other
Get whether the mouse cursor can interact with the UI
isCursorLockEnabled(): boolean other
Obtain whether it is allowed to switch the combination mode of mouse usage through shortcuts
isCursorLocked(): boolean other
Get whether the mouse pointer is locked
isCursorVisible(): boolean other
Get whether the mouse cursor is visible
isLockMouse(): boolean other
Set whether the mouse cursor can move freely or be locked
mouseLockOptionEnabled(): boolean other
Whether Player can use shift to switch mouse lock status

Methods ​

convertScreenLocationToWorldSpace(screenX: number, screenY: number): ConvertScreenResult other
Convert 2D screen position to 3D world space position and orientation
onKeyDown(Key: Keys, listener: () => void): EventListener other
Keyboard input event - click
onKeyPress(Key: Keys, listener: () => void): EventListener other
Keyboard input event - press
onKeyUp(Key: Keys, listener: () => void): EventListener other
Keyboard Input Event - Lift Up
onRawTouchBegin(): MulticastDelegate<(FingerIndex: number, Position: Vector2) => void> other
Get the input event that the finger press proxy is not affected by UI, etc
onRawTouchEnd(): MulticastDelegate<(FingerIndex: number) => void> other
Obtain input events for finger lifting agents that are not affected by UI or other factors
onRawTouchMove(): MulticastDelegate<(FingerIndex: number, Position: Vector2) => void> other
Get finger swipe proxy, input events that are not affected by UI, etc
onTouch(listener: (index: number, location: Vector2, touchType: TouchInputType) => void): EventListener other
Touch event
onTouchBegin(listener: (index: number, location: Vector2, touchType: TouchInputType) => void): EventListener other
Touch Start Event
onTouchEnd(listener: (index: number, location: Vector2, touchType: TouchInputType) => void): EventListener other
Touch End Event
onTouchMove(listener: (index: number, location: Vector2, touchType: TouchInputType) => void): EventListener other
Touch Mobile Event
projectWorldPositionToWidgetPosition(worldLocation: Vector, playerViewportRelative?: boolean): ConvertScreenResult other
Retrieve the character's position in the world and project it onto the screen

Accessors ​

isCursorInteractiveWithUI ​

• Static get isCursorInteractiveWithUI(): boolean other

• Static set isCursorInteractiveWithUI(canInteract): void other

Get whether the mouse cursor can interact with the UI

Usage example: Create a script called InputExample, 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 switch whether the mouse can interact with the screen UI. When it cannot interact, clicking the jump button is invalid

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to modify whether the mouse can interact with the screen UI
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorInteractWithUI = !InputUtil.isCursorInteractiveWithUI;
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to modify whether the mouse can interact with the screen UI
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorInteractWithUI = !InputUtil.isCursorInteractiveWithUI;
        })
    }

}

Returns ​

booleanCan it interact with the UI

Set whether the mouse cursor can interact with the UI

Usage example: Create a script called InputExample, 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 switch whether the mouse can interact with the screen UI. When it cannot interact, clicking the jump button is invalid

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to modify whether the mouse can interact with the screen UI
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorInteractWithUI(!InputUtil.isCursorInteractiveWithUI());
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to modify whether the mouse can interact with the screen UI
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorInteractWithUI(!InputUtil.isCursorInteractiveWithUI());
        })
    }

}

Parameters ​

canInteract booleanUsage: Interactable

isCursorLockEnabled ​

• Static get isCursorLockEnabled(): boolean other

• Static set isCursorLockEnabled(isEnableMouseLock): void other

Obtain whether it is allowed to switch the combination mode of mouse usage through shortcuts

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content as follows, save and run the game, press F, and switch whether the shift key can control the cursor display

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to modify whether shift can control cursor display
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorLock(!InputUtil.isCursorLockEnabled());
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to modify whether shift can control cursor display
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorLock(!InputUtil.isCursorLockEnabled());
        })
    }

}

Returns ​

booleanIs it switchable

The setting is to enable the cursor lock function, and after enabling it, you can press the shift key to switch whether the cursor is displayed or not.

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content as follows, save and run the game, press F, and switch whether the shift key can control the cursor display

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to modify whether shift can control cursor display
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorLock = !InputUtil.isCursorLockEnabled;
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to modify whether shift can control cursor display
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.enableCursorLock = !InputUtil.isCursorLockEnabled;
        })
    }

}

Parameters ​

isEnableMouseLock booleanUsage: Whether to start the shift key function. This function does not directly set the mouse status

isCursorLocked ​

• Static get isCursorLocked(): boolean other

• Static set isCursorLocked(isLock): void other

Get whether the mouse pointer is locked

Example usage: Create a script called InputExample, 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 switch whether the mouse is locked or not, and after locking, the mouse cannot exit the game window

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to lock/unlock the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorLocked(!InputUtil.isCursorLocked());
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to lock/unlock the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorLocked(!InputUtil.isCursorLocked());
        })
    }

}

Returns ​

booleanIs it locked

Set whether the mouse cursor is locked

Example usage: Create a script called InputExample, 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 switch whether the mouse is locked or not, and after locking, the mouse cannot exit the game window

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to lock/unlock the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorLocked = !InputUtil.isCursorLocked;
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press F to lock/unlock the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorLocked = !InputUtil.isCursorLocked;
        })
    }

}

Parameters ​

isLock booleanUsage: Is it locked

isCursorVisible ​

• Static get isCursorVisible(): boolean other

• Static set isCursorVisible(isVisible): void other

Get whether the mouse cursor is visible

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content as follows, save and run the game, press F to switch whether the mouse is visible

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to show/hide the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorVisible(!InputUtil.isCursorVisible());
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to show/hide the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorVisible(!InputUtil.isCursorVisible());
        })
    }

}

Returns ​

booleanIs it visible

Set whether the mouse pointer is visible

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content as follows, save and run the game, press F to switch whether the mouse is visible

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to show/hide the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorVisible = !InputUtil.isCursorVisible;
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press the F key to show/hide the mouse
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.setCursorVisible = !InputUtil.isCursorVisible;
        })
    }

}

Parameters ​

isVisible booleanUsage: Visible or not

isLockMouse ​

• Static get isLockMouse(): boolean other

• Static set isLockMouse(b): void other

Set whether the mouse cursor can move freely or be locked

Returns ​

booleanWhether the mouse cursor can move freely or be locked

Determine whether the player's mouse can move freely or be locked

Parameters ​

b booleanfalse Free movement true: locked

mouseLockOptionEnabled ​

• Static get mouseLockOptionEnabled(): boolean other

• Static set mouseLockOptionEnabled(b): void other

Whether Player can use shift to switch mouse lock status

Returns ​

booleanWhether Player can shift mouse status

Whether Player can use shift to switch mouse lock status

Example usage: Create a script called InputExample, 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 lock the mouse with shift, press the G key to lock the mouse without shift

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press key F to lock the mouse by shifting
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.mouseLockOptionEnabled = true;
        })
        //Press G to lock the mouse through shift
        InputUtil.onKeyDown(Keys.G, () => {
            InputUtil.mouseLockOptionEnabled = false;
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        //Press key F to lock the mouse by shifting
        InputUtil.onKeyDown(Keys.F, () => {
            InputUtil.mouseLockOptionEnabled = true;
        })
        //Press G to lock the mouse through shift
        InputUtil.onKeyDown(Keys.G, () => {
            InputUtil.mouseLockOptionEnabled = false;
        })
    }

}

Parameters ​

b booleanUsage: If it is true, the Player can switch the mouse lock status by himself after press the mouse lock button (default shift) in the game

Methods ​

convertScreenLocationToWorldSpace ​

• Static convertScreenLocationToWorldSpace(screenX, screenY): ConvertScreenResult other

Convert 2D screen position to 3D world space position and orientation

Parameters ​

screenX numberScreen X axis coordinate value default: null range: not more than screen coordinate. For details of screen coordinates, see class Vector2 type: floating point
screenY numberScreen Y axis coordinate value default: null range: not more than screen coordinate. For details of screen coordinates, see class Vector2 type: floating point

Returns ​

ConvertScreenResultScreen coordinate conversion result

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content to the following content, save and run the game, press F key, you can send a ray at the position of the screen center, the ray direction is the position of the screen center, pointing 1000 meters away from the screen

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyDown(Keys.F, () => {
            const result = InputUtil.convertScreenLocationToWorldSpace(960, 540);
            const startLoc = result.worldPosition;
            const dir = result.worldDirection;
            const endLoc = Vector.add(startLoc, dir.multiply(1000));
            mw.QueryUtil.lineTrace(startLoc, endLoc, true, true);
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyDown(Keys.F, () => {
            const result = InputUtil.convertScreenLocationToWorldSpace(960, 540);
            const startLoc = result.worldPosition;
            const dir = result.worldDirection;
            const endLoc = Vector.add(startLoc, dir.multiply(1000));
            mw.QueryUtil.lineTrace(startLoc, endLoc, true, true);
        })
    }

}

onKeyDown ​

• Static onKeyDown(Key, listener): EventListener other

Keyboard input event - click

Parameters ​

Key KeysUsage: Key value
listener () => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content to the following, save and run the game, and the log will output whether the F key is press

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyDown(Keys.F, () => {
            console.log("F key pressed");
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyDown(Keys.F, () => {
            console.log("F key pressed");
        })
    }

}

onKeyPress ​

• Static onKeyPress(Key, listener): EventListener other

Keyboard input event - press

Parameters ​

Key KeysUsage: Key value
listener () => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

Usage example: create a script named InputExample, place it in the object bar, open the script, modify the original content as follows, save and run the game, and log will output whether the F key is pressed

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyPress(Keys.F, () => {
            console.log("F key up");
        })
    }
}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyPress(Keys.F, () => {
            console.log("F key up");
        })
    }
}

onKeyUp ​

• Static onKeyUp(Key, listener): EventListener other

Keyboard Input Event - Lift Up

Parameters ​

Key KeysUsage: Key value
listener () => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

Example usage: Create a script called InputExample, place it in the object bar, open the script, modify the original content to the following, save and run the game, and the log will output whether the F key is lifted or not

ts
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyUp(Keys.F, () => {
            console.log("F key up");
        })
    }

}
@Component
export default class InputExample extends Script {

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

    private async test(): Promise<void> {
        InputUtil.onKeyUp(Keys.F, () => {
            console.log("F key up");
        })
    }

}

onRawTouchBegin ​

• Static onRawTouchBegin(): MulticastDelegate<(FingerIndex: number, Position: Vector2) => void> other

Get the input event that the finger press proxy is not affected by UI, etc

Returns ​

MulticastDelegate<(FingerIndex: number, Position: Vector2) => void>Return to the proxy when the finger is press

onRawTouchEnd ​

• Static onRawTouchEnd(): MulticastDelegate<(FingerIndex: number) => void> other

Obtain input events for finger lifting agents that are not affected by UI or other factors

Returns ​

MulticastDelegate<(FingerIndex: number) => void>Return to the proxy when lifting the finger

onRawTouchMove ​

• Static onRawTouchMove(): MulticastDelegate<(FingerIndex: number, Position: Vector2) => void> other

Get finger swipe proxy, input events that are not affected by UI, etc

Returns ​

MulticastDelegate<(FingerIndex: number, Position: Vector2) => void>Return the proxy for finger sliding

onTouch ​

• Static onTouch(listener): EventListener other

Touch event

Parameters ​

listener (index: number, location: Vector2, touchType: TouchInputType) => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

onTouchBegin ​

• Static onTouchBegin(listener): EventListener other

Touch Start Event

Parameters ​

listener (index: number, location: Vector2, touchType: TouchInputType) => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

onTouchEnd ​

• Static onTouchEnd(listener): EventListener other

Touch End Event

Parameters ​

listener (index: number, location: Vector2, touchType: TouchInputType) => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

onTouchMove ​

• Static onTouchMove(listener): EventListener other

Touch Mobile Event

Parameters ​

listener (index: number, location: Vector2, touchType: TouchInputType) => voidUsage: Listening for callbacks

Returns ​

EventListenerReturn an event listener

projectWorldPositionToWidgetPosition ​

• Static projectWorldPositionToWidgetPosition(worldLocation, playerViewportRelative?): ConvertScreenResult other

Retrieve the character's position in the world and project it onto the screen

Parameters ​

worldLocation VectorWorld coordinates
playerViewportRelative? booleanShould this be relative to the player's viewing sub area (useful when using player attached widgets or when aspect ratio is limited in screen segmentation) default: false

Returns ​

ConvertScreenResultScreen coordinate conversion result. The default value is Vector ZERO

Example usage: Create a script called InputExample, 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 InputExample 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 InputExample 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();
            }
        })

    }
}