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

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(图集)而且使用了图集中的图片了。

NGUI使用教程(3) 使用外部图片制作Atlas(图集)的更多相关文章

  1. NGUI系列教程四(自定义Atlas,Font)

    今天我们来看一下怎么自定义NGUIAtlas,制作属于自己风格的UI.第一部分:自定义 Atlas1 . 首先我们要准备一些图标素材,也就是我们的UI素材,将其导入到unity工程中.2. 全选我们需 ...

  2. Unity3d ngui基础教程

    Unity3d ngui基础教程 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a N ...

  3. NGUI使用教程(2) 使用NGUI创建2D场景而且加入标签和button

    1.创建2D场景 要使用NGUI创建2D场景,首先咱们必须新建一个项目,而且导入NGUI作为这个项目的插件,相信假设看过上一篇教程都知道怎么导入NGUI了,这里就不赘述,假设有疑问的能够去看上一篇教程 ...

  4. (转)NGUI系列教程七(序列帧动画UITexture 和 UIsprit)

    NGUI系列教程七(序列帧动画)   今天我给大家讲一下如何使用NGUI做序列帧动画.本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画.废话不说了,下面开始.还 ...

  5. NGUI系列教程五(角色信息跟随)

    在一些网络游戏中,我们常常可以看到角色的上方显示着角色的名称,等级,血量等信息.它们可以跟随角色移动,并且可以显示和隐藏.今天我们就来学习一下这些功能的实现方法.1. 新建unity工 程,导入NGU ...

  6. NGUI系列教程三

    接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...

  7. NGUI系列教程二

    接下来我们创建一个Label,NGUI->Open the Widget Wizard,打开widgetTool对话框,在Template中选择Label,确定AddTo右侧选项为panel,点 ...

  8. (转) Unity3D 使用Texturepacker打包工具制作NGUI(Atlas)图集

    转自:http://www.unitymanual.com/thread-37485-1-1.html 由于NGUI AtlasMaker对打包的优化不好,容易打出很大的图集,很多部分都是浪费的,所有 ...

  9. Unity插件-NGUI使用教程

    Unity插件-NGUI使用教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 NGUI 一款强大的次 ...

随机推荐

  1. 动态面板——axure线框图部件库介绍

    1.什么是Axure的动态面板 按照Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度.动态面板包含有多个状态(states),每个状 ...

  2. thinkphp 设置跨域请求

    场景:我的本地网页服务器无法访问本地的接口服务器接口提示一下错误:大致意思是:是一个跨域请求我的没有访问该地址的权限(接口服务器采用的是PHP编写) XMLHttpRequest cannot loa ...

  3. PHP学习之-面向对象

    PHP学习之-面向对象 1.什么是对象 "世界万物皆对象",一切可以被抽象出来的东西都是对象.像花,草.看不到的"概念"都是对象. 2.对象的基本组成 a.属性 ...

  4. php使用 _before_index() 来实现访问页面前,判断登录

    C:\wamp\www\DEVOPS\Home\Lib\Action: <?php class IndexAction extends Action { function index(){ $t ...

  5. Linux - 文件系统结构

    文件系统结构:   Linux文件系统为一个倒转的系统单根树状结构. 根为   / 严格区分大小写. 路径使用   /    分割,Windows使用  \     . 当前工作目录: 每一个Shel ...

  6. Net基础恶补

    一 自定义事件 1 之前一直都是使用事件调用来触发事件,看代码 // 定义一个事件 public event EventHandler; //触发事件 public void OnEvent(){ i ...

  7. DELPHI 通過窗口句柄或窗口标题得到进程句柄

    DELPHI 通過窗口句柄或窗口标题得到进程句柄2009年05月08日 星期五 10:15procedure TForm1.Button1Click(Sender: TObject);varhWind ...

  8. C++晋升之std中vector的实现原理(标准模板动态库中矢量的实现原理)

    我们实现的数据结构是为了解决在执行过程中动态的开辟空间使用(比如我们不停的输入,输入的多少我们不确定) 假设当你看到这篇文章的话,就当作是零食咀嚼,营养没有有BUG,能够直接看我博客中文章:CPU对内 ...

  9. camel-name-utils 在驼峰风格跟下划线风格之间切换

    用处 用来将字符串在驼峰风格跟下划线风格之间切换. 对于一般人可能没用.对于写orm框架的人有点作用. 样例: company_name -> companyName 安装方式 加入下面依赖到p ...

  10. 搭建实时同步data guard的最高可用-切换主备

    搭建实时同步data guard的最高可用-切换主备 首先保证主库在归档模式下:错过N次了 准备二台机器(hostname gw hosts ech0)host-only [root@node1 ~] ...