Editor Doc
Return to top
UI Widgets - Buttons
Edit

UI Widgets - Buttons ​

It takes about 10 minutes to read this article

This article provides an overview of the UI widget—button properties and instructions.

What is the Button ​

Buttons are the most important and pervasive interactive UI widget in any user interface. Buttons are the effect of combining images + text, and the most obvious difference from images and text is that they allow click interaction, send events, etc.

Difference between [Button] and [Text Button] ​

  • Currently the UI editor provides two button controls, [Button] and [Text Button]

  • The difference between [Button] (recommended) and [Text Button] is the more flexible configuration button text style, the specific differences are as follows:

    • [Button] without [Text] object property grouping, i.e. cannot directly configure text; and [Text Button] with [Text] object property grouping, can directly complete configuration text within a widget
    • [Button] can be a parent object of [Text], and does not limit the number of [Text] child objects that can be mounted; whereas [Text Button] cannot mount any child objects
    • Other than that, [Button] has exactly the same properties as [Text Button]

Text configuration method of [Button]

Text configuration method of [Text Button]

  • API class name of [Button]: mw.Button
  • API class name for [Text Button]: mw.StaleButton

Button Properties - Transition Mode ​

transition mode ​

  • When checked, the button's transition mode is turned on and the settings for pressing images and disabling images are expanded; the button can display different states when pressing or disabling buttons

    • When transition mode is on:

      • If button is available: when pressed, button shows pressed image style; when not pressed, button shows normal image style
      • If button is not available: Shows if image style is disabled in transition mode whether image is pressed or not

    • When transition mode is off:

      • Whether the button is available or pressed, the button shows the normal image style fixedly

Press image ​

  • After clicking button, button changes effect.

Disable pictures ​

  • The effect of button changes when the button is unavailable.

How do I use the buttons? ​

Example one: Making a jump button ​

  • First we need to make a UI for the jump button, then bind the UI to the script, then write the script, where we find the corresponding UI widget and achieve jump when we click UI widget.
  • Sample script:
ts
@UIBind('')
export default class DefaultUI extends UIScript {
    private character: Character;
    private anim1 = null;
    
    /** call non-TEMPLATE instances only once during experience time */
    protected  onStart() {
        // Set whether onUpdate can be triggered per frame
        this.canUpdate = false;
        
        // Find the corresponding jump button
        const jumpBtn = this.uiWidgetBase.findChildByPath('RootCanvas/Button_Jump') as Button
        const attackBtn = this.uiWidgetBase.findChildByPath('RootCanvas/Button_Attack') as Button
        
        // Click the jump button to perform a jump after asynchronously fetching characters
        jumpBtn.onPressed.add(()=>{
            if (this.character) {
                this.character.jump();
            } else {
                Player.asyncGetLocalPlayer().then((player) => {
                    this.character = player.character;
                    // character performs jump function
                    this.character.jump();
                });
            }
        })
  }
}
@UIBind('')
export default class DefaultUI extends UIScript {
    private character: Character;
    private anim1 = null;
    
    /** call non-TEMPLATE instances only once during experience time */
    protected  onStart() {
        // Set whether onUpdate can be triggered per frame
        this.canUpdate = false;
        
        // Find the corresponding jump button
        const jumpBtn = this.uiWidgetBase.findChildByPath('RootCanvas/Button_Jump') as Button
        const attackBtn = this.uiWidgetBase.findChildByPath('RootCanvas/Button_Attack') as Button
        
        // Click the jump button to perform a jump after asynchronously fetching characters
        jumpBtn.onPressed.add(()=>{
            if (this.character) {
                this.character.jump();
            } else {
                Player.asyncGetLocalPlayer().then((player) => {
                    this.character = player.character;
                    // character performs jump function
                    this.character.jump();
                });
            }
        })
  }
}
  • Diagram:

Example2: Make button selected ​

  • When there are multiple buttons of the same level in the interface, we need to distinguish which button we have selected by its selected state. Next we try to make the gender selection menu buttons selected effect.
  • Start by spelling out the following UI widgets in the UI editor:

  • We want to make it clear that buttons only have two states, selected and unselected, so we can use the trinomial operator to determine whether the button is selected or not to set the button style.
  • Sample script:
ts
// gender selection method
    SexSelected(button_boy: Button,button_girl:Button) {
        // Is it male or not? Yes, button pattern is "120373." If not, button pattern is "1200783."
        this.isMan ? button_boy.normalImageGuid="120373" : button_boy.normalImageGuid="120783";
        this.isMan ? button_girl.normalImageGuid="120783" : button_girl.normalImageGuid="120373";
    }
// gender selection method
    SexSelected(button_boy: Button,button_girl:Button) {
        // Is it male or not? Yes, button pattern is "120373." If not, button pattern is "1200783."
        this.isMan ? button_boy.normalImageGuid="120373" : button_boy.normalImageGuid="120783";
        this.isMan ? button_girl.normalImageGuid="120783" : button_girl.normalImageGuid="120373";
    }
  • Then we find the corresponding UI button and change the male or female properties by clicking on the event, then perform the gender method to complete the switch between male and female selections. (Note also perform the method to initialize the default gender before clicking)
  • Sample script:
ts
export default class NewUIScript extends UIScript {
    character: Character;
    isMan:boolean = false;
    /** call non-TEMPLATE instances only once during experience time */
    protected  onStart() {
        const button_girl = this.uiWidgetBase.findChildByPath('Canvas/button_girl') as Button;
        const button_boy = this.uiWidgetBase.findChildByPath('Canvas/button_boy') as Button;
        /// Method to perform character gender selection by default
        // this.SexSelected(button_boy, button_girl);
        // When clicking the gender female button, the condition of being male is no and the method of character gender selection is performed again
        button_girl.onPressed.add(() => {
            this.isMan = false;
            this.SexSelected(button_boy, button_girl);
        });
    
        // When clicking the gender male button, the condition of being male is true and the method of character gender selection is performed again
        button_boy.onPressed.add(() => {
            this.isMan = true;
            this.SexSelected(button_boy, button_girl);
        });
    }
export default class NewUIScript extends UIScript {
    character: Character;
    isMan:boolean = false;
    /** call non-TEMPLATE instances only once during experience time */
    protected  onStart() {
        const button_girl = this.uiWidgetBase.findChildByPath('Canvas/button_girl') as Button;
        const button_boy = this.uiWidgetBase.findChildByPath('Canvas/button_boy') as Button;
        /// Method to perform character gender selection by default
        // this.SexSelected(button_boy, button_girl);
        // When clicking the gender female button, the condition of being male is no and the method of character gender selection is performed again
        button_girl.onPressed.add(() => {
            this.isMan = false;
            this.SexSelected(button_boy, button_girl);
        });
    
        // When clicking the gender male button, the condition of being male is true and the method of character gender selection is performed again
        button_boy.onPressed.add(() => {
            this.isMan = true;
            this.SexSelected(button_boy, button_girl);
        });
    }
  • Diagram: