UI Editor

# Course Introduction

Let's learn about the UI Editor and the UI Group, which are used to edit the UI.

##### Reference Guide

  * [Controlling UI Entities](/docs?postId=1154&version=1%7B%22target%22:%22_blank%22%7D)
  * [Basic UI Components](/docs?postId=744%7B%22target%22:%22_blank%22%7D)
  * [Creating UI](/docs?postId=64%7B%22target%22:%22_blank%22%7D)



# Introducing the UI Editor

With the UI Editor, you can create the Inventory UI or the Shop UI by configuring UI entities and combining them with the UI entities provided by MapleStory Worlds. UI Editor is composed of the following.

[png](1671069935996bed5f94453e9487784be1efc342a3b10)

[{"Number":"[jpg](1634541272181b5c1a55fcf3d49b19734d25913c38583)","Name":"Preset List","Explanation":"You can use various UI Presets provided by the Maker."},{"Number":"[jpg](1634541300837cb541c2f44e046a79bb1901a885aa8ac)","Name":"UI Path Information","Explanation":"You can see the path information for the selected UI entity.Choose the parent path to select the entity."},{"Number":"[jpg](163454131465069e090278448490f965207e9a4a10348)","Name":"Canvas","Explanation":"This is where you place and edit UI entities.What appears on canvas will be output to the game screen when the game is running."},{"Number":"[jpg](1634541326353d8628c1473944497bf376acb7a65ca45)","Name":"Basic Tools","Explanation":"You can place UI entities such as images and buttons."},{"Number":"[jpg](1634541338689678f574f21e54a6ca533737924124d7e)","Name":"UI Groups Panel","Explanation":"You can select and add\/delete the UIGroup."}]

#### Shifting to UI Editor

In the top menu, press the [UI] button to convert to UI Editor. The Scene screen changes to the screen for the UI Editor. [png](17191966018196e67fe462b44418f8ffd50225816127c)

# UIGroup

UIGroup is composed of UITransformComponent, UIGroupComponent, and CanvasGroupComponent. Since the UIGroup acts like a folder, it is not affected by the orders in the Hierarchy and UI Groups. If you enable the UI Editor, you can manage the UIs you have created in the UI Groups panel window. If you add a new UI group, it will be reflected in both the Hierarchy and the UIGroup.

UIGroup provides three groups by default.

  * ToastGroup: UI Group provided for the convenience of creators. It is connected to the UIToast logic.
  * PopupGroup: UI Group provided for the convenience of creators. It is connected to the UIPopup logic.
  * DefaultGroup: UI group that is always enabled. Chat window and essential buttons such as attack and jump are placed in DefaultGroup. Different groups can be set as DefaultGroup depending on the creator's intent.



#### UI Groups Panel

In the UI Groups panel, you can see a thumbnail of the UIGroup you are creating. You can also rename the UIGroup. Names changed in the UI Groups are also reflected in the Hierarchy. If you select a group, the UI Editor screen changes to the corresponding group for editing.

[png](171316272172268387b11bb884f6790635819a8af7021)

#### Hierarchy - ui

In the Hierarchy, you can see the UI entities that belong to the UIGroup as parent-child relationships. You can edit components of UI entities or change the parent-child relationship of UI entities.

[png](1713249479009dae50f8dd5ba4aa78e16fa684e742644)

#### Always Enabling UIGroup

You can set whether or not to display using the DefaultShow property of UIGroupComponent. If you set the DefaultShow property as true[png](16346176407708cb3de01eaaf48a68ab2dd6fe1b1183f), the UIs belonging to that UIGroup will always be visible.

[png](1635153219911450a6374261549e985b5defd8c1ca4fc)

# UI Entity

There are two ways to create UI entities. You can use the default UI entities or use UI presets.

#### Basic UI Entities

Basic UI entities provide the most commonly used features when creating UIs. It is composed of image, button, scroll view, text, and input text. Creators can also combine multiple UI entities to create a new UI. Please refer to the [Basic UI Components](/docs?postId=744%7B%22target%22:%22_blank%22%7D).

[png](17132470861160af59286c47f4cdfb9012301dfc3d0c1)

[{"Icon":"[png](1634599004241e68d5e91df374710866c7f10599d1513)","UI Model Name":"Image","Function Explanation":"Outputs an image you want to UI. It is primarily used for displaying icons.","Included Component":"UITransformComponentSpriteGUIRendererComponent"},{"Icon":"[png](1634524924735d7c5b055209548e4b04c59abb701251d)","UI Model Name":"Button","Function Explanation":"Performs a certain action or function upon clicking\/touching.","Included Component":"UITransformComponentSpriteGUIRendererComponentButtonComponent"},{"Icon":"[png](1634525192881d1b9b9f851554f81b74425ff23f0ef57)","UI Model Name":"Scroll View","Function Explanation":"Sorts a lot of information into a list or a grid. E.g.) Inventory, shop","Included Component":"UITransformComponentSpriteGUIRendererComponentScrollLayoutGroupComponent"},{"Icon":"[png](16345252157689279f2e1212f460381577fe950d87703)","UI Model Name":"Text","Function Explanation":"Used to display text in the UI.","Included Component":"UITransformComponentSpriteGUIRendererComponentTextComponent"},{"Icon":"[png](1634525171304460516d8fc894f9f96220ee226cbd934)","UI Model Name":"Input Text","Function Explanation":"Users can enter the text. e.g.) Search window, ID\/PW window, etc.","Included Component":"UITransformComponentSpriteGUIRendererComponentTextComponentTextInputComponent"}]

#### UI Preset

MapleStory Worlds provides UI presets for each feature. Presets contain UI and scripts together, so when you deploy a preset, the included components are added to the MyDesk. After placing a preset, you can modify UIs and scripts to match the World you are creating. [png](1659671324185d35bc031f0f44baa86ade48918ac3311)