美文网首页Cocos CreatorCocosCocos Creator
CocosCreator基础教程—从zIndex开始(1)

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

作者: 张晓衡 | 来源:发表于2018-07-19 23:23 被阅读17次

    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组件的模式编写可复用的组件代码?欢迎留言交流。


    关注「奎特尔星球」微信公众号,我们一起成长。

    相关文章

      网友评论

        本文标题:CocosCreator基础教程—从zIndex开始(1)

        本文链接:https://www.haomeiwen.com/subject/exfzpftx.html