这次换一种方式聊聊Creator的UI开发，目的是想让学习那么枯燥，如果你是一个爱玩游戏的朋友相信你会很有感觉。
#一、奎特尔星球
在奎特尔星球上，有着无数的英雄，身怀绝世魔力，在创世之主的统之下维护着奎特尔世界的安定与和平。
#1. Node英雄传
cc.Node是构建“奎特尔”星的基石，上至星体下至尘埃，无处不在，无论是可见的或不可见的，都由有他们默默的在支撑着。
上图层级管理器和场景编辑器中，我们看到的都是英雄Node，请由我来逐一介绍：
1. 名为Canvas的英雄，像盘古一样开天辟地化身出了一个世界，定义了世界的边界和范围。
2. Background英雄，用自己的整个身体去美化这个世界（虽然只是单一的银白色）。
3. Advanced统帅着他的部队（子节点）构建出这个的世界功能。
4. Top Left队长带领着勇士Label和Tips完成具体的任务。
5. Label小英雄显示出小分队的名字。
6. Tips小英雄显示出小分队的详细信息。
众多的Node英雄们不分大小、地位同心协作，创造出炫丽多彩的奎特尔星球。
##2. 魔灵
英雄最为骄傲的能力能是可以装佩各种神奇的魔灵（Component）。
在UI开发中，魔灵们大至分为两类：光与暗
光系魔灵
可以直接在场景编辑器中感知到他的存在，常见的有：
cc.Sprite、cc.Label、 cc.Button、 cc.EditBox
暗系魔灵
一般在场景编辑器中很难感知到他的存在，当选中node节点后，通过属性检查器中才可以看到，常见的有：
cc.Canvas、cc.Widget、cc.Layout、cc.Mask
“奎特尔”星球上的魔灵是最具有魔力的生灵，他们也可以像Node英雄一样化出无数分身，并附身在Node上一起并肩作战，生死与共。
#三、 创世之主
在地球上有一类人，他们可以通过“奎特尔引擎”创建出各种奇特的、丰富多彩的奎特尔星球，他们被称之为Cocos程序员，也称之为奎特尔星球的创世之主。
不论你是谁，只要你能驾驭奎特尔引擎，与奎特尔的英雄、魔灵们建立起联接，你就能开创出一片新的世界。
#二、英雄原力
要想成为奎特尔星求的创世之主，你需要了解Node英雄的一些能力和特性。
###1. 英雄三围
每一个node英雄都具有任意改变自身外型能力，以适应不同的生存环境，我们来看看英雄的三围参数。
Node有着控制自己外型尺寸的能力，通过上图我们一一介绍下这些属性。
- 输入框中可以为英雄取个名字（node.name），左边的复选框选中可以显示或隐藏英雄（node.active）。
- Position：Node在二维世界中的位置（node.x、node.y、node.position）
- Rotation：旋转角度，范围0~360（node.rotation）
- Scale：缩放比例，可以根据宽、高缩放，值相同就是等比缩放(node.scale)
- Anchor：位置与旋转的基准点，中心点（0.5， 0.5）左下角（0，0），右上角（1，1），（node.anchor）
- Size：英雄的宽、高体型大小(node.width、node.height、node.getContentSize、node.setContentSize)
- Color：每一个英雄都是变色龙（node.color）
- Opacity：英雄可以将自己透明，范围0~255 (node.opacity)
- Skew：扭曲角度 (node.skew)
Node英雄除了上面这些可以在属性检查器中可以看到参数外，还有几个重要的属性只能由魔咒（代码）来控制：
- zIndex: Node英雄要冲锋在战场的最前面，就需要有足够大的zIndex值。(node.zIndex)
- tag: tag是一个int属性的标签(tag、setTag、getTag)，在父节点上可以使用getChildByTag获取子节点。
- isValid: 这是个只读属性，表示英雄是否还活着。
- parent: Node英雄之间通过parent建立父子关系，形成一颗树型结构。
- children: 一个Node小队长可以通过children获取他带领的小组成员。
###2. 英雄的感知能力
所有的英雄都能感知外界面对自己的指指点点，能过感知这些指指点点，英雄们可以做出让人叹为观止的各种反击，从而演绎现出一幕幕精彩纷呈的星球大战，感知力我将他们分为三类：
1. 触摸事件、鼠标事件：最常用的有TOUCH_END
node.on(cc.Node.EventType.TOUCH_END, 事件处理函数)
- 属性改变事件：当一个node英雄的属性发生变化时，他会发出信号。我们可以通过感知其它英雄的属性变化即时给予支援
this.node.on('position-changed', 事件处理函数)
- 自定义事件：创世之主可以自由定义事件，通过emit发送出去。
this.node.emit('事件名字符串', {参数});
...
node.on('事件名字符串', 事件处理函数)
###3. 英雄会跳舞
node是舞者，action是舞步
每一个Node英雄都是一个天然的舞者，只要呼唤他的runAction，他就会为你舞动奇迹。
//移动步法
let moveTo = cc.moveTo(1, cc.p(100, 100));
//让英雄舞动起来
node.runAction(moveTo);
在这里node是就是舞者，moveTo是舞步，而舞步需要由创世之主来编排。
舞步是英雄的必杀技能之一被称之为Action，由于篇幅我们以后专门介绍舞步的设计与编排，以及单人舞步、多人舞步，舞步同步等绝技。
###4. 魔灵附身
英雄另一个超能力就是“魔灵附身”，英雄已然很强大，注入魔灵后的英雄才能真正上战场，魔灵与英雄建立联接有以下几种方法：
– 利用奎特尔引擎，你可以直接召唤出装备有魔灵的英雄。
– 通过属性检查器为node添加注入魔灵。
– 使用魔咒（addComponent）为node注入魔灵。
– 创世之主还可以自己制造魔灵，将其附身在英雄身上。
要成为奎特尔的创世之主，必须清楚英雄们的能力，并能灵活运用，组织他们相互协作，才能战胜敌人。
#三、魔法英雄联盟
奎特尔星球上虽然有Node英雄们，但英雄们有一个问题，他们自己不会行动，必须靠魔灵们驱动node完成任务。
不同的魔灵注入到node，就可以让node具有不同的外表、特性和能力。
##1. 光系魔灵
前面提到过，光系魔灵可以直接在场景编辑器看到它们，这里我们介绍几个光系魔灵的代表。
###cc.Sprite
Sprite魔灵可以说是众魔之首，在一场战斗中不论是重要度和规模数量都是其他魔灵不可企及的。Sprite主要特点是通过美化node，色诱敌人，扰乱其心使其沉迷不可自拔。
###cc.Label
魔灵中的第二把交椅应该属于Label，Label在战斗中将node的躯体化身为文字，诱敌深入。cc.Label还有一个姐妹是cc.RichText。
###cc.Button
Button老三，当敌人触摸到Sprite所装扮的node后，Button则顺势摆出一娇羞的动作（按钮动画：图片切换、颜色切换、缩放切换），并通过事件函数报告敌军行踪。
###cc.EditBox
老四EditBox，通常也是与Sprite配合，诱使敌人输入文本，从而窃取情报（最为常见的是用户名、密码）。
##2. 暗系魔灵
暗系魔灵在场景编辑中是很难直接看到他们的，他们身藏在Node英雄与光系魔灵的背后，用自己独特的能力为整个战事服务。
###cc.Widget
Widget魔灵虽然不能被看见，但它可以帮助node在不同战场确定自己的位置（屏幕适配、相对定位），如果一只队伍要在不同尺寸的战场上作战，那Widget绝对少不了，特别是在上层Node节点。
###cc.Layout
Layout魔灵像是一个严格的教官，可以约束node下的小分队（子节点）以纵向、横向、网格方式进行自动排列，以及间距和边距。还可以根据子节的排列改变自己所附身的node的大小。
###cc.Canvas
Canvas魔灵为整体战场划出界，限并化身出一道结界，与其他装备有Widget的魔灵让战场更加的和谐。
奎特尔引擎还提供了大量的其他魔灵，按奎特尔的传统将他们分为：
UI系、渲染系、物理系、碰撞系、用户系
我们这里介绍的光系、暗系其实是属于UI、渲染系中的成员。更为强大的是创世之主可以自己创造魔灵，集从魔之力面对奎特尔星球来范之敌。
