有多个孩子时的像素偏移

Question

在我不断添加或切换显示精灵对象时发现了一个奇怪的行为。这让我的游戏画面在切换一些可选 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

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

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

Answer 2

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

试试这些步骤：

• 每次添加新精灵时打印它们的位置
• 固定视图长度
• 尝试打印正方形而不是使用图像

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