UI 제작하기

# 학습 과정 소개

메이플스토리 월드 메이커에서는 UI를 편집할 수 있는 UI 에디터를 제공합니다. UI 에디터를 활용해 캐릭터의 이름이나 스탯 창, 채팅 창 등을 구현할 수 있습니다. 또한 게임의 생동감을 살리는 연출도 만들 수 있습니다. UI 에디터의 기본 기능인 이미지와 텍스트를 사용해 화면 상단에 환영 메시지 UI를 만들어 봅시다. [png](16607859751670dad1471dc514cef891e7f484d61bf20)

##### 참고 가이드

  * [UI 에디터](/docs?postId=120%7B%22target%22:%22_blank%22%7D)
  * [기본 UI 컴포넌트](/docs?postId=744%7B%22target%22:%22_blank%22%7D)
  * [UI 엔티티 제어하기](/docs?postId=1154%7B%22target%22:%22_blank%22%7D)



# 새 그룹에 텍스트 추가

화면 상단 중앙에 Hello MapleStory Worlds를 추가해봅시다.

  1. 오른쪽 하단의 [png](16345369150225f875c8c218444c58189ffac05201631) 버튼을 눌러 새로운 그룹을 추가합니다. [png](16566580669786e89df499cff4c42aaa5046cd1e5126d)   
새로운 그룹을 처음 추가하면 UIGroup이 생기고, 그룹 선택 창에서 UIGroup이 선택됩니다. [png](1635466100477be5787d22e4745bca8948e07dc1fe6aa)   


  2. 추가한 UIGroup에 텍스트 박스를 추가합니다. 왼쪽 기본 도구에서 [png](16345252157689279f2e1212f460381577fe950d87703) 버튼을 클릭합니다. 텍스트 박스가 화면 중앙에 배치됩니다. [png](1635466110759f18631e58b2845e08eefdadee9584e42)   


  3. 텍스트 박스의 위치와 크기를 설정해 봅시다. 프로퍼티 에디터 - UITransfromComponent에서 아래와 같이 값을 입력합니다.

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

  4. 텍스트 박스의 배경색을 변경합니다. SpriteGUIRendererComponent의 Color 값을 다음과 같이 설정합니다.

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

  5. SpriteGUIRendererComponent의 ImageRUID 오른쪽에 있는 버튼을 클릭하여 Resource Picker 창을 엽니다. [png](168085693599993c114d51e92442c911b153b975dc647)   


  6. Resource Picker 창에는 텍스트 박스의 배경으로 사용할 수 있는 이미지 목록이 출력됩니다.

     * RUID: b2efe9b7579bd494baecc7a2ef3 [png](1680857186821081809892ed1431e9ad72ed3ee213001)   

  7. 이미지를 선택하면 다음과 같이 UI가 적용된 것을 확인할 수 있습니다. [png](16354667716403f561d9f75ef4c77ace222e41916872f)   


  8. TextComponent의 프로퍼티 값을 아래와 같이 수정합니다.

[{"컴포넌트":"TextComponent","프로퍼티":"Text","값":"Hello MapleStory Worlds"},{"컴포넌트":"TextComponent","프로퍼티":"FontSize","값":"30"}]

  


> Tip. 이 텍스트 박스는 UI 에디터에서는 보이지만 실제 플레이 할 때는 보이지 않습니다. 추가된 UIGroup은 기본적으로 보이지 않는 상태로 설정되어 있기 때문입니다.

  9. Hierarchy - ui - UIGroup을 선택합니다. [png](165950430779879b381eacaa846408419a337d605f4bc)   


  10. UIGroup의 프로퍼티 에디터에서 UIGroupComponent의 DefaultShow를 활성화해 UIGroup이 항상 보이도록 만듭니다. [png](1634690751616957f4000f31a406da4fcb2651c1803ed)   


  11. 상단의 [png](163453120840744616a62243642e889159a68a78a56c2) 버튼을 클릭하여 UI 에디터를 종료합니다. [png](16607866498590ff06626406440d4a3a3d75e72800f6e)   


  12.  [시작] 버튼을 누른 뒤 테스트합니다. 플레이 화면에서 추가한 텍스트가 잘 보이는 것을 확인할 수 있습니다. [png](16607861764157e8a105a04e642c09ef7ec13e3622d6a)




# 이미지 추가

텍스트 박스가 조금 더 돋보이도록 메소 이미지를 추가하겠습니다. [png](1660786201599b49010a72c294a5eb6bc3d8850eb706b)   


  1. UI 에디터를 연 뒤, UIGroup을 클릭합니다. [png](16354668571302757ee322edb4681a95ecc00359dbe19)   


  2. 왼쪽 기본 도구에서 [이미지] 버튼을 클릭하여 이미지 UI를 추가합니다. [png](1660786345914ecc31fc8aa174ed39195af5c34ed77c2)   


  3. 추가한 이미지의 프로퍼티 에디터에서 SpriteGUIRendererComponent의 ImageRUID 오른쪽 버튼을 클릭하여 Resource Picker 창을 엽니다.

     * RUID:fd255d50cb5177545a0e71c4a84  
[png](16808600045139383ec457a95496990e109b3e927509f)
  4. 프로퍼티 에디터 - UITransfromComponent에서 아래와 같이 값을 입력합니다.

     * Pos X = -257
     * Pos Y = 403
     * Width = 70
     * Height = 70 [png](1656658276777578d07057c8148a09fb8eced28b3a654)
  5.  [시작] 버튼을 누른 뒤 테스트합니다. 이미지와 텍스트 박스가 잘 배치된 것을 확인할 수 있습니다. [png](16607862245222f3b07edaa1f4535b86ee27851a9646a)