Ngui official website example-Explanation

The ngui sample creation process was made again by referring to the ngui example to deepen the understanding of ngui usage.
I. Example 1-uianchor
This example demonstrates how to use the anchor component in ngui to implement GUI alignment. The final effect is as follows:

Image: 1.png

The following example is implemented step by step.
1.
Delete the main camera of the new scene, create a new GUI layer in the layer, and then select ngui-> Create
A new UI. In this dialog box, set:

Image: 2.png

2.
Finally, click the CREATE your UI Button to automatically generate the following tree structure in the hierachy window:

Image: 3.png

3.
Change the parent object of the Panel to anchor ,:

Image: 4.png

4.
Name the anchor as anchor-bottom, add an empty game object to the object, name it offset, and reset its transformation. The empty game object can be used for the offset between its sub-object and the anchor. :

Image: 5.png

5.
Select "offset" and choose "ngui"> "create new widget" from the menu. a widget tool dialog box is displayed, which is used to create components such as buttons and labels. Set the parameters and click Add.
To button to ensure that the object behind the button is offset. This generates a label tag under Offset and changes the label text to bottom ,:

Image: 6.png

Image: 7.png

6.
Add an slicedsprite to the offset in the same way. Remember that the depth of the object should be smaller than that of the label, otherwise the label will be overwritten and invisible. Here, the label depth (depth) is set to 0, and the slicedsprite is-1, and the size of this element is adjusted in the editor ,:

Image: 8.png

Image: 9.png

7.
In the last step, select anchor-bottom and set the alignment (side) of the element to "bottom ". After selection, it will automatically direct itself to the lowest-end camera. We can adjust the offset between this component and anchor through offset. :

Image: 10.png

8.
The other seven anchor can be copied using Ctrl + D, and different anchor methods can be changed to align to different positions, and the offset position can be adjusted in the editing window, result:

Image: 11.png

9.
Finally, create the background, create an empty game object, and then reset the child object of the last panel. Name anchor-background, and select attach from the ngui menu.
An anchor, the empty game object becomes an anchor and the alignment mode is set to center.

Image: 13.png

10.
Then, anchor-backgournd is used as the parent object to create an empty game object named window. The window game object is only an auxiliary object set for convenient management.

Image: 12.png

Image: 15.png

11.
Under the window, create a slicedsprite using the create widget panel. The parameters are as follows:

Image: 13.png

12.
Scale the object in the editing window, align it to the window, and set its depth (depth) to-2. The final result is as follows:

Image: 14.png

13. Next, add a multi-line label to him and use the createwidget dialog box. The parameters are as follows:

Image: 16.png

14.
Write the required text in the text content box. Of course, because the English font is used, Chinese characters cannot be displayed, and the depth (depth) is changed to-2, line
Set width to 500. You can set the width of each line of text. :

Image: 17.png

In this official example, there is also a title above, which is actually composed of a label and a slicedsprite. Therefore, I will not elaborate on it here. The examples below will be created based on time. It is a little difficult to publish an article on the Forum. Especially after the text is written in word, you have to copy the image one by one and paste it on it. Due to the rush of time, there are no omissions. Please correct your criticism.