前言

这里会通过一个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】进行选项设置；

Cocos Creator教程 ——（二）UI系统介绍（上）相关推荐

Cocos Creator 教程:生成二维码
一般做应用推广时,都会做一个自己的推广二维码.由于每个人的推广二维码都不一样,这就需要前端用代码生成属于用户个人的推广二维码.话不多说,下面讲解如何用Creator 生成用户专属推广二维码,文章最后会 ...
cocos入门7：cocos creator 中的ui系统
1.UI系统一个完整的游戏一般由不同的系统组成.从技术的角度看一般会不包含UI系统.动画系统.物理系统和声音系统等.其中开发声音相关的内容在引擎的帮助下变得很简单. 对于目前市面上的手机游戏来说,特 ...
Cocos Creator教程 ——（一）Hello World
目录一.新建项目二.资管管理器三.层级编辑器四.属性检查器五.内容来源一.新建项目我们先通过一个简单的项目了解Cocos的基本结构: 打开cocos creator,在下面界面中选择&q ...
cocos creator教程【打造路径编辑系统】
路径编辑系统在地图里面是非常重要的一项技术,他可以给NPC或怪物编辑地图路径,比如塔防游戏的地图路径,比如捕鱼达人的鱼阵路径,那么cocos creator如何实现了,今天分享一个技巧使用动画编辑器 ...
Cocos Creator教程：Shader与材质
Cocos creator 2.1以后引入了3D渲染的底层,所以引入了Shader和材质系统,比如精灵,下面有一个材质, 材质又选了一个Shader; 1: 什么是Shader和材质? Shader是 ...
cocos creator 3d 3.0《懒猫跑酷》实战开发教程
文章目录 01搭建开发环境hello world 02 导入3D资源,搭建游戏场景 03 控制猫移动 04生成无缝地图 05生成障碍物和鱼 06 碰撞检测+动画编辑器 07 UI模块和UI适配(位图字 ...
进击3D游戏界!Cocos Creator快速实现骨骼动画交互!
文章目录前言一.Cocos Creator简介? 二.快速上手Cocos Creator 1.任何语言学习,先概览一遍文档 2.跟随官方Demo,进行游戏的制作三.如何自己实现骨骼模型和界面交互 ...
麒麟子Cocos Creator 3D研究笔记零：从零开始入门并发布微信小游戏
编辑器状态截图不要在意名字,我临时借用的小游戏APPID 一.前言 Cocos Creator,我回来了. 2016年6月,大家都觉得Cocos Creator 2D不够成熟的时候,我就开始商用了. ...
Cocos Creator 3D 麒麟子回来了！（入门心法）
1 前言 Cocos Creator,我回来了. 2016年6月,大家都觉得Cocos Creator 2D不够成熟的时候,我就开始商用了.因为我感受到了市场对Cocos Creator商业游戏源码框 ...

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

目录

前言

一、Sprite（精灵）

二、Label（文字）

三、Weight（对齐挂件）

四、Layout（自动布局）

Cocos Creator教程 ——（二）UI系统介绍（上）相关推荐

最新文章

热门文章