Ngui Research Institute Collection (five in all) the article of the rain pine ....

The first example of the beginning of the Ngui Research Institute (i) release five. 18, 2012 category "Unity Plugin for Ngui Institute"

original articles should be reproduced please specify: Reproduced from the Rain Pine Momo Program Research Institute this article link address: Ngui Research Institute of the beginning of the production of the first example (a)

Ngui is a plug-in for unity and using it to make your game UI will certainly do more with less. Why do you say that? First of all, we talk about the difference between GUI and Ngui, GUI is Unity's own drawing interface tool, its imaging principle is based on the surface, so the execution efficiency is very low, and does not provide the interface of the complex UI, even if the developer bite the bullet can only make the UI execution less efficient. However, Ngui is completely dependent on the 3D as if the camera in the game world is directly shining in a plane and then drawing its own UI on top of the plane, so it will perform very efficiently.

Ngui is a charge plug-in, in the asset store you can see the price. There are two ways to use Ngui without a genuine purchase: The first is to use the official free version, but there is a Ngui watermark in this version that cannot be formally released but is fully available for learning. The second kind: Use the genuine plug-in purchased by others, in the Internet has friends release Ngui plugin.

here is the free version Ngui download address, welcome everyone and Momo study together

Download Address: Http://www.tasharen.com/get.php?file=NGUI

after the plugin is downloaded, open unity to start importing plugins, first right-select Import Package->custom in Project View Package->ngui_ Free.unitypackage (just downloaded to the local plugin) after the import, please refresh your project to ensure that the Unity navigation menu bar appears? Ngui menu items, unity versions may cause Ngui to be imported without a menu item, or you can exit unity when you re-enter.

first remove the camera objects from the hierarchy view in the newly created Unity Project, and select the Ngui->create a new UI in the Unity Navigation bar menu. It can be understood as creating a camera, and the camera is directly shining in the plane, which is our UI plane. Click the Create a New UI menu item, as shown in the following image, to bring up the UI tool toolbar. The Layer drop-down list represents the camera's display level, and it should be clear that you have used the camera. Camera drop-down list sets whether the camera is facing 2D or 3D, and finally creates a new interface directly by clicking the Create Your UI.

then Ngui will automatically help us generate the following object relationships in the hierarchy view.

UI ROOT (2D): Look at the name I want to do the program should know what is the meaning of it. Interface root node, entry point.

The Camera:ngui generates a camera object that will be directly irradiated in the anchor Point panel.

Anchor: The anchor point of the interface that affects the display position of the UI. It hangs underneath the panel.

panel: The camera shines on it, and underneath it hangs some controls such as tags, buttons, sprites, drag bars, and so on.

We then started to create the interface components, select the ngui-> create a widget in the Unity navigation menu bar, and then select the font and image collection, where we first chose the collection of its own images, and later we learned how to make our own collection of images. Then select the template for the decal to finish the creation, here we create a simple map.

(click the image to see a larger image)

OK below we bind the material to the simple texture just created. As the following illustration shows, transform is the transformation of the name object.

p:x, Y, Z coordinates

rotation of the r:x, Y, Z axes

S:x can be understood as picture width, y as Picture height

The template we just created for simple Texture,ngui will help us bind the uitexture script.

Material: Added material object, in order to make the material display clearer, we set the material shader to Unlit/texture

Depth: Represents the depth, just like the order of UI drawing, the higher the number is drawn first, it is mainly used for sprite sprites (in detail later), in simple texture set invalid, but you can modify the z-axis coordinates in the form of change in the drawing order.

Color Tint: Sets the color for materials that do not have a decal.

Correction: Automatically set the picture width is high, just like in this example my picture width is 128x128, click the button will automatically modify the transform in S x = 128 and y = 128.

Pivot: The anchor point of the map display, no big problem.

preview: Check my avatar map below in the Monitor panel view.

continue to create a simple Texture binding in the panel, both boys and girls ' avatars are shown out ho ho. As shown in the figure shows the final effect diagram.

OK then we create a simple button, FANTASV Atlas is a set of images that comes with the Ngui resource bundle. In the next article I'll show you how to customize this collection of images, select Button,background in the template select "NGUI", "NGUI" is an image in the FANTASV Atlas image collection, we use him as our button background.

then write a simple script to listen to the button's click event, this code meaning is to click on the button to delete the girl's avatar.

Test.cs

Using Unityengine;
Using System.Collections;

public class Test:monobehaviour {

	void OnClick ()
	{
		Destroy ("Gameobject.find (" Texture1 "));}
}

The Onclik () method is called when the button is clicked, as long as the Uicamera script binds to the object or sub-object, and the object has a box collider component.

As the following illustration shows, the structure of the project is as follows. After clicking the button, the girl's avatar disappears.

button Background is the background image of the buttons, it is made up of sprites

Label is a label box that can be written to text content. (click the image to see a larger image)

Ngui really gives a lot of power. Fun. Good. Interesting. Wow, a click. Here is a very good Ngui article, recommend everyone to learn. http://1vr.cn/article.asp?id=605


the use of sprite sprites and sprites in the Ngui Academy (ii) release five. 21, 2012 category "Unity plugin of Ngui Institute" original article for reprint please specify: Reprint from the Rain Pine Momo Program Research Institute this link address: The use of Sprite and Elf animation in the Ngui Academy (ii)

study a few days Unity3d powerful Ngui plug-in, Momo think Ngui one of the biggest bright spot is Sprite wizard. Let's first talk about what the genie is. It can be in a large image to intercept part (large image is the whole collection of images, and the small image is a sprite), and then the name of an elf, so that the time through the name of the wizard can be directly drawn, and the sprite can also play the animation. It's really very powerful anyway. In this section we learn how to create your own sprite files.

First we create a Prefab object in project, and by default we give it the transform transform property, and for the moment we name the Prefab object Mysprite. Next, hang up the image collection component for prefab. Select Component->ngui->ui->atlas (Image collection) in the Unity navigation menu bar.

Common properties are described in:

Coordinates:ui coordinate units, with the default pixels (pixels) on the line.

Pixel Size: The length of the pixel is unit 1.

add/delete: Add and remove Sprites.

First is the name of the current sprite and will appear in the Sprite drop-down list if more than one sprite has been added. Further down is to set the sprite in the display area of the large map and coordinates, we can see in the image below that we have selected an area in the whole large map, that is, the green rectangle, the rectangle is the content of the current sprite.

Here we divide this image into 4 completely equal sprites, and then we learn how to control the drawing and sorting of these sprites in the code. Create a script Test.cs and hang it on the sprite object you just created.

Test.cs View Source

01	Using Unityengine;

02	Using System.Collections;

03	Using System.Collections.Generic;

04

05	public class Test:monobehaviour {

06

07	void Start ()

08

{

09

10	Get the Sprite component script

11	Uisprite UI = Gameobject.getcomponent<uisprite> ();

12

13	Get the number of sprites in the image collection

14	Debug.Log ("Number of sprites" + ui.atlas.spriteList.Count);

15

16	Gets the name of the corresponding corner-mark Sprite object in the image collection array

17	String name = Ui.atlas.spritelist[2].name;

18

19	Set the name of the display sprite

20	Ui.spritename = name;

21st

22	Set the depth of the sprite, the larger the value, the more forward the drawing

23	Ui.depth = 2;

24

}

25

}

as shown in the following illustration, the sprite has been dynamically modified in the code, and its depth is set so that it is displayed in front. If you want to modify its x, y position, modify the transform directly. Z-axis, modify the depth of the line, without modifying the z-axis coordinates.

Let's take a look at the sprite animations, Ngui has helped us encapsulate the class uispriteanimation dedicated to playing sprite animations. Momo on the Internet casually find a set of 2D character walking animation, according to the method described above to import the whole picture into the project. As shown in the following figure, this group of characters ' walking animations Our selection takes 4 frames left to move.

Here I am emphasizing that the shader that modifies the material needs to be modified to support the background transparency, and we choose unlit/transparentcolored for the shader of the current material.

Then Select the Sprite (NGUI) in the hierarchy view (the Sprite object you just created) and select Component->ngui->ui->sprite in the Unity navigation menu bar. Animation (frame animation) component. When we run the game directly we will find that the protagonist has moved in the order of the Elves just cropped, which is not finished, we learn how to control the sprite dynamically in the code.

Our goal is to use Ngui to create a button on the screen, first click the button protagonist to play a walking animation, click the button again to animate the character will stop. In the previous article we have learned the corresponding event of a button in Ngui, and if you want to listen for a button's click event in another object or script, you can use the way the message is delivered. Ngui helped us encapsulate the class that delivered the message once, and in the Unity navigation menu bar, select ngui-interaction->buttonmessage. Its principle is also to use Unity's SendMessage, interested friends can go to see. Next, create the script Test.cs on the button you just created.

Test.cs View Source

01	Using Unityengine;

02	Using System.Collections;

03	Using System.Collections.Generic;

04

05	public class Test:monobehaviour {

06

07	Play animations with no play

08	BOOL Isplayanim = false;

09	Get the Sprite Object

10	Gameobject animobj = null;

11

12	void Start ()

13

{

14	Get the Sprite Object

15	Animobj = Gameobject.find ("Sprite");

16

17

}

18

19	void OnClick ()

20

{

21st	if (Isplayanim)

22

{

23	Stop animation

24	Isplayanim = false;

25	Destroying Uispriteanimation Components

26	Destroy (animobj.getcomponent<uispriteanimation> ());

27

28	Set the sprite default frame after animation stops

29	Uisprite UI = Animobj.getcomponent<uisprite> ();

30	String name = Ui.atlas.spritelist[0].name;

31	Ui.spritename = name;

32

33

}