Ngui official website Example 6-draggable window (1)

After reading the above tutorials, I guess you have some knowledge about the first several ngui instances. I suggest you do it yourself, so that you can better understand it. Next, I will detail the creation process of the drag-and-drop window. Here I will do this in four steps: 1. Create and layout the interface; 2. Create the dynamic effects and drag-and-drop functions of the GUI; 3. Create the lighting effect;

1. Create and layout the interface.

1.
In the ngui menu, open the create a new UI dialog box, set camera to advanced3d in the dialog box, and click Create
Your UI. In this case, the hierarchy window generates the Corresponding Hierarchical result ,:

Image: 1.png

Adjust the hierarchy result so that camera and panel are separated, and camera and panel are also separated from the UI.
Root (3D) deletes anchor and uiroot (3D), creates a scene empty game object, resets it, creates a 3dui empty game object, resets it, and creates a window.
Reset the game object, reset the panel, and reset the hierarchy between them (reset constantly to better locate each component ), window, 3dui, and other empty objects are only used to facilitate the management of elements in the scenario. At the same time, the Z value in postion of camera is set to-1.7, in this way, there is a certain distance between the GUI and the camera, and the camera's near is set to 0.01. The result is:

Image: 2.png

Select panel to add a background with a normal texture. In the create a new widget window, select tiledsprite template as template and honeycomb as the background. The parameters are as follows, after setting, click Add.
To, add a tiled Sprite for the GUI,
To ensure that the value behind the button is panel:

Image: 3.png

After tiled Sprite is added, scale it to X = 490, y = 510, and set the color to black ,:

Image: 4.png

To see the effects of the normal map, select panel, select normals, and add a parallel light to the scene to adjust the angle of light. The final effect is as follows:

Image: 5.png

Add a window border for this window, select the create a new widget dialog box, select template as the slicedsprite template, and sprite as the background. After setting the parameters, click Add
To create a sliced Sprite. After the creation, select the sliced Sprite and set its dept to-1, color
Tint is green, x = 498, y = 515, slightly larger than the background. You can see a green border at the edge of the window ,:

Image: 6.png

Add a top bar for the window, select the create a new widget dialog box, set the parameters, and click add to to create a sliced
Sprite. After the creation, select the sliced Sprite and adjust its location and size, parameters and effects:

Image: 7.png

Create a window title. Select create a new widget dialog box, select template as label, and click Add
To, create a label for the window, enter example in the label text input box
Draggable window, and adjust its position in the scene editing window. The parameters and final parameters are shown in:

Image: 8.png

Use the same method to add another label to it, or use Ctrl + D to copy it, modify its text content, and set its line
The width is 460, and the position is adjusted. The result is:

Image: 9.png

Create a logo icon. Select the create a new widget dialog box, select Sprite in template, Sprite as ngui, and select Add
To, add a logo icon to the window and adjust its position. The final effect is as follows:

Image: 10.png

Create two checkboxes. Similarly, select the create a new widget dialog box, select checkbox in template, Set background to dark, checkmark to X, and click Add
To, add a checkbox for the window. Select the label in the checkbox and change the text to enableautoyaw. Then select the background in the checkbox and set the color
Select blue for tint. Adjust the position of the checkbox. Next, use Ctrl + D to copy another checkbox and change the text in this checkbox to enable
Dragtilt, placed on the right side, the final effect
Description:

Image: 11.png

Create two buttons. Select the create a new widget dialog box, select the button in template, select the button in background, and click Add.
To, add a button for the window. Select the label under this button, modify the text to hello, select the background under it, and set the color
Tin is blue and placed in a proper position. Press Ctrl + D to copy another button, set the label text to world, and place it in a proper position. Final effect:

Image: 12.png