javascriptcocos2d-js

Pixel offset when there is multiple children


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

normal state

When I keep adding sprites on the same position, appears that pixels moved, the square not stack up in different positions

added many children

When hiding sprite except the first square, seems it back to correct position

hide children

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

});

square.png


Solution

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