Pixel offset when there is multiple children

Question

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++;
            }
        }
    }

});

Answer 1

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++);
            }
        }

Answer 2

It's difficult to answer you without the context, what API do you use ? What is cc ? Anyway, by comparing the screenshots you provided it seems that your squares effectively moved away. The strange corners appears because you don't clear the screen between each frame. This produce a trail, it's not the pixels that moved, but the squares themselves.

Try those steps :

• print their positions each time you add a new sprite
• fix the length of view
• try to print a square instead of using an image

Edit your question if you have more information, and then I will edit this answer according to your additional information.