Cocos Creator教程 ——（二）UI系统介绍（上）

前言

这里会通过一个demo项目去介绍现在的UI系统有生产什么游戏的能力，以及在制作UI的过程中的各种实现细节；Cocos Creator实现了彻底的脚本化、组件化以及数据驱动的特点，还有一个好用的UI系统，现在我们看一个UI的demo；由于视频作者没有提供源代码素材，所以这里只能简单进行素材的替换并进行演示。所有的UI界面的生成都是由UI元素拼装而成，我们会这里会分别介绍Sprite精灵，Label文字，Weight对齐挂件和Layout自动布局；

一、Sprite（精灵）

我们通过cocos的层级管理器的创建菜单选择【创建渲染节点】-【Sprite（精灵）】，这样就能得到一个默认的精灵元素，如下图所示：

生成的精灵元素会显示一张默认图片，我们可以随时替换成我们想要的图片，我们可以准备一张图片，保存在资源管理器的【Textures】，然后可以选择拖拽我们想要替换的图片到属性检查器的【Sprite】的【Sprite Frame】，实现图片的替换，如下图所示：

这样我们就能得到很好看的精灵小姐姐啦：

一般情况下，菜单中所有的背景图、人物图，还有各种按钮，全部都是使用【Sprite】配合不同图片显示的；

二、Label（文字）

文字也是通过层级管理器的创建菜单的【创建渲染节点】-【Label（文字）】生成的，如下图所示：

我们随便在Label中设置一些名字，比如玩家的ID，这里设置为【比克大魔王】，在设计游戏的时候，我们不能确定玩家的ID字数，有些玩家的ID可能会设置的比较长，比如是【超级无敌比克大魔王哈雷尔】；在cocos creator的UI系统中，文字空间添加了一个非常好的排版功能【SHRINK】，具体位置如下图所示：

【SHRINK】的作用是根据文字个数对对字体进行缩放，比如选择【SHRINK】模式后，将【比克大魔王】名字设置为【超级无敌比克大魔王哈雷尔】，可以得到如下结果：
如果我们设置了文字约束框的大小，玩家设置的名字可以根据其大小进行适配以适应有限的空间，这是UI系统自适应分辨率排版的一个重要基础。Sprite精灵或者Label文字这些组成UI界面的基本元素都是可以任意指定大小，而且可以在任意大小都有一个非常好的呈现。

在Overflow中可选项还有【CLAMP】，这是【截断】排版方式。将【Horizontal Align】水平对齐设置为左对齐，然后将【Overflow】设置为【CLAMP】，超出文字框的内容则不会显示。【Overflow】还有一种【RESIZE_HEIGHT】模式，该模式通常用于显示大段文字，当文字内容不断增加时，UI系统不会更改其文字约束框的宽度，但是会不断扩展文字约束框的高度，这样就能将大量的文字进行展示。

三、Weight（对齐挂件）

如果我们希望用户不管使用什么设备打开我们设计的游戏都能看到一个比较完美的界面的话，我们就需要使用多分辨率自适应控件，这里我们介绍【Widget（对齐挂件）】，这是实现多分辨率自适应的排版的基础。我们只要把【Widget】放到节点上，节点就能根据【Widget】的设置和父节点进行对齐。

【Weight】可以通过【属性检查器】中的【添加组件-UI组件-Weight】进行添加，添加后的形式如下所示：
当我们将【Widget】的【Top】设置为10.00px，不管屏幕分辨率怎么更改，当前节点都会保持和父节点的顶部距离为10像素。通过设置【Widget】可以设置对齐方式，接下来我们看看【Layout（自动布局）】的容器。

四、Layout（自动布局）

【Layout】能够自动排版容器内的子节点，可以在层级管理器中的【创建UI节点】创建【Layout】。创建【Layout】之后拖拽【资源管理器】的【textures】中的元素添加到【Layout】中，【Layout】能够对添加的元素实现自动排序。【Layout】的具体界面如下所示：

现在对【Layout】的功能进行简单的介绍：

• Type：控制添加元素的排序方式。可选择元素有：【None】、【VERTICAL垂直】、【HORIZONTAL水平】、【GRID网格】；
• Resize Mode：【Layout】是否需要根据元素的内容进行大小适配；
• Padding：对添加的元素的位置进行设置；
• [option] Direction：根据选择的【Type】进行选项设置；