Found a strange behaviour that when I keep adding or toggle display sprite object. That makes my game screen shakes when toggle some of optional UIs .
Tried to reproduce this issue with simplified codes. Here is the experiment. The red line shows the original position of first square.png
When I keep adding sprites on the same position, appears that pixels moved, the square not stack up in different positions
When hiding sprite except the first square, seems it back to correct position
var MyScene = cc.Scene.extend({
onEnterTransitionDidFinish: function(){
this._super();
this.initComponents();
},
initComponents: function () {
//create additional square container
var node = new cc.Node();
this.node = node;
node.setPosition(90, 90);
this.attach(node);
this.addChild(node);
//draw first square
var sprite = new cc.Sprite("square.png");
sprite.setPosition(50,50);
this.addChild(sprite);
//listen to keyboard, add square / toggle
if ('keyboard' in cc.sys.capabilities) {
cc.eventManager.addListener({
event: cc.EventListener.KEYBOARD,
onKeyPressed: function (keyCode, event) {
switch (keyCode) {
//toggle additional squares
case cc.KEY.q:
this.node.setVisible(!this.node.isVisible());
break;
//attach more squares
case cc.KEY.w:
this.attach(node);
break;
}
}.bind(this)
}, this);
}
//draw measure line
var line = new cc.DrawNode();
line.drawRect(cc.p(130,0), cc.p(132,150),cc.color(255,0,0,255),0);
this.addChild(line);
},
/**
* Attach more squares
* @param node
*/
attach: function (node) {
var xp = 0;
var yp = 0;
for (var i = 0; i < 5; i++) {
var sp = new cc.Sprite("square.png");
node.addChild(sp);
sp.setPosition(xp * 180, yp * 180);
xp++;
if (xp > 15) {
xp = 0;
yp++;
}
}
}
});
Found that the issue can be improved / resolve by assign everything into negative z order
var children = this.getChildren();
var avicinarAka = -99999;
for (var k in children) {
if (children[k]) {
children[k].setLocalZOrder(avicinarAka++);
}
}