码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-01 16:12:02      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:unity3d   ngui   界面   sprite   atlas   

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

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

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

 

1.导入外部图片

理解完了上面两个概念之后咱们可以言归正传了,首先需要使用外部图片,你可以使用自己定义的图片或是美术提供的图片,能用就行,这里我用了下面两张图片,要是你没有图片也可以使用下面两张图片(这两张图片是100*100的png图片)。
bubuko.com,布布扣bubuko.com,布布扣

有了素材之后,咱们需要把这两个图片用到项目中去,接着上个教程往下做,在example文件夹下新建一个文件夹UITexture把这两张图片导入进去,导入完成后可以在文件夹中看到这两张图片。

bubuko.com,布布扣

 

2.创建图集(Atlas)

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

bubuko.com,布布扣
点击【Create】按钮。弹出一个保存对话框选择图集保存的位置,将图集保存到UITexture并命名为MyBtn点击保存按钮。
bubuko.com,布布扣
这样在Altas Maker对话框中可以看到我们生成的图集名称问MyBtn,在View Sprites中可以看到包含btn_01和btn_02这两个图片。
bubuko.com,布布扣
关闭Altas Maker对话框,可以在UITexture文件夹中看到除原来两张图片外还多了三个东西一个MyBtn.png(图集合成的一张新图),MyBtn.nat(使用MyBtn.png的材质球),MyBtn.Prefab(使用MyBtn.png的一个预制文件)
bubuko.com,布布扣

 

3.使用Atlas 和Sprite为按钮的添加图片
在Hierarchy面板中选中按钮的Background,并且查看Background的Inspector面板。
bubuko.com,布布扣bubuko.com,布布扣
在Background的Inspector面板点击Atlas按钮在弹出的对话框中选择MyBtn,点击Sprite按钮选中Btn_01
bubuko.com,布布扣bubuko.com,布布扣

这样咱们可以看到按钮的的背景图片变成了咱们所选择的btn_01
bubuko.com,布布扣
由于按钮的大小是200*50,但是图片的大小是100*100.所以图片是变形了的只需要修改按钮的Background属性将Widget中的Dinesions改成100*100.即可
bubuko.com,布布扣
这样就成功使用外部图片制作Atlas(图集)并且使用了图集中的图片了。

 

 

 


 

NGUI使用教程(3) 使用外部图片制作Atlas(图集),布布扣,bubuko.com

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

标签:unity3d   ngui   界面   sprite   atlas   

原文地址:http://blog.csdn.net/gtncwy/article/details/38336141

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!