CocosCreator学习第四部分 - Cocos Creator

介绍

这部分内容主要介绍Cocos Creator的UI系统。从视频52到视频66。

屏幕Canvas

3dx的Canvas组件介绍。Canvas代表屏幕、屏幕内的所有物体都会被Camera渲染出来。主要就是改动画布大小的时候需要在项目设置内修改。还有就是

Label : 文本，font字体

富文本RichText

• 支持标签系统。如果需要一段话内的某个字变成红色，则直接使用标签即可，例如

<color=green>I'm green</color>

• 新建richtext节点 - 新建脚本挂载上节点 - 节点新增Richtext组件 - 组件内的Sring内添加以下标签内容 - 点击click me!文字则会调用handler函数

<on click="handler"> click me! </on>

• 嵌套标签

• 图文混排 : 文字内添加表情包 - 在Richtext组件内有Image Atlas属性 - 将图集拖拽至该属性内 - 编写String属性

这是一个地面<img src="land" clik="handler"/>吗？

屏幕适配与遮罩

遮罩

例如原本的图片是长方形，但是QQ头像的框是圆形，只显示原圆形内部的图像。 创建遮罩 : 新增父子节点(只对父子节点有效) - 在父节点添加渲染组件Mask - 例如子节点小鸟是圆形的，父节点是正方形的，遮罩后只显示正方形的。

屏幕适配

所有的UI都放在Canvas下面。使用Widge组件。

按钮与布局

控件库 : 面板 - 节点预制库

按钮

Button组件

1. Interactable 是否交互，不勾选按钮置灰。
2. Sprite Transition 在不同点击状态可以存放不同的图片
3. 按钮触发事件 : button节点挂载脚本 - button属性Click Events修改为1 - 并将button节点拖回这个Click Events属性内的[0]下的cc.Node内，第二个框选择脚本。第三个框选择函数。

布局

Layout组件

1. Resize Mode缩放模式 : CONTAINER 父节点适应子节点的宽、CHILD子节点适应父节点的宽
2. Padding 边距
3. Spacing X 每个子节点的边距

滑动进度控件

ScrollView组件

1. 真正的内容是content子节点
2. Inertia 是否添加惯性
3. Brake 惯性的快慢
4. Scroll Events跟Button的触发事件差不多

ProgressBar组件

1. 常用的进度条

输入框

可输入账号密码、邮箱地址、聊天输入框等等。使用EditBox组件。

1. Placeholder : 占位符，若Text为空，则显示该内容。
2. ReturnType : 回车键的样式，例如手机键盘回车按钮上显示什么字符。
3. InputFlag : 输入标识，在国内对密码比较有用，不会显示明文。