Cocos Creator基础教程(1)—从zIndex开始

1. 引言

从Cocos2d-x/lua/js过来的老鸟们肯定发现了,在CocosCreator属性检查器中Node节点竟然没有zIndex属性。

可就因为这一点,UI节点的遮挡关系控制不便,经常让策划、测试、甚至老板经常找程序员麻烦。不知道大家有没想过要用编辑器去控制zIndex呢,请思考一下?我发现自己是用了CocosCreator快一年才去想到这个问题的。

2. zIndex编辑器控制实现

要用编辑器控制,最简单的方案就是编写组件脚本了。

/***SetZIndex.js 控制组件
**/
cc.Class({
    extends: cc.Component,    
    //编辑器属性定义
    properties: {
        zIndex: 0
    },
    onLoad () {        
        this.node.zIndex = this.zIndex;
    }
});

代码非常的简单,将这个组件脚本挂载到任意节点上,通过zIndex属性就能控制节点的zIndex了,看下图:

SetZindex组件

但上面的代码还是有点小问题,不知道你看出来没有?

3. 问题

上面的代码有两个小问题,不仔细还不易被发现:

  1. “zIndex:0”,这样定义zIndex属性,它是一个浮点数类型,你可以在编辑器设置0.1这样的值。运行在浏览器或H5环境没什么问题,但跑在原生环境zIndex对应的是cocos2d-x中的Node::setLocalZOrder(int localZOrder)函数,它的参数类型是整型。
  2. 这个组件只在onLoad时设置了节点的zIndex,如果运行过程中,给这个组件的zIndex属性赋值没有任何作用,并且在编辑器中,你设置zIndex也看不到节点层级的变化。

4. 改进

知道问题了就好办了,看下面代码:

/**
*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的修改,问题解决。

5. 小结

SetZIndex组件不依赖任何其它组件和节点,可以挂载任意节点之上,因此它是一个通用组件。不要小看了这个组件的设计,它蕴涵了CocosCreator的组件编程模式和思想。

你有使用类似SetZIndex组件的模式编写可复用的组件代码?欢迎留言交流。

点击查看原文

未经允许不得转载:cocos集中营 » Cocos Creator基础教程(1)—从zIndex开始
微信公众号:zs40086
免vip看全网视频,抢先福利电影啥都有!
10000人已关注
分享到:
赞(0) 打赏