====== BASIC UI - HP BAR, MP BAR ======
 
**Introduction**: In the advanced dev mode, you can create a beautiful game. However, you should create a beautiful UI by trigger. Do you know how to make it? If you don’t know, let’s read this post. 

**Target:** 
  *  you know how to make basic UI
  *  you know use string  

**Full trigger:**

{{:developer_center:developer_editor:ui_lottery:basic_ui_1.png?nolink&1920|}}


**I. UI Decorate**
1. Change from Hunger PT to  Stamina

{{:developer_center:developer_editor:basic_ui_2.png?nolink&1920|}}

2. Create a new UI

{{:developer_center:developer_editor:basic_ui_3.png?nolink&1920|}}

3. Hide default default HP, MP bar

{{:developer_center:developer_editor:basic_ui_4.png?nolink&1920|}}

4. Let’s design the UI,… This is an example:

{{:developer_center:developer_editor:basic_ui_5.png?nolink&1920|}}

**II. Trigger**

1. Start creating a new trigger 

{{:developer_center:developer_editor:basic_ui_6.png?nolink&1920|}}

2. Add 5 events “When the player’s MAX HP attribute changes”, “When the player’s CURRENT HP attribute changes”, “When the player’s CURRENT MP attribute changes”, “When the player’s MAX HP attribute changes”, “When player enter the game”

{{:developer_center:developer_editor:basic_ui_7.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_8.png?nolink&1920|}}

3. Add actions – Set text content to set HP text
Step 1: add action and select units

{{:developer_center:developer_editor:basic_ui_9.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_10.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_11.png?nolink&1920|}}

Step 2: You know, the UI HP Text has a format: **HP: + Current HP + / + Max HP**. In the MWC, if you want to do it, you must use “String Concatenation”. Look at this picture.

{{:developer_center:developer_editor:basic_ui_12.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_13.png?nolink&1920|}}

Step 2.1: Choose convert value to string, note: value is current HP or max HP, string is text

{{:developer_center:developer_editor:basic_ui_14.png?nolink&1920|}}

Step 3: If you want to rounding player’s current HP or max HP

{{:developer_center:developer_editor:basic_ui_15.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_16.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_17.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_18.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_19.png?nolink&1920|}}
**II. Stamina**
1. You completed the Text of HP Bar so you can copy and edit to stamina

{{:developer_center:developer_editor:basic_ui_20.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_21.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_22.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_23.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_24.png?nolink&1920|}}{{:developer_center:developer_editor:basic_ui_25.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_26.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_27.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_28.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_29.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_30.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_31.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_32.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_33.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_34.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_35.png?nolink&1920|}}{{:developer_center:developer_editor:basic_ui_36.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_37.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_38.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_39.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_40.png?nolink&1920|}}
{{:developer_center:developer_editor:basic_ui_41.png?nolink&1920|}}

----
If you have any questions about Developer Tools, feel free to join our official discord server
 [[https://discord.gg/NVRZHBChBt|Mini World Global DEV discord]]