First, import Ngui package, where we chose the version of Ngui 2.6.3. In the Unity Project window right click to select Importpackageàcustom Package, select the Ngui plugin you downloaded, after the completion of the import effect as shown: 1. Select Menu Nguiàopen The UI Wizard, pop-up Create UI dialog box. Click Layer Window Right button, pop-up Layer selection dialog box, where we choose Addlayer New Layer window, we create a new layer called Ngui, add layer and then return to the Uitool window, change the interface layer for Ngui In the following camera options, there are none,simple2d,advanced 3d options for creating an interface without camera (if there is already a UI interface, we just want to add a new interface, we can select this), A simple 2D interface (this option does not have a z-axis effect), Advanced 3D interface (the interface under this option has a z-axis effect and can be 3D rotated, the UI created with this option has adaptive resolution). Here we first create a simple2d interface, and then click on the Create Your UI button below, creating a UI. The program will automatically create a node-level relationship with some objects, as shown in the diagram, which is the UI root node, a camera node, an anchor node, and a panel node for the UI such as the Hold button, we can now use the function and function of these nodes, just remember the panel node, All the buttons we create later are placed at the panel level. Create UI elements, select Menu Nguiàopen the Widget Wizard, pop-up Create UI Element dialog box first is the Atlas window, and Atlas is a big picture that holds the various icons we need to use. In the later we will explain how to create our own atlas,font is the font used when we create the UI, template can allow us to select the type of UI to create, including Label,spirit, and so on, as we can use Ngui to bring some of the atlas, As shown in Ngui, some Atlas is included with the font typeface in Atlas. Here Atlas I select Fantasy Atlas,font select Fantasy Atlas–font Normal, select Fantasy Atlas in the Project window and drag to Atlas, select Fantasy Atlas–fontnormal, Drag and drop into font, in template, we select the Spirit,spirit option so that we choose the icon that needs to be created, where we choose to smooth,pivot the default center, and then make sure that the option to the right of AddTo is the panel we want to add to, if not, We can click to select the inspector in the Panel,ngui will automatically switch for us. Finally, clicking Addto,ngui creates a spirit named Sprite (Smooth) under the Panel node. Properties Window figure: 1. The atlas,spirit,pivot here are all chosen when they were created, and if they are not satisfied, they can be modified here. Depth can control our icons to move forward or backwards, for example, if we want an icon to be above another icon, we can set it to a larger depth. Correction is mainly used to correct the problem that the icon pixel is odd. Color tint can be based on the icon color for the icon coloring, clipboard is the color of the clip, when we select a Cilpboard color, click Paste can paste the color to the colortint color. The Spirit type represents the Spirit tile to create, including the simple,sliced,tiled,filled. If the icon is small, we need to tile very large, but do not want to see duplication, you can choose sliced.
Here we select Sliced,fillcenter to select Default. Then modify the spirit scaling value. We can choose different slicedtype to see the effects of different options. As shown in the figure: the first three options are roughly the same, only the fourth filled option also includes fill Dir (padding direction), fillamount (padding), Invert fill (Invert fill) three options, which three are mainly used to modify the fill to 360 rotational fills, horizontally, Vertical filling and so on, we can test their own effects.
