NGUI tutorial (3) use external images to create an Atlas ),

NGUI tutorial (3) use external images to create an Atlas ),

There are several concepts before the actual operation.

Atlas: gallery, which combines the materials provided by art with NGUI's Atlas Maker tool into an image (accurately speaking, prefab And mat are also generated at the same time ).

Sprite: Sprite. Since Atlas has merged all your images, how can this problem be called separately? Sprite is used.

 

1. Import external Images

After understanding the above two concepts, let's get down to the truth. First, we need to use external images. You can use pictures defined by yourself or images provided by art, here I used the following two images. If you do not have any images, you can also use the following two images (these two images are 100*100 png images ).

With the materials, we need to apply the two images to the project, and then proceed with the previous tutorial. Create a folder named UITexture In the example folder to import the two images, after the import is complete, you can see the two images in the folder.

 

2. Create an Atlas)

After importing the image to the project, the next step is to create the gallery. Go to the UITexture folder, press Shift to select the two images, right click --> [NGUI] --> [Open Atlas Maker], and you will see the interface of the Atlas Maker.

Click Create. In the pop-up dialog box, select the location where the gallery is saved, save the gallery to UITexture, name it MyBtn, and click Save.

In this way, in the Altas Maker dialog box, you can see the name of the gallery we generated and ask MyBtn. In View Sprites, you can see the pictures btn_01 and btn_02.

Close a premade file of Altas pipeline)

 

3. Use Atlas and Sprite to add images for buttons
In the Hierarchy panel, select the Background of the button and view the Inspector Panel of the Background.

On the Inspector Panel of the Background, click the Atlas button. In the displayed dialog box, select MyBtn, and click the Sprite button to select Btn_01.


In this way, we can see that the background image of the button is changed to btn_01.

The button size is 200*50, but the image size is 100*100. therefore, if the image is distorted, you only need to modify the Background attribute of the button to change the Dinesions In the Widget to 100*100. you can.

In this way, you can use external images to create an Atlas and use the images in the gallery.