Question

我目前正在使用box2Dweb创建游戏。每当我的形状移向画布的右下角时，它们的精灵似乎会移动一些越来越大的偏移量（如果我将形状移向画布的左上角，则精灵对齐得越来越好），我真的不明白为什么。你们在我的显示器循环上看到了什么问题吗？

我正在使用此代码段创建方形多维数据集：

this.createSquare= function(x, y, bodyDef, fixtureDef, object){
    if(object.isStatic){
        bodyDef.type = b2Body.b2_staticBody;
    }else{
        bodyDef.type = b2Body.b2_dynamicBody;
    }
    fixtureDef.shape = new object.shape;
    polygonShape = fixtureDef.shape;
    polygonShape.SetAsBox(object.width,object.height);
    bodyDef.position.Set(x/game.worldScale,y/game.worldScale);
}

我在显示循环中使用此功能来显示一些精灵：

for(var i=0; i < tab.length; i++) {
        context.save();
        console.log(context);
        context.translate(tab[i].GetBody().GetPosition().x * 30, tab[i].GetBody().GetPosition().y * 30);
        context.rotate(tab[i].GetBody().GetAngle());
            var dataResize = { 'image'    : tab[i].GetUserData().img,
                               'imgPosX'  : tab[i].GetBody().GetPosition().x,
                               'imgPosY'  : tab[i].GetBody().GetPosition().y,
                               'imgWidth' : tab[i].m_shape.m_vertices[2].x*60,
                               'imgHeight': tab[i].m_shape.m_vertices[2].y*60
            }
            context.drawImage(
                        dataResize.image, 
                        (dataResize.imgPosX) - (dataResize.imgWidth/2), //img pos x
                        (dataResize.imgPosY) - (dataResize.imgHeight/2), //img pos y
                        dataResize.imgWidth, //img wdith
                        dataResize.imgHeight //img height
                    )
        context.restore();
    }

我错过了什么？我已经尝试过阅读我在SOFLOW上找到的所有内容，并且看不到问题。

由于

Answer 1

好的，发现了什么问题：

在drawImage中我做了

(dataResize.imgPosX) - (dataResize.imgWidth/2), //img pos x
(dataResize.imgPosY) - (dataResize.imgHeight/2), //img pos y

当我应该做的时候

(-dataResize.imgWidth/2)

而不是！

精灵与身体不对齐，在显示循环中找不到bug

1 个答案: