Creating UI

# Course Introduction

The MapleStory Worlds Maker offers a UI Editor to edit UI. You can implement the character's name, stat window, chat window, etc. using the UI Editor. You can also create a scenario that brings the game to life. Let's create the Welcome Message UI at the top of the screen using image and text, basic features of the UI Editor. [png](16607859751670dad1471dc514cef891e7f484d61bf20)

##### Reference Guide

  * [UI Editor](/docs?postId=120%7B%22target%22:%22_blank%22%7D)
  * [Basic UI Components](/docs?postId=744%7B%22target%22:%22_blank%22%7D)
  * [Controlling UI Entities](/docs?postId=1154%7B%22target%22:%22_blank%22%7D)



# Adding Text to a New Group

Let's add Hello MapleStory Worlds in the top middle of the screen.

  1. On the bottom right, click the [png](16345369150225f875c8c218444c58189ffac05201631) button to add a new group. [png](16566580669786e89df499cff4c42aaa5046cd1e5126d)   
When you first add a new group, UIGroup is created, and UIGroup will be selected in the group selection window. [png](1635466100477be5787d22e4745bca8948e07dc1fe6aa)   


  2. Add a text box to the added UIGroup. From the left toolbox, click the [png](16345252157689279f2e1212f460381577fe950d87703) button. The text box is placed in the center. [png](1635466110759f18631e58b2845e08eefdadee9584e42)   


  3. Let's set the location and size of the text box. Enter the value in Property Editor - UITransfromComponent as follows.

     * PosX = 0
     * PosY = 400
     * Width = 500
     * Height = 100 [png](1635466119736567a06e7efb749f0bd593cf5583c7ca0)   

  4. Let's change the background color of the box. Set the Color value of SpriteGUIRendererComponent as follows.

     * R: 255
     * G: 255
     * B: 255
     * A: 100% [png](1719208795002a31a47af5b3940e6a51f594f60237bf7)   

  5. Click the right button on ImageRUID of SpriteGUIRendererComponent to open the Resource Picker window. [png](168085693599993c114d51e92442c911b153b975dc647)   


  6. In the Resource Picker window, a list of images that can be used as the background of the text box is output.

     * RUID: b2efe9b7579bd494baecc7a2ef3 [png](1680857186821081809892ed1431e9ad72ed3ee213001)   

  7. Select the image and you'll see the UI applied as follows. [png](16354667716403f561d9f75ef4c77ace222e41916872f)   


  8. Edit the property of TextComponent as follows.

[{"Component":"TextComponent","Property":"Text","Value":"Hello MapleStory Worlds"},{"Component":"TextComponent","Property":"FontSize","Value":"30"}]

  


> Tip This text box is visible in the UI Editor, but not visible during actual play. This is because the added UIGroup is set to be invisible by default.

  9. Select Hierarchy - ui - UIGroup. [png](165950430779879b381eacaa846408419a337d605f4bc)   


  10. Make the UIGroup always visible by enabling the DefaultShow of UIGroupComponent in the Property Editor of UIGroup. [png](1634690751616957f4000f31a406da4fcb2651c1803ed)   


  11. Click the [png](163453120840744616a62243642e889159a68a78a56c2) button at the top to stop the UI Editor. [png](16607866498590ff06626406440d4a3a3d75e72800f6e)   


  12. Press the  [Start] button and run a test. You'll see the newly added text is shown in the play screen. [png](16607861764157e8a105a04e642c09ef7ec13e3622d6a)




# Adding Images

Let's add a meso image to make the text box stand out a little more. [png](1660786201599b49010a72c294a5eb6bc3d8850eb706b)   


  1. After opening the UI Editor, click UIGroup. [png](16354668571302757ee322edb4681a95ecc00359dbe19)   


  2. From the left toolbox, click the [Image] button to add an image UI. [png](1660786345914ecc31fc8aa174ed39195af5c34ed77c2)   


  3. In the Property Editor of added images, click the ImageRUID right button of SpriteGUIRendererComponent to open the Resource Picker window.

     * RUID:fd255d50cb5177545a0e71c4a84  
[png](16808600045139383ec457a95496990e109b3e927509f)
  4. Enter the value in Property Editor - UITransfromComponent as follows.

     * Pos X = -257
     * Pos Y = 403
     * Width = 70
     * Height = 70 [png](1656658276777578d07057c8148a09fb8eced28b3a654)
  5. Press the  [Start] button and run a test. You can see that the images and text boxes are well placed. [png](16607862245222f3b07edaa1f4535b86ee27851a9646a)