Question

我正在使用Vanilla JS在HTML5 Canvas上制作Canvas游戏。

出于某种原因，我注意到当我将玩家精灵设置为在x轴上的x轴处绘制时，玩家会向右缩进。

（这似乎扰乱了我的碰撞检测）

我与使用piskel应用程序生成的其他精灵有同样的问题。我从另一个创建者那里使用的另一个精灵没有这个问题。

有人有任何建议吗？

以下是我游戏的链接：http://zcbuhler.github.io/spaceDrift

玩家应该在x轴上为0作为起始点，但正如您所看到的那样似乎是标签。

Answer 1

通用精灵渲染

我使用以下函数渲染精灵。

// assumes ctx is scoped and is the rendering 2d context
function drawSprite(img, x, y, scale, rotate, alpha){
    var w = img.width;
    var h = img.height;
    ctx.setTransform(scale, 0, 0 ,scale, x, y);
    ctx.rotate(rotate);
    ctx.globalAlpha = alpha;
    ctx.drawImage(img, 0, 0, w, h, -w/2,-h/2, w, h);
}

它绘制精灵，其中心位于x，y。它被缩放并旋转并设置其alpha。在普通的笔记本电脑和Firefox上，它可以实时完成2000多个精灵。在chrome上约1000 +

设置中心点使用

// assumes ctx is scoped and is the rendering 2d context
function drawSpriteCenter(img, x, y, cx, cy, scale, rotate, alpha){
    var w = img.width;
    var h = img.height;
    ctx.setTransform(scale, 0, 0 ,scale, x, y);
    ctx.rotate(rotate);
    ctx.globalAlpha = alpha;
    ctx.drawImage(img, 0, 0, w, h, -cx,-cy, w, h);
}

其中cx和cy是精灵的中心点。（它旋转的点）

用中心cx绘制一个精灵，用x和y绘制cy，用x和y绘制刻度，用alpha旋转。

// assumes ctx is scoped and is the rendering 2d context
function drawSpriteFull(img, x, y, cx, cy, scaleX, scaleY, rotate, alpha){
    var w = img.width;
    var h = img.height;
    ctx.setTransform(scaleX, 0, 0 ,scaleY, x, y);
    ctx.rotate(rotate);
    ctx.globalAlpha = alpha;
    ctx.drawImage(img, 0, 0, w, h, -cx, -cy, w, h);
}

这些函数修改当前变换和alpha。要在渲染精灵后重置画布状态，可以使用

function resetCtx(){
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.globalAlpha = 1;
}

Answer 2

你应该能够像@Bangkokian所指出的那样纠正球员的位置只需将其包装在类似的函数中：

function positionPlayer(x, y) {
    player.pos = [x -= (player.w / 2), y];
}

甚至将其作为玩家对象的方法。

碰撞检测可以通过改变'checkCollision＆＃39;来解决。功能如下：

var checkCollision = function(rect1, rect2) {
    // debugger

    // centers
    var rect1CenteredPos = [rect1.pos[0] - (rect1.w / 2), rect1.pos[1] - (rect1.h / 2)];
    var rect2CenteredPos = [rect2.pos[0] - (rect2.w / 2), rect2.pos[1] - (rect2.h / 2)];

     // console.log(bulletsArray.length);
     if (rect1CenteredPos[0] < rect2CenteredPos[0] + rect2.w &&
         rect1CenteredPos[0] + rect1.w > rect2CenteredPos[0] &&
         rect1CenteredPos[1] < rect2CenteredPos[1] + rect2.h &&
         rect1.h + rect1CenteredPos[1] > rect2CenteredPos[1]) {
         return true;
     }
     return false;
}

制作以坐标为中心的画布精灵

2 个答案:

通用精灵渲染