Example production

July 4, 2022

Example production

Getting Started Example 1: Select Team Interface

We made a team selection interface to help you quickly understand the steps and functions of each function.

1.First, create a new UI file in the resource management panel and name it “selectTeam”;

2.Select the root node (the control named “Root”) in the control level management panel, and adjust its size as shown below;

image.png

3.Drag the picture widget into the canvas as a window for selecting the team;

4. Select the picture control just dragged in and replace the picture resource in the property panel;

5. Adjust the picture control to the appropriate size;

6. Adjust the stretching margin of the picture to avoid the frame deformation caused by stretching;

7. Adjust the anchor point and coordinates and set the picture control to the middle of the screen;

8.Drag in a text control as the title of the window and set its text to “Select Team”;

9. Set the font size of the text, adjust the size of the text control, and center the text in both horizontal and vertical directions;

10.Drag in an empty window as a container for team 1 icons and select buttons for easy layout;

11.Duplicate the empty window just now as a container for the team 2 icon and select button;

12.Drag in a picture control as the icon of team 1;

13.Replace the icon resource of team 1, and add background color and border;

14. Drag a button control as the selection button of team 1;

15.Modify the text of the select button to “select team 1”;

16.Copy the icon and button of team 1 to the container of team 2, and modify the corresponding text and pictures;

17.Here, the layout of the team selection interface is completed. In order to display the interface in the game, you need to simply write some scripts. Click the game setting button in the toolbar to find Client script

18.Open the file named main Lua’s script, delete the original code, and then enter the following code (the function of this code is: after 10 frames are created in the game world, the team selection interface will be displayed. For specific UI related API interfaces, please refer to API Manual);

image.png

World.Timer(10, function()
    local window = UI:openWindow("selectTeam")
end)

19.Create two new teams in the game settings, and the settings are as shown below;

image.png

20.Select any control in the interface and click Edit UI script,and enter the following code (the function of this code is: click the button to send the protocol to the server and close the current window. For specific UI related API interfaces, please refer to API Manual);

image.png

M.Image.DefaultWindow.Button.onMouseClick = function()
    PackageHandlers.sendClientHandler("SelectTeam", {teamId = 1})
    M:close()
end

M.Image.DefaultWindow1.Button.onMouseClick = function()
    PackageHandlers.sendClientHandler("SelectTeam", {teamId = 2})
    M:close()
end

21.Click the game setting button in the toolbar to find Server script open a column named main Lua’s script, delete the original code, and then enter the following code (the function of this code is: register a protocol in the server. When the server receives the protocol, the player who sends the protocol will join the team he chooses. For specific UI related API interfaces, please refer to API Manual);

image.png

PackageHandlers.registerServerHandler("SelectTeam", function(player, packet)
      local teamId = packet.teamId
      local team = Game.GetTeam(teamId)
      if not team then
        team = Game.CreateTeam(teamId)
      end
      team:joinEntity(player)
end)

22.click function button to enter the game and view the effect of the interface.

Getting Started Example 2: Backpack Interface

Next, make a simple knapsack interface to help you understand the use of scroll panel and layout controls.