本文详解介绍了Cocos Creator这一游戏开发方案。Cocos Creator包括 cocos2d-x 引擎的 JavaScript 实现，能让用户快速开发游戏所需要的各种图形界面工具。目前，其支持发布游戏到 Web、iOS、Android、各类"小游戏"、PC 客户端等平台，能够实现全平台运行。
CocosCreator基础教程（1）——从zIndex开始
从Cocos2d-x/lua/js过来的老程序员们肯定发现了，在CocosCreator属性检查器中Node节点竟然没有zIndex属性？
因为这一点，UI节点的遮挡关系控制不便，经常让策划、测试、甚至老板找程序员麻烦。不知道大家有没想过用编辑器去控制zIndex呢，请思考一下？我发现自己是用了CocosCreator快一年才去想到这个问题的。
要用编辑器控制，最简单的方案就是编写组件脚本。
/***SetZIndex.js 控制组件
**/
cc.Class({
extends: cc.Component,
//编辑器属性定义
properties: {
zIndex: 0
},
onLoad () {
this.node.zIndex = this.zIndex;
}
});
代码非常简单，将这个组件脚本挂载到任意节点上，通过zIndex属性就能控制节点的zIndex了，看下图：
SetZindex组件
但上面的代码有两个小问题，不仔细还不易被发现：
-
“zIndex:0”，这样定义zIndex属性，它是一个浮点数类型，你可以在编辑器设置0.1这样的值。运行在浏览器或H5环境没什么问题，但跑在原生环境zIndex对应的是cocos2d-x中的Node::setLocalZOrder(int localZOrder)函数，它的参数类型是整型。
-
这个组件只在onLoad时设置了节点的zIndex，如果运行过程中，给这个组件的zIndex属性赋值没有任何作用，并且在编辑器中，你设置zIndex也看不到节点层级的变化。
知道问题了就好办了，看下面的代码：
/**
*SetZIndex.js 控制组件
**/
cc.Class({
extends: cc.Component,
//编辑器属性定义
properties: {
zIndex: {
type: cc.Integer， //使用整型定义
default: 0,
//使用notify函数监听属性变化
notify(oldValue) {
//减少无效赋值
if (oldValue === this.zIndex) {
return;
}
this.node.zIndex = this.zIndex;
}
}
},
onLoad () {
this.node.zIndex = this.zIndex;
}
});
使用一个对象来定义zIndex属性，同时监听zIndex的修改，问题解决。
SetZIndex组件不依赖任何其它组件和节点，可以挂载任意节点之上，因此它是一个通用组件。不要小看了这个组件的设计，它蕴涵了CocosCreator的组件编程模式和思想。
cocosCreator****
教程地址可以通过关注微信公众号cityapes或者扫描关注后回复游戏教程免费获取下载链接