有多个时的像素偏移 children

Question

发现一个奇怪的行为，当我不断添加或切换显示精灵时 object。这让我的游戏屏幕在切换一些可选的 UI 时抖动。

已尝试使用简化代码重现此问题。这是实验。红线显示第一个square.png

的原始位置

当我在同一位置不断添加精灵时，出现像素移动，正方形在不同位置不堆叠

隐藏除第一个方块以外的精灵时，看起来它回到了正确的位置

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

没有上下文很难回答你，API你用的是什么？抄送是什么？无论如何，通过比较您提供的屏幕截图，您的方块似乎有效地移开了。出现奇怪的角是因为您没有清除每帧之间的屏幕。这会产生一条轨迹，移动的不是像素，而是方块本身。

尝试这些步骤：

每次添加新精灵时打印他们的位置
修复视角长度
尝试打印正方形而不是使用图像

如果您有更多信息，请编辑您的问题，然后我将根据您的其他信息编辑此答案。

Answer 2

发现可以通过将所有内容分配到负 z 顺序来改善/解决问题

var children = this.getChildren();
        var avicinarAka = -99999;
        for (var k in children) {
            if (children[k]) {
                children[k].setLocalZOrder(avicinarAka++);
            }
        }

有多个时的像素偏移 children

Pixel offset when there is multiple children

javascript

cocos2d-js