cocos入门7：cocos creator 中的ui系统

1、UI系统

一个完整的游戏一般由不同的系统组成。从技术的角度看一般会不包含UI系统、动画系统、物理系统和声音系统等。其中开发声音相关的内容在引擎的帮助下变得很简单。

对于目前市面上的手机游戏来说，特别是2D游戏，除了主要的游戏玩法和战斗外，主要的工作量都是在UI界面的开发上。由于使用率的开发量都比较高，Cocos Creator中的UI组件经过多个版本迭代后，在易用性和功能完整度上都有较大提升。

1.1、精灵组件（Sprite）

1.1.1、创建精灵组件

图片精灵创建方式1

图片精灵创建方式2

图片精灵创建方式3

直接从资源编辑器中将图片拖到场景编辑器中即可

单色精灵创建方式

1.1.2、精灵组件属性

1.1.2、Sprite渲染模式

1、普通模式：Simple类型按照原始图片资源样子渲染Sprite，一般在这个模式下我们不会手动
修改节点尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。

2、九宫格模式（Sliced）：图片被分割成九宫格，可以选择图片中那一部分可以被裁减。如
下图只有红色方框内的元素会被裁减，修改图片比例时其他位置不会变形
1
2
3
4
5

3、平铺模式（Tiled）：当Sprite增大时，图片不会被拉伸，而是会按照原始图片的大小不断重复

4、填充模式：分3类，HORIZONTAL横向填充、VERTICAL纵向填充、RADIAL（扇形填充）

5、网格模式：小游戏开发一般很少用，一般用在3d上
1
2
3
4
5

1.2、Label组件

1.2.1、简单使用

主要用来显示一段文字，文字可以说系统自，图片、艺术字
创建方式1

创建方式2

创建方式3

1.2.2、label属性

1.2.3、排版方式

1.2.4、位图文字

1.2.5、文本缓存类型属性Cache Mode

label组件中cache mode属性相关的控制，主要与性能相关。Cache Mode对所有平台都有优化效果

1.3、Button组件

1.3.1、简单使用

1.3.2、button属性

1.3.3、button脚本回调

1、通过属性检查器添加回调

2、通过脚本添加回调

start () {
	//绑定事件
	this.button.node.on("click", this.callback, this)
},
callback( button){
    cc.log('登录...')
},
1
2
3
4
5
6
7