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

张晓衡

发布于 2019-09-11 16:53:49

1.8K0

发布于 2019-09-11 16:53:49

文章被收录于专栏：Creator星球游戏开发社区Creator星球游戏开发社区

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. 问题

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

“zIndex:0”，这样定义zIndex属性，它是一个浮点数类型，你可以在编辑器设置0.1这样的值。运行在浏览器或H5环境没什么问题，但跑在原生环境zIndex对应的是cocos2d-x中的Node::setLocalZOrder(int localZOrder)函数，它的参数类型是整型。
这个组件只在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的组件编程模式和思想。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

cocos2d

本文分享自 Creator星球游戏开发社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

node.js

cocos2d

登录后参与评论

0 条评论

热度