有多个子像素时的像素偏移

Question

发现了一个奇怪的行为，当我不断添加或切换显示精灵对象时。切换某些可选的UI时，这会使我的游戏屏幕摇晃。

试图通过简化代码重现此问题。这是实验。红线显示first square.png的原始位置normal state

当我继续在同一位置添加精灵时，似乎像素移动了，正方形不在不同位置堆叠added many children

隐藏第一个正方形以外的精灵时，看起来它回到了正确的位置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

Answer 1

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

尝试这些步骤：

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

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