NGUI 3.5教程(四)Atlas和Sprite(制作图片button)

Atlas是NGUI的图集。我的理解是:Atlas把你的一些零散的图片,合并成一张图。这样做的优点是,能够减少Draw Call。我不了解它的底层运作机制,我猜应该也是再行进DXT之类的纹理压缩,所以,最好把图集的尺寸,也做成128, 256,512,1024之类的大小,以方便其进行格式压缩。

概念:

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

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

1,准备素材

新建一个目录,命名为UITexture。详细操作为:在Project面板中,右键-->【Create】-->【Folder】,然后命名。

把以下两张图片(start.png 和pause.png)复制到 UITexture 目录下。注意,这两张小图都是128*128像素的。

   

2,创建Atlas

在Project面板中,进入UITexture 目录,选中这两张图片,然后 右键-->【NGUI】-->【Atlas Maker】,之后你会看到 Atlas Maker 的界面:

在 Atlas Maker 界面中,点击【Create】button。

之后给这个Atlas 起名为MyAtlas.prefab,点击【保存】。

3*,预览Atlas和Sprite

保存之后,这个新的Atlas 就创建好了。能够点击一下【View Sprites】,预览一下创建好的精灵。

再来看一下这个新建好的Atlas,能够看到,自己主动变成了一张 256*512 的图(要知道,我们的每张小图是128*128的)。这样一来,它有非常多空白的地方。我对此的理解是:

Atlas的长宽比例都是以2的指数幂为单位,比方128 256 1024 2048等。这样做的目的,应该是为了能够採用某种纹理压缩格式,而做的强制转换。

4,运用Atlas 和Sprite 制作一个图片button

以下,我们接着上一篇文章的 Button 那个样例,继续做。首先,删除掉Simple Button的 Label。

然后在检视面板上,UI Script(Script)组件中,点击【Atlas】选项:

在弹出的Select an Atlas面板中,点击【Show  ALL】,会出现项目中全部的Atlas,选择我们刚创建的MyAtlas。例如以下图:

在检视面板上,UI Script(Script)组件中,点击【Sprite】选项:

在弹出的Select a Sprite面板中,选择start 图标(也就是精灵)。

选中后,假设在game视图下看,我们会发现button已经变成图片button了,可是严重变形。所以,我们要依据图片的原始大小,进行设置:找到Dimensions选项,单击后面的【Snap】button。或者手动调整一下数值。

好了,在game视图中,能够看到图片button,和我们预想的一样!

时间: 2024-10-10 00:58:38

NGUI 3.5教程(四)Atlas和Sprite(制作图片button)的相关文章

NGUI 3.5教程(四)Atlas和Sprite(制作图片按钮)

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/25594059 Atlas是NGUI的图集.我的理解是:Atlas把你的一些零散的图片,合并成一张图.这样做的好处是,可以降低Draw Call.我不了解它的底层运作机制,我猜应该也是再行进DXT之类的纹理压缩,所以,最好把图集的尺寸,也做成128, 256,512,1024之类的大小,以方便其进行格式压缩. 概念: Atlas : 图集.把美术给你提供的素材,用 NGUI 的 Atl

NGUI 3.5教程(七)Input 输入框

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/38332089 写在前面: 本文将用NGUI创建一个经过美化的输入框.    欢迎大家纠错.拍砖!原创很辛苦,如有转载,请注明出处. 创建输入框 在NGUI 3.5中,创建控件都可以通过[搜索],然后[拖拽]实现(也是NGUI推荐的方法). (1)在Project面板中,搜索“Control”,也就是搜索控件.之后,会发现NGUI的一堆控件. (2)找到 Simple Input Fi

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例 原文地址:http://www.tasharen.com/?page_id=185 NGUI下载地址:点我传送 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a New UI,会打开UI创建向导. 4.在创建向导中你能更改UI的基本参数.现在我们选Default layer,点击Create Your UI 按钮.5.就这

NGUI全面实践教程(大学霸内部资料)

NGUI全面实践教程(大学霸内部资料)   试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国内NGUI最新教程,以全新的3.8.0为基础,讲解NGUI的使用.内容不仅全面该函NGUI的各个组件,还详细讲解各项高级功能,以及自带工具. 目  录 第1章  学习NGUI前的准备 1 1.1  NGUI的购买/下载和导入 1 1.1.1  找到并了解NGUI的相关信息 1 1.1.2  导入NG

【Unity3D游戏开发】NGUI之DrawCall数量 (四)

看了非常多关于NGUI drawCall的文章.见得比較多的一个观点是:一个 Atlas 相应一个Drawcall. 但事实上NGUI内部有自己的一套对DrawCall的处理规则. 相关的规则有: 1.Atlas图集数量有关 2.Atlas图集的调用顺序(绘制顺序)有关 3.和UIPanel的数量有关 一.降低NGUI 3的DrawCall数量 升级到NGUI3. DrawCall数由5个增长到了十七八个.想想应该不会是NGUI的问题吧.后来整理了一下.发现有两点: 1)对于同一Atlas.Dr

【Unity3D基础教程】给初学者看的Unity教程(四):通过制作Flappy Bird了解Native 2D中的RigidBody2D和Collider2D

作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 在第一篇文章[Unity3D基础教程]给初学者看的Unity教程(一):GameObject,Compoent,Time,Input,Physics我已经讲过了一些关于刚体和碰撞的关系,这次我们就通过Flappy Bird这个事例来讲解一下刚体和碰撞体在游戏中的具体应用.相关代码可以参考Flappy Bird的源码. 认识RigidBo

NGUI 3.5教程(三)Button 按钮

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/25504611 写在前面:     本文将创建一个基本的Button.并且编写脚本,响应点击事件. 欢迎大家纠错.拍砖!原创很辛苦,如有转载,请注明出处. Button -- 按钮 在NGUI 3.5 里,Button这个控件,经过了整理.比如更改了创建方式(搜索.拖拽):比如合并了 2.x里的Button和Image Button.个人觉得这样是合理的,wxPython的Button

史上最详细的Android Studio系列教程四--Gradle基础

史上最详细的Android Studio系列教程四--Gradle基础

【小梅哥FPGA进阶教程】第十四章 TFT屏显示图片

十四.TFT屏显示图片 本文由杭电网友曾凯峰贡献,特此感谢 学习了小梅哥的TFT显示屏驱动设计后,想着在此基础上通过TFT屏显示一张图片,有了这个想法就开始动工了.首先想到是利用FPGA内部ROM存储图片数据,然后通过控制读取数据地址将图片数据传给TFT驱动模块,从而将每个图片数据显示在对应的像素点上.整个设计的框图如下: 主要是在小梅哥TFT驱动设计基础上增加了图片数据发送控制模块Imgdata_send,该模块包括存储图片数据的rom,和一些简单的逻辑控制.具体的rom IP核的建立我这里就