Using Editor Services

# Course Introduction

Once you have created the World and started the test play, event functions will be called according to their life cycle. In contrast, [EditorService](/apiReference/Services/EditorService) supports the use of scripts in the Maker. Creators can use EditorService to create the crafting tools they need.

# Try the editor service

Let's leave the log using EditorService.

  1. Select MyDesk- Create Scripts - Create Component to add a script component, and name it HelloEditor.

  2. Add EnterEditorEvent, EnterPlayEvent to Event Handler and write as below.
         
         @Component
         script EditorModeMonitor extends Component
         @EventSender("Service", "EditorService")
         handler HandleEnterEditorEvent(EnterEditorEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: EditorService
         -- Space: Editor
         ---------------------------------------------------------
         
         -- Parameters
         ---------------------------------------------------------
         log("Enter Editor Event")
         end
         
         @EventSender("Service", "EditorService")
         handler HandleEnterPlayEvent(EnterPlayEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: EditorService
         -- Space: Editor
         ---------------------------------------------------------
         
         -- Parameters
         ---------------------------------------------------------
         log("Enter Play Event")
         end
         end
         



    
    
    3. Add the HelloEditor component to **Hierarchy - World - Common**.
    [png](16456799439142a316dfd3f4d423faf840a94b8681bc1)
    
    4. Click Start[png](163453086660754178e0ff96a45c58d1a580a4dfab9d1) to call **EnterPlayEvent** and see if the log is printed.
    [png](1687841635285b77ef2ece1e04d24808a25fdba02c8c4)
    
    5. Quit playing and return to the UI Editor. Upon returning to the editor, **EnterEditorEvent** is called. **EnterEditorEvent** is also called during the first editor entry in out-of-game.
    [png](168784164997278c571c6f54c49a282600c1412e2790d)
    
    
    # Using editor-type UI
    
    You can compose an editor-type UI by changing **GroupType** of UIGroupComponent.
    The editor-type UI can be only viewed and operated while playing or editing the World. Let's check it with a simple example.
    [png](16560458866694a2f964d7cbb44a1b4e966596d010277)
    
    
    1. Open the UI editor.
        [png](16611491146220ecdd23bd75c4e0b893476b109727246)
          
    
    2. Add a new UIGroup.
        [png](16560459550233fba6f0be20f40b8813dd49b8b984959)
          
    
    3. Select the added UIGroup.
        [png](16560460059060c0a533e60744a3a94c3be9280876c60)
          
    
    4. Go to Property Editor and change GroupType of UIGroupComponent to **EditorType**.
        [png](1645680750596d7f27d2366374420b79ae4dfd6ef6d7e)
          
    
    5. Let's add a new button. Click the button in the upper left menu to add it and change the button name to **"Btn_EditorTest"**.
        [png](1656046223542857a7fa8661b424a8fb5bbd89e60eb72)
    
    6. Click the **[Editor UI]** button on the right top of the scene screen. The added button is visible even when not in play state.
        [png](1656046080229263374149c6541d9b49665418b2943ec)
        The button can be clicked, so when it receives and processes the click event, you can make the button work as intended.
    
    7. Open the **HelloEditor** component that was added earlier.
    8. Add **ButtonClickEditorEvent** from Event Handler.
    9. Set the target of that event to the **Btn_EditorTest** entity added earlier.
    10. After adding the log in the form below, close the script editor.
        ```lua
    @Component
    script ButtonClickHandler extends Component
        @EventSender("Self")
        handler HandleButtonClickEditorEvent(ButtonClickEditorEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: ButtonComponent
        -- Space: Editor
        ---------------------------------------------------------
    
        -- Parameters
        local Entity = event.Entity
        ---------------------------------------------------------
        log("Button Click")
        end
    end
    

  11. Let's click the placed button. You can see that the added log is normally printed. [png](168784179772119cec289725b4252b43efb1499f22b93)



# Placement of Properties and Entities Using the Editor UI

You can use the script to access other components in editor state and modify their properties. In this case, property values are stored in a different way than in the World play. During the World play, properties will revert to their original values set when the World was created when the user exits play and returns to the Maker. However, for the Editor UI, the changed values are saved. Most of the APIs provided by MapleStory Worlds can also be used in the editor environment.

#### Change the World Background in the Editor

The following is an example of changing the background of the World when clicking a button in editor state. If you save the changed World background, the World will keep the changed background.
    
    
    @Component
    script ToggleBackgroundChanger extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
        self.IsButtonClicked = not self.IsButtonClicked
    
        local backGroundRuid = "000000"
        local backGroundComp = _EntityService:GetEntityByPath("/maps/map01/Background").BackgroundComponent
    
        if self.IsButtonClicked then
            backGroundRuid = "000001"
        end
    
        backGroundComp:ChangeBackgroundByTemplateRUID(backGroundRuid)
        end
    end
    

#### Spawn an Entity in the Editor

You can also spawn and place entities on the editor when clicking a button. The following example spawns an object when clicking a button in editor state.
    
    
    @Component
    script ClickModelSpawner extends Component
        @EventSender("Self")
        handler HandleButtonClickEvent(ButtonClickEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: ButtonComponent
        -- Space: Client
        ---------------------------------------------------------
    
        -- Parameters
        -- local Entity = event.Entity
        ---------------------------------------------------------
    
        local spawnModelId = "000000"
        local spawnPosition = Vector2(0,0)
    
        _EditorService:SetSelectedModel(spawnModelId)
        _EditorService:CreateSelectedModel(spawnPosition)
        end
    end
    

# Event of Editor Services

The editor service does not use life cycles such as `OnBeginPlay()` or `OnUpdate()` because it does not play the World. Create scripts based on editor events. Detailed information about the available functions and events of the editor service can be found on the API reference site. The most representative events of the editor service are WorldLoadEditorEvent and EnterEditorEvent.

  * WorldLoadEditorEvent: Executed once during the process of loading the World after running the editor. So it is a good event for initialization.
  * EnterEditorEvent: Called when the World is loaded for the first time after launching the editor and at the end of a test play. Note that it is called repeatedly.



Some common types of events are as follows.

[{"Type":"Events called at specific points in editor usage","Event":"EnterEditorEventWorldLoadEditorEventEnterPlayEvent"},{"Type":"Events for selecting an Entity","Event":"EntitySelectEditorEventEntityDeselectEditorEvent"},{"Type":"Events for Creating and Deleting an Entity","Event":"EntityCreateEditorEventEntityDeleteEditorEvent"},{"Type":"Events to check the location information clicked with the mouse","Event":"ScreenTouchEditorEventScreenTouchHoldEditorEventScreenTouchReleaseEditorEvent"},{"Type":"Events to detect the button state","Event":"ButtonClickEditorEventButtonStateChangeEditorEvent"},{"Type":"An event to detect the state of a text input field.","Event":"TextInputValueChangeEditorEventTextInputEndEditEditorEvent"}]

# Saving the Edited Information

You can save the changed value by placing an entity using SpawnService or editing the property's value. Changing and editing a property's value gives you the ability to alter a lot of information, but it may not be enough to store complex information.

EditorService provides the ability to access data and read and write values. Let's say you have organized your data as follows:

[png](16456812592398638debc633f4b4383d1001170926f89)

To get the value of the col3 column of dash, you can write as follows.
    
    
    @Component
    script ConfigValueFinder extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local data = _DataService:GetTable("CustomEditorData")
            local rowCount = data:GetRowCount()
            
            for i=1, rowCount do
                local name = data:GetCell(i, "name")
                if name == "dash"then
                    local value = data:GetCell(i, "col3")
                    log("find value : "..value)
                    break
                end
            end
        end
    end
    

It can be used in the same way as the data service, but the way you set the data is different. To set the data, you must use the API of the EditorService. The editor service supports `DataSetInsertRow()`, `DataSetRemoveRow()`, and `DataSetSetCell()` functions for this purpose.

Below is an example of adding data to the 4th line and setting related data.
    
    
    @Component
    script EditorDataEntryCreator extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local data = _DataService:GetTable("CustomEditorData")
            local rowCount = data:GetRowCount()
            
            _EditorService:DataSetInsertRow("CustomEditorData")
            
            _EditorService:DataSetSetCell("CustomEditorData", rowCount + 1, "name", "skill1")
            _EditorService:DataSetSetCell("CustomEditorData", rowCount + 1, "col1", "10")
            _EditorService:DataSetSetCell("CustomEditorData", rowCount + 1, "col2", "20")
            _EditorService:DataSetSetCell("CustomEditorData", rowCount + 1, "col3", "30")
        end
    end
    

If you want to change the col2 column value of dash to 40, write the script as follows.
    
    
    @Component
    script DashConfigUpdater extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local data = _DataService:GetTable("CustomEditorData")
            local rowCount = data:GetRowCount()
            
            for i=1, rowCount do
                local name = data:GetCell(i, "name")
                if name == "dash"then
                    local value = data:GetCell(i, "col2")
                    _EditorService:DataSetSetCell("CustomEditorData", i, "col2", "40")
                    break
                end
            end
        end
    end