Thanks!
I have made some more research and have another code snippet for you to prove that it’s acting strange. Now using Actions and moveBy()
. moveBy()
is obviously not optimal since it’s asynchronous and also not the meant way to move stuff around, but it works a bit better than settings just x and y on Nodes. The whole thing seems to be some kind of asynchronous bug as well. Check the code below!
First example: (actually working)
const grandParent = new cc.Node('GrandParent');
this.node.addChild(grandParent);
const parent = new cc.Node('Parent');
grandParent.addChild(parent);
const child = new cc.Node('Child');
parent.addChild(child);
const child2 = new cc.Node('Child2');
parent.addChild(child2);
const child3 = new cc.Node('Child3');
parent.addChild(child3);
grandParent.anchorX = 0.5;
grandParent.anchorY = 0.5;
grandParent.width = 800;
grandParent.height = 500;
parent.anchorX = 0.5;
parent.anchorY = 0.5;
parent.width = 500;
parent.height = 300;
child.anchorX = 0.5;
child.anchorY = 0.5;
child.width = 100;
child.height = 100;
child2.anchorX = 0.5;
child2.anchorY = 0.5;
child2.width = 100;
child2.height = 100;
child3.anchorX = 0.5;
child3.anchorY = 0.5;
child3.width = 100;
child3.height = 100;
const nodeActions = [{
node: grandParent,
action: cc.moveBy(0, cc.v2(-50, 0))
}, {
node: parent,
action: cc.moveBy(0, cc.v2(-150, 0))
}
];
parent.children.forEach((c, index) => {
nodeActions.push({
node: c,
action: cc.moveBy(0, cc.v2(100 * index, 0))
});
})
// Run all Moving actions that are collected in the array at once
nodeActions.forEach(item => item.node.runAction(item.action));
const debugNodes = [
{ node: grandParent, color: cc.Color.RED, lineWidth: 10 },
{ node: parent, color: cc.Color.GREEN, lineWidth: 5 },
{ node: child, color: cc.Color.BLUE, lineWidth: 3 },
{ node: child2, color: cc.Color.CYAN, lineWidth: 3 },
{ node: child3, color: cc.Color.YELLOW, lineWidth: 3 },
];
debugNodes.forEach(curr => {
const drawing = curr.node.addComponent(cc.Graphics);
drawing.rect(curr.node.x, curr.node.y, curr.node.width, curr.node.height);
drawing.lineWidth = curr.lineWidth;
drawing.strokeColor = curr.color;
drawing.stroke();
});
Result:
Second example: (Causing wrong positions).
Just by adding some before the rects are drawn:
this.node.runAction(
cc.sequence(
cc.delayTime(0),
cc.callFunc(() => {
const debugNodes = [
{ node: grandParent, color: cc.Color.RED, lineWidth: 10 },
{ node: parent, color: cc.Color.GREEN, lineWidth: 5 },
{ node: child, color: cc.Color.BLUE, lineWidth: 3 },
{ node: child2, color: cc.Color.CYAN, lineWidth: 3 },
{ node: child3, color: cc.Color.YELLOW, lineWidth: 3 },
];
debugNodes.forEach(curr => {
const drawing = curr.node.addComponent(cc.Graphics);
drawing.rect(curr.node.x, curr.node.y, curr.node.width, curr.node.height);
drawing.lineWidth = curr.lineWidth;
drawing.strokeColor = curr.color;
drawing.stroke();
});
})
)
);
or
setTimeout(() => {
const debugNodes = [
{ node: grandParent, color: cc.Color.RED, lineWidth: 10 },
{ node: parent, color: cc.Color.GREEN, lineWidth: 5 },
{ node: child, color: cc.Color.BLUE, lineWidth: 3 },
{ node: child2, color: cc.Color.CYAN, lineWidth: 3 },
{ node: child3, color: cc.Color.YELLOW, lineWidth: 3 },
];
debugNodes.forEach(curr => {
const drawing = curr.node.addComponent(cc.Graphics);
drawing.rect(curr.node.x, curr.node.y, curr.node.width, curr.node.height);
drawing.lineWidth = curr.lineWidth;
drawing.strokeColor = curr.color;
drawing.stroke();
});
}, 1); // If you run with 0ms timeout it actually works!
Resulting in:
@pandamicro hope this help to get you going on this one. I would assume this is quite a critical thing to fix, so let me know if I can help more and in what ways. Thank you!