developer_center:developer_editor:ui

UI Editor

* UI Store
* UI Lottery - Card Flip Effect

18-minutes reading
Guide
After reading this tutorial, you will have a comprehensive understanding of UI Editor functions. Specifically knowledge as of follows:
1. How to create a new UI and manage UI resources
2. Details of the use of components, especially the use of Alignment, Stretch, Association and Level
3. Interface Scaling and Undo/Redo operation
4. UI Setting
5. UI trigger implementation (change the page status and button image replacement)

Before we study the UI editor, let's briefly understand the concept of UI and why we need to use UI.

UI Concept
“UI” stands for “User Interface,” which is responsible for implementing human-computer interaction.
The UI is designed for players to enjoy the game, so the UI design should follow the characteristics of easy understanding, easy operation, and beautiful appearance.

In Miniworld development mode, a powerful UI editor is built in to help developers to build their UI rapidly. Let's take a look at how charming it is!

Create UI
→ In developer mode, click the button on the far left at the top to open the Resource Center
→ Click the UI Library and then create a new UI

UI Library
In UI Library, you can manage the UI of the current map, and you can also manage the UI you have created on other maps.
First, lets see how to manage the UI of the current map.

UI Library of Current map
→ When the number of UIs created for the current map is greater than 1, a list of UIs will appear in the current map UI library.Clicking “Manage” allows you to delete, synchronize, and copy UIs.
Delete：Delete the UI. If the UI is not synchronized to the Main Library, it can not be retrieved.
Synchronize：Synchronize the UI to the Main Library to facilitate sharing the UI on other maps.
Copy：Make a copy to the current UI Library.

Main UI Library

→Click Main Library → UI Library to manage the synchronized UI.
Import：Import the UI into the current map.
Delete：Permanently Delete the UI. (be careful to use this function)
The system will automatically synchronize the UI from the current map into the Main UI Library.

Add Components
After creating a new UI, we can start designing our UI components. Every complex UI interface is composed of components one by one.
Here, components are divided into four types: Button (component with interactive feedback), Picture (the most basic and most frequently used component), Word (used to transmit text information), Input box (used to to receive player input).

Below, we use the “button” and “picture” components to make a simple selection interface.

Let's take a look at the final effect: when the button on the left is clicked, the color will darken. When the picture on the right is clicked, nothing will change.

Therefore, interaction can be understood as: after people perform an interface operation, the interface gives people a feedback, which can be a change in color, size, or pattern.

Undo and Redo
There are two buttons on top to allow developers to flexibly undo and restore operations.

Interface Scaling
The interface scaling button is on the upper right, and the center point of the scaling is the selected component. If no component is selected, the scaling will take the center of the page as the center point.

Component Attribute
After the UI components are created, there will be many details that need to be modified, such as location, size, color, etc. The Attribute panel is where you can make adjustments to the component.

→Click any component, select the “Attribute” to open the attribute list, then you can modify the name, pattern, position, size, layer, alignment, etc…

Most of the attributes are very simple and easy to understand, except only a few that we will have the further explanation in the following content.

Location→Alignment(layer concept)
We can see that when the upper, middle, left, and upper left corners are selected, the position of the component will be changed based on the entire large gray background. That means, the big gray background is the parent component of this component.

We click on the level panel, and we can see that the gold coin is at the same level as other UI components, so the default parent of the gold coin is the gray background (which is the entire game interface).

Let's try to put the gold coin as a child component of the button background, and then look at the effect →Click on the level, modify the “Gold Coin” level to be a sub-level of “Button Background”, and then use the position alignment to adjust the position.

At the upper-left corner position, the coordinate of the gold coin component is displayed as (0, 0). Therefore, we can conclude that the position of the child component is changed based on the coordinate system of the parent component. As shown in the coordinates in the picture below.

Dimension→Scretch
This is a bit similar to the above “align with the parent component”, which is based on the parent component to make the adjustment, and the stretched size will not be larger than the size of the parent component. Just look at the animation below.

Associate
The associated function can ensure that the child component maintains a fixed position within the parent component, so as not to mess up the position with the scaling of the parent component.

→Before the child component is not associated with the parent component, the position of the child component will become strange when the parent component is scaled.

→After associating with parent component, the position of the child component is relatively unchanged from the parent component as the parent component is scaled.