Use of Sprite and sprite animation in ngui Research

Zookeeper

After studying the unity3d powerful ngui plug-in for a few days, I think one of the biggest highlights of ngui is the sprite. Let's talk about what the genie is? It can intercept a part in a large image (a big image is a set of images, and a small image is an genie), and then name a genie, you can use the sprite name to draw a video directly, and the Sprite can play an animation. In short, it is really powerful. This section describes how to create your own genie files. For more information about basic usage, seeNgui study: the first example

First, we create a prefab object in the project. By default, we change its transform attributes. Now we name the prefab object mysprite. The prefab image collection component is added. In the unity navigation bar, choose component> ngui> UI> atlas.

Common attributes:

Coordinates: Ui coordinate unit. Use the default pixels (pixels.

Pixel size: the unit of length of a pixel is 1.

Add/delete: add and delete genie.

First is the name of the current Sprite. If you have added multiple genie, they will appear in the sprite drop-down list. The next step is to set the display area and coordinates of the Sprite in the big image. We can see that an area is selected in the box of the entire big image, which is a green rectangle, the rectangle is the content of the current genie.

Next we will divide this image into four completely equal genie, and then we will learn how to control the rendering and sorting of these genie in the code. Create the Script test. CS and attach it to the created genie object.

Test. CS

Using unityengine; using system. collections; using system. collections. generic; public class test: monobehaviour {void start () {// get the wizard component script uisprite UI = gameobject. getcomponent & lt; uisprite & gt; (); // gets the number of genie in the image set. debug. log ("Number of genie" + UI. atlas. spritelist. count); // get the name of the corresponding badge genie object in the image set array string name = UI. atlas. spritelist [2]. name; // set the UI of the display sprite name. spritename = Name; // set the depth of the sprite. The higher the value, the higher the UI. depth = 2 ;}}

12345678910111213141516171819202122232425

Usingunityengine; using system. collections; usingsystem. collections. generic; publicclass test: monobehaviour {voidstart () {// get the wizard component script uispriteui = gameobject. getcomponent & lt; uisprite & gt; (); // gets the number of genie in the image set. debug. log ("Number of genie" + UI. atlas. spritelist. count); // obtain the stringname = UI of the corresponding badge object in the image set array. atlas. spritelist [2]. name; // set the UI of the display sprite name. spritename = Name; // set the depth of the sprite. The higher the value, the higher the UI. depth = 2 ;}}

 

As shown in, the genie has been dynamically modified in the code, and its depth has been set to display it in front. If you want to modify its X and Y positions, modify transform directly. Modify the depth of the Z axis without modifying the Z axis coordinates.

Next, let's take a look at the genie animation. ngui has helped us encapsulate uispriteanimation, Which is specialized in playing the genie animation. On the Internet, Momo randomly finds a group of walking animations with 2D protagonists and imports the entire image into the project according to the method described above. As shown in, the walking animation of this group of characters takes four frames from the left.

Here I want to emphasize that we need to modify the color of the material so that it supports background transparency. For the color of the current material, we choose unwritable/transparentcolored.

Select sprite (ngui) in hierarchy view, and select component> ngui> UI> sprite animation (Frame Animation) in the Unity navigation menu bar) component. Now we can directly run the game and we will find that the main character has been moved in the order of the genie just cropped. This is not complete yet. Next we will learn how to dynamically control the genie in the code.

In this example, we use ngui to create a button on the screen. The first time we click the button, the main character will play the walking animation. clicking the button again will stop the animation. In the previous article, we have learned the corresponding events of buttons in ngui. If you want to listen to click events of a button in other objects or scripts, you can use the message transmission method. Ngui encapsulates a message passing class. In the unity navigation bar, choose ngui> interaction> buttonmessage. The principle is to use sendmessage of Unity. If you are interested, you can check it out. Next, let's talk about the topic. The Script test. CS is hung on the button you just created.

Test. CS

Using unityengine; using system. collections; using system. collections. generic; public class test: monobehaviour {// play the animation and do not play the bool isplayanim = false; // get the gameobject animobj = NULL; void start () {// obtain the genie object animobj = gameobject. find ("sprite");} void onclick () {If (isplayanim) {// stop the animation isplayanim = false; // destroy the uispriteanimation component destroy (animobj. getcomponent & lt; uispriteanimation & gt; (); // After the animation is stopped, set the default frame uisprite UI = animobj. getcomponent & lt; uisprite & gt; (); string name = UI. atlas. spritelist [0]. name; UI. spritename = Name;} else {// playback isplayanim = true; // Add the playback animation component animobj. addcomponent ("uispriteanimation"); // you can set the playback speed of an animation. The greater the value between 1 and 60, the faster the playback speed. uispriteanimation uianim = animobj. getcomponent & lt; uispriteanimation & gt; (); uianim. framespersecond = 10 ;}}}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

Usingunityengine; using system. collections; usingsystem. collections. generic; publicclass test: monobehaviour {// play the animation and do not play boolisplayanim = false; // get the gameobject animobj = NULL; voidstart () {// obtain the genie object animobj = gameobject. find ("sprite");} voidonclick () {If (isplayanim) {// stop the animation isplayanim = false; // destroy the uispriteanimation component destroy (animobj. getcomponent & lt; uispriteanimation & gt; (); // After the animation is stopped, set the default frame uispriteui = animobj. getcomponent & lt; uisprite & gt; (); stringname = UI. atlas. spritelist [0]. name; UI. spritename = Name;} else {// playback isplayanim = true; // Add the playback animation component animobj. addcomponent ("uispriteanimation"); // you can set the playback speed of an animation. The greater the value between 1 and 60, the faster the playback speed. uispriteanimationuianim = animobj. getcomponent & lt; uispriteanimation & gt; (); uianim. framespersecond = 10 ;}}}

As shown in, run the game and click the button. The main character begins to stride and begins to walk. clicking the main character again will stop playing the walking animation. Zookeeper. Finally, I wish you a pleasant learning experience !!

Use of Sprite and sprite animation in ngui Research