怎样判断是否应该使用精灵

  在一套UI中,精灵是一种非常常见的元件。当制作UI时,如果需要显示一张图片,需要先判断这个图片是否应该制作到图集里去,然后用精灵的方式去使用它,一般来说,可以遵循以下规律。

  1.首先说明一点,精灵是一个很基础的UI元件,经常不会独立使用,很多其他控件都会用到精灵。所以,精灵有的时候并不用独立使用的。

  2.对于一些展示型的图片,不会变化,只是起一个展示作用,如果它不大,它一般都是以精灵的方式去制作。

  3.如果要显示一个图片,它形状不规则,长宽不是2的N次方,那么一定要使用精灵。因为Unity对非2的N次方的图片处理要慢很多。

  4.如果这个UI元件经常性地出现,那么最好使用精灵,因为,这样它就可以和图集一起被载入内存,并不用新增一个DrawCall去渲染它。

创建精灵

  1.第一种创建方式

  单击Unity顶部菜单中的NGUI菜单,选择Create->Sprite。会自动创建出一个带Sprite组件的物体,这就算创建成功了。

  特别说明一下,NGUI创建物体时会在选中的那个UI物体(可视为一个节点)下进行创建,如果没有选中任何的UI节点,它会默认在UI Root下创建。创建出的UI控件的本地坐标都为0(相当于Reset了一下,和父节点的位置保持一样),所以,使用3D UI的时候要注意,不要在UI Root所附带的Camera下面创建UI元件,否则会导致UI和相机在一个位置,导致相机看不到。

  2.第二种创建方式

  使用旧版本的创建方式,在Unity顶部菜单中选择NGUI菜单,选择Open->Widget(Wizard(Legacy))。

  打开后,其中选择想要创建的精灵所在的Atlas,然后再Template中选择Sprite,在Sprite栏单击会弹出你所设置的图集中的所有精灵,从中选择要创建的精灵,Pivot是精灵的锚点(中心点的位置,默认在图片中心点)。AddTo是选择要在哪一个UI节点下机型创建(额可以通过拖动的方式将UI节点物体拖到这里来),这个AddTo的默认值是在打开这个菜单之前所选中的UI节点物体。然后单击AddTo按钮,即可完成创建。

  3.第三种创建方式(不推荐)

  这种方式是不用NGUI的菜单来创建,通过Unity的空物体,然后为其附加相应组件来自制UI控件。

  首先在Unity顶部菜单中选择GameObject,然后选择CreateEmpty,这样就在场景中创建了一个空物体,再将这个空物体拖动到UI Root下,使它成为UI Root下的一个子物体,将这个空物体的transform组件Reset一下,这样这个物体就和UI Root根节点保持一样的位置了。然后将这个空物体的Layer改为和UI Roote的Layer一样,否则UI摄像机将无法渲染它。在这个空物体的Inspector面板中,单击Add Component按钮,选择NGUI,选择UI,再选择NGUI Sprite,就为这个空物体附上了Sprite组件。

  在这个Sprite组件中单击第一行的Atlas按钮,选择要创建的精灵所在的图集,然后单击第二行的Sprite按钮,会弹出这个图集所有的精灵预览界面,从中选择所要的精灵。精灵就自制完成了。

Sprite组件的设置

  在Sprite组件面板中,可以设置如下的一些参数。

  1.Atlas。单击Atlas按钮将会弹出图集选择界面,可以选择要使用哪一个图集(如果弹出的图集选择界面没有我们要的图集,记得单击该面板中的ShowAll按钮)。

  2.Sprite。单击Sprite按钮,将会弹出该图集所拥有的精灵的预览界面,只需要在其中找到需要的精灵,然后双击,就完成了设置。

  3.Type和Flip。这里Type有5个选项:Simple(普通类型)、Sliced(切片类型)、Tiled(平铺类型)、Filled(填满类型)、Advanced(高级类型)。Flip选项是翻转选项,相应的Type下有不同的设置。

    Simple:这种类型下,图片会正常显示出来,图片是什么样它就是什么样显示。当将一个精灵的尺寸拉大时,它会以原图拉伸(可能会导致原图发生形变)的方式来完成,将精灵的大小通过拉动四周的蓝色锚点拉大,精灵就被拉伸了。

      在这种类型下,Flip有几个选项,分别是:Noting(不翻转)、Horizontally(水平翻转)、Vertically(竖直翻转)、Both(既水平又竖直翻转)。

      这里的翻转和Photoshop中的图片翻转式一个意思。

    Tiled:平铺类型,选择了之后,精灵尺寸会保持原来的尺寸不变,然后将精灵的尺寸拉大时,精灵会以平铺的方式来填充,并不会以拉伸的方式来填充。

    Filled:填满模式,这种模式可以设置图片填充一块区域的方式

      在Filled模式下,会多出Fill Dir、Fill Amount、Invert Fill 3个设置项。其中FillDir是指选择填充的方式,默认为360度填充。Fill Amount可以设置填充的比例,默认为1全部填充。InvertFill是设置填充的方向,不勾选是正方向,勾选是反方向。

  4.Widget模块。Widget模块是NGUI的控件组件都具有的一个模块。该模块的参数设置如下:

    Color:通过这里可以整体改变控件的颜色和透明度,改变颜色的规则为:原色值乘以这里设置的色值(Unity中,会把RGB色值从0~255转变为0~1的一个浮点数)。

      单击这个白色区域会弹出调色板,可以随意地在这里设置空间的颜色值和透明度。

      值得注意的是,如果通过这个控件改变了透明度,那么这个物体的自物体的控件透明度也会跟着被改变。

    Pivot:锚点设置,默认为中心点。通过这一排按钮可以设置出左上、顶中、右上、中左、中心、中右、左下、低中、右下一共9个点。

      这个锚点设置,改变的是图片的中心点位置,这个UI控件和其他UI控件之间的相对位置就是以这个点作为标准的。

    Depth:深度设置。可以通过单击Back和Forward来减1和加1,也可以直接输入一个深度数字来完成设置。

    Dimensions:尺寸,这里指的是控件的像素尺寸。单击Snap可以将图片的像素尺寸直接设置为原大小(这个图片被改成图集之前的图片大小)。

    AspectRatio:宽高比,AspectRatio后面的数字为当前该控件的宽高尺寸比例,后面有一个模式选择按钮,默认为Free,可为图片随意设置高和宽。这里除了Free以外,还有两个模式:以宽为基础、以高为基础。如果选择以宽为基础,那么图片的高度设置不论怎么设置都无效,都会以宽度和当前的宽高比计算得出。同理,如果选择了以高为基础,那么图片的宽度就无法被设置,它的宽度都会以高度和当前的宽高比计算得出。

制作精灵(UI Sprite)的更多相关文章

  1. 关于精灵帧(Sprite Frame)的尺寸大小

    一个对象的精灵帧(Sprite Frame)有若干关于大小的尺寸. 比较容易混淆,这里记录下来区别: CCSpriteFrame *spriteFrame = self.spriteFrame; CG ...

  2. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  3. NGUI 学习笔记实战——制作商城UI界面

    http://www.cnblogs.com/chongxin/p/3876575.html Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我 ...

  4. UNITY3D使用NGUI制作自适应UI的总结

    原地址:http://www.cnitblog.com/updraft/archive/2013/11/12/88801.html 制作自适应的几个方法1. 使用 UIROOT 里设置自定义高度的方法 ...

  5. FairyGUI编辑器制作Unity3D UI值得借鉴

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  6. threejs精灵平面Sprite(类似tip效果)

    效果图:   let center = this.cube.position.clone(), size = this.cube.geometry.boundingBox.getSize(), sca ...

  7. Photoshop制作Android UI: 怎样将图片背景变为透明

    看烦了代码.今天玩玩PS吧.本人是PS小白.Android开发中不可避免的要做一些图片,但我发现居然没有相似的专门教程.真想拜个美工为师.还记得2012年去宁波实习时为了将图片缩小我还matlab写个 ...

  8. Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片

    如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用 ...

  9. 制作第一个UI图集

    按钮分有两种形式,一种是普通按钮,也就是一张没有文字的按钮图片,在需要用时,就在上面写上不同的.当前所需要的文字.量一种按钮则是图片按钮,这种按钮的特点是整个按钮就是一张图片,它既是按钮也是图片. 在 ...

随机推荐

  1. mysql控制流程函数

    1.case语句 select case 2 when 1 then '男' when 2 then '女' else 'xoap' end as result; 2.if语句 select if(1 ...

  2. 如何使用VSTS做压力测试

    1 前言 1.1 目的 本文档主要介绍如何在VSTS环境中进行LoadTest测试,给测试人员和初次使用者提供参考. 对该工具进行LoadTest测试的优劣进行简单的分析说明. 1.2 软件版本 本文 ...

  3. 关于git的打patch的功能

    UNIX世界的软件开发大多都是协作式的,因此,Patch(补丁)是一个相当重要的东西,因为几乎所有的大型UNIX项目的普通贡献者,都是通过 Patch来提交代码的.作为最重要的开源项目之一,Linux ...

  4. 基于嵌入式的c语言连接器

      一个C程序可能是由多个分别编译的部分组成,这些不同部分通过一个通常叫做链接器(或连接器,载入器)的程序合并成一个整体.因为编译器一般每次只处理一个文件,所以它不能检测出那些需要一次了解多个源程序文 ...

  5. pat 1006 Sign In and Sign Out (25)

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  6. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  7. ASP长文章分页的两个方法,函数

    '按标识手动分页 function manualPage(str) pages=request.QueryString("page") contentstr=split(str,& ...

  8. 如何在Windows系统上用抓包软件Wireshark截获iPhone等网络通讯数据

    http://www.jb51.net/os/windows/189090.html 今天给大家介绍一种如何在Windows操作系统上使用著名的抓包工具软件Wireshark来截获iPhone.iPa ...

  9. CDN的原理及对SEO的影响

    http://www.williamlong.info/archives/4059.html CDN的概念最早于1995年由美国麻省理工大学提出,是一套能够实现用户就近访问的网络解决方案.具体方法是: ...

  10. 【开发】Dialog 对话框

    提示:Dialog 继承自 Panel,有大量的方法在 Panel 中已被定义,可以复用. Dialog API:http://www.jeasyui.net/plugins/181.html Pan ...