NGUI使用教程(3) 使用外部图片制作Atlas(图集)

在实际操作之前有几个概念先弄清一下

Atlas:图集,把美术给你提供的素材,用 NGUI 的 Atlas Maker 工具。合成一张图片（准确的说,还同一时候生成了prefab、mat ）。

Sprite:精灵,因为Atlas已经把你的图片都合成一张了，那怎么单独调用呢？就是用Sprite。

1.导入外部图片

理解完了上面两个概念之后咱们能够言归正传了，首先须要使用外部图片,你能够使用自定义的图片或是美术提供的图片。能用即可，这里我用了以下两张图片。要是你没有图片也能够使用以下两张图片（这两张图片是100*100的png图片）。

有了素材之后,咱们须要把这两个图片用到项目中去。接着上个教程往下做，在example目录下新建一个目录UITexture把这两张图片导入进去,导入完毕后能够在目录中看到这两张图片。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3RuY3d5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

2.创建图集(Atlas)

将图片导入project后。下一步就是创建图集了。进入UITexture目录，按住Shift键选中这两张图片。右键-->【NGUI】-->【Open Atlas Maker】，之后你会看到 Atlas Maker 的界面

点击【Create】button。

弹出一个保存对话框选择图集保存的位置，将图集保存到UITexture并命名为MyBtn点击保存button。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3RuY3d5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

这样在Altas Maker对话框中能够看到我们生成的图集名称问MyBtn,在View Sprites中能够看到包括btn_1和btn_2这两个图片。



关闭Altas Maker对话框,能够在UITexture目录中看到除原来两张图片外还多了三个东西一个btn.png(图集合成的一张新图),btn.mat(使用btn.png的材质球)，btn.Prefab(使用btn.png的一个预制文件)

3.使用Atlas 和Sprite为button的加入图片

在Hierarchy面板中选中button的Background,而且查看Background的Inspector面板。



在Background的Inspector面板点击Atlasbutton在弹出的对话框中选择MyBtn,点击Spritebutton选中btn_1





这样咱们能够看到button的的背景图片变成了咱们所选择的btn_1



因为button的大小是200*50,可是图片的大小是100*100.所以图片是变形了的仅仅须要改动button的Background属性将Widget中的Dinesions改成100*100.就可以



这样就成功使用外部图片制作Atlas(图集)而且使用了图集中的图片了。