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!
