Cocos Creator 源码解读:siblingIndex 与 zIndex

zIndex很容易做到siblingIndex不容易做到的事情,例如下面这个各个精灵的排序,根据各个精灵脚底的y计算出zIndex直接赋值就行。

但是使用siblingIndex就费劲了。

image

1赞

我用的3.2,已经没有zindex了,不过要排个序那真是太蛋疼了

zIndex 在一些情况下确实用起来要比 siblingIndex 方便多了。

结果是 3.x 中 zIndex 被移除了…

要实现这一点,需要重构渲染流来支持,这显然是不太可能的~

当然本文的主旨并不是阻止大家使用 zIndex,而只是帮大家解释下 zIndex 的原理、机制。

俗话说:知己知彼,百战百胜

当我们掌握了知识之后才能更好地运用他们。

果然和我说的一样,zIndex比sib方便多了,3.x已经算是负优化了,只要内部结构没变,自己重新扩展出一个zIndex还是可以的

3.x里用Z轴天然就是景深排序的,再加一个zIndex岂不是冗余?

还没深入用过3.x,不晓得,那怎么代替zIndex

直接用z吗

怎么那么多人鄙视zIndex的?是需求做的太少了吧?zIndex在某些情况下会比setSiblingIndex好用多了。

2d ui有z的概念么?

3.0可以用uiTransform的priority 虽然这个在3.1也被废除了 不过可以先用着

那3.1只有setSiblingIndex了,怎么实现之前zIndex或者priority的类似功能呢?

priority还可以用。如果要自己实现会很麻烦。其实就是类似uitransform的priority那样实现一套。然后所有ui还要有这个组件

UI上排序确实不好用,动态增加节点要计算插到第几个位置,还不好计算。而zIndex是代码宏定义出来的,不用计算。

1赞

这个话题应该可以中终结了,用UItransform组件里面priority属性,和zindex功能一致

3.3后面的版本 priority 已经被抛弃了,哈哈
我刚模拟了个zIndex写法,在onLoad中,需要排序的节点children全部设置一遍setZIndex。
后面随意调用setZIndex动态设置zIndex。

不牵扯排序的节点children不用调用此方法。

//设置zIndex
setZIndex(node: Node, zIndex: number) {
(node as any).zIndex = zIndex;
let bFindMe = false;
let parent = node.parent;
if(!parent){
console.log(‘no parent,please check code!’);
return;
}
let children = parent.children;
for (let i = children.length - 1; i >= 0; --i) {
let child = children[i];
if (node == child) {
bFindMe = true;
} else {
let chIndex = (child as any).zIndex;
if (typeof chIndex != ‘number’) chIndex = 0;
if (zIndex >= chIndex) {
node.setSiblingIndex(bFindMe ? i + 1 : i);
break;
}
}
}
// let str = ‘’;
// for(let i=0;i<children.length;++i){
// str += ‘,’+children[i].name+’:’+(children[i] as any).zIndex;
// }
// console.log(str);
}

1赞

刚试了下3.3.2版本,可以使用priority 属性,并有效,测的是web,原生还没测
当然项目设置—》功能裁剪—》废弃接口的√要去掉

废弃接口就不用了,后面升级项目,又是一堆问题,还是用setSiblingIndex比较好。

这个方法直接数组排序,这样的性能表现会好很多