（个人）AR电子书系统创新实训第一周（2）

个人现阶段工作

我负责整个应用流程的界面开发，包括UI界面设计、UI功能按钮响应等，上一篇谈到了app开发的具体流程，接下来我将着重叙述想法的产生、开发过程中遇到的问题以及收获，与大家共勉。如有不正确的地方，欢迎指正

实验摸索阶段

由于我们的主程序是利用unity平台开发（Unity是一个专业游戏引擎，可发布应用到Android等平台。要是这个都不知道那接下来就别浪费时间了=_=），所以我使用的界面开发工具自然是unity。

之前有用unity做了一款小型的跑酷游戏，但因为其中的界面不是很多，就也没有很深入的了解，现在需要开发一款功能相对齐全的应用，我有些懵，摸索过程如下：

查找资料：在图书馆中我找到了一本叫《Unity 3D NGUI实战教程》的书，全书都是介绍NGUI插件的使用，浅显易懂，适合初学者。通过这本书我认识到了NGUI这个插件，NGUI的GUI有良好的性能优化、方便的开发模式、成熟稳定等特点，是开发游戏UI的首选插件。

安装NGUI插件：NGUI是unity的插件，需要安装使用。我查阅了许多资料才找到安装包，结果却不能使用。几经周折后，才发现原来在unity4.6及以上版本中对UI系统进行了大规模的改动，且不支持NGUI插件，UI插件变为UGUI。我电脑的unit版本是5.3的没办法使用NGUI插件，所以我只能放弃使用NGUI插件改为UGUI。

我摸索的阶段大概就是这样，接下来我开始了对UGUI相关知识的学习。

UGUI的学习笔记

UGUI是unity官方的插件，所以可以在menu->GameObject->UI中找到各种UI控件，如下图：



Canvas

Canvas是unity的UI中较为重要的一部分，所有UI元素应当存放于内的区域。Canvas是一个有Canvas组件的游戏对象，并且所有UI对象必须是这样一个Canvas对象的子对象。Canvas需要注意以下几点：

在我们创建一个新的UI元素时，如果场景里没有已存在的Canvas，会自动地创建一个Canvas；如果已经存在Canvas时，UI元素将作为这个Canvas的子对象创建。

Canvas区域会在场景视图中显示为一个矩形。这使得它容易放置UI元素而不需要一直保持在游戏视图。

Canvas使用EventSystem（事件系统）对象来帮助Messaging System（消息系统）

元素的绘制顺序：在Canvas中的UI元素，以它们出现在层次中的顺序被绘制。第一个子对象被先渲染，然后第二个，以此类推。 要改变元素的绘制顺序只需要通过拖拽它们改变在层次中的顺序即可。也可以从脚本中控制顺序：SetAsFirstSibling， SetAsLastSibling, 以及SetSiblingIndex 。

Canvas的渲染模式：Canvas有渲染模式设置，可以用来让Canvas在屏幕空间或世界空间中渲染。主要有以下几种：

Screen Space-Overlay：这个渲染模式将渲染的UI元素放置在场景的最上面（最靠近镜头）。如果屏幕被重新调整大小或调整分辨率，Canvas将自动改变尺寸以适应，且物体无论怎么摆放都不会遮挡carve。如下图：



Screen Space-Camera：这个模式类似于“屏幕空间 - 覆盖”，但在这个渲染模式下，Canvas被放置在指定摄像机的一个给定距离前。UI元素用这个摄像机渲染，意味着摄像机设置将印象到UI的表现。如果屏幕被重设大小或改变分辨率，或者摄像机frustrum 改变，Canvas同样将自动改变设置以匹配。物体可以挡住carve组件，如下图：



World Space：在这个渲染模式下，Canvas将如场景中其它的对象那样。Canvas的尺寸可以用它的矩形transform进行手动设置，UI元素会在场景中其它对象的前面或后面渲染，基于三维空间中的位置关系。这在UI元素被定义为世界一部分时有用。这也被称为“剧情界面”（diagetic interface）。

视觉组件

这一部分我们来看看UI中的视觉组件有什么作用。

1.Text

通过 menu->GameObject->UI->Text打开Text组件。



Text被作为“标签”，其文本区来输入被显示的文字。可以设置字体、风格、字号等功能。 文本的对齐方式有多种选项，控制文本比矩形的宽度或高度更长时会发生什么的水平和垂直溢出设置，并且最佳匹配选项使得文本会重设大小来适应可用的空间。

text内容可以是静态不变的，也可以是通过代码控制动态改变的。

2. Image

通过 menu->GameObject->UI->Image打开Image组件。



一张Image有一个矩形变换组件及一个Image组件。一个sprite（在unity中习惯把图片叫做精灵）可以被应用到在目标图片区下方的图片组件，并且颜色可以在颜色区中设置。材质也可以被应用到图片组件。图片类型区定义了应用到图片的精灵如何出现，这些选项时：

Simple - 等量地缩放整个精灵。

Sliced - 利用3x3精灵分割法，这样尺寸调整不会扭曲角落，并且只有角落部分被拉伸。

Tiled - 类似于Sliced，但瓦片式摆放（平铺）中间部分并且不拉伸。对于完全没有边缘的精灵，整个精灵被平铺。

Filled - 像Simple模式那样显示精灵，但除了从原点以预定的方向、方法和数量填充精灵。

设置本地尺寸的选项，在Simple或者Filled被选择时出现，重置图片的尺寸到原始的精灵尺寸。

Image可以通过在纹理类型设置中选择精灵(2D/UI)，被作为UI精灵导入。对比老的GUI精灵，精灵有额外的导入选项，最大的不同是精灵编辑器的增加。精灵编辑器提供了9-slicing图片的选项，将图片划分为9个区域，这样如果精灵被调整，四角不会被拉伸或扭曲。

3. Raw Image

通过 menu->GameObject->UI->Raw Image打开Raw Image组件。



Image组件有精灵，但Raw Image（原始图片）是纹理（没有边缘等）。Raw Image仅在必要时可以被使用，否则Image组件在大部分情况下都是适合的。

视觉组件也可以有各种简单的效果，例如简单的阴影或者轮廓线。通过查看看Effect引用页可以获得更多信息。

unity中除了这些基本视觉组件，还有一些便于交互的按钮，可以对UI界面进行简单易行的交互。在下个星期我对其进行深入的研究。