Javascript Canvas Game - 移动时倾斜宇宙飞船答案

【问题标题】：Javascript Canvas Game - Tilting spaceship when movingJavascript Canvas Game - 移动时倾斜宇宙飞船
【发布时间】：2016-10-14 22:17:01
【问题描述】：

我是 javascript 的初学者，正在尝试制作一个 javascript 太空游戏，您可以在其中移动宇宙飞船以避开小行星。

这是一个预览链接。它应该在桌面或移动设备上工作： http://dylanmadigan.net/_digital-work/game-2/5-tilt/index.html

我希望船在移动时稍微向左或向右倾斜。用精灵表倾斜船更好，还是在javascript中实际旋转图形？

我目前正在使用精灵表执行此操作。船动画是两帧（使助推器火焰闪烁）。我在单个精灵表上分别有两个框架，分别用于直、左和右。 view player sprite sheet here 当精灵左右移动时，这似乎会导致闪烁。每隔一段时间它就会消失。我不确定为什么。

精灵表是预加载的，我认为这样可以防止闪烁。确实如此，直到我决定为倾斜的宇宙飞船再添加 4 个框架。

如果我使用 javascript 来旋转图形而不是精灵表会更好吗？我只是认为精灵表会更容易。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

无论您如何旋转船，通过绘制的精灵或在画布中旋转。每种方法都有其优点和缺点。

围绕中心旋转精灵

渲染一个缩放的精灵，围绕它的中心旋转，并且有一个 alpha 淡入淡出（因为...？为什么不）

function drawSprite(ctx,img,x,y,scale,rot,alpha){
    ctx.setTransform(scale,0,0,scale,x,y); // Position and scale
    ctx.rotate(rot); // rotate
    ctx.globalAlpha = alpha;  // set alpha
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw sprite offset half its size
}

绘制完精灵后，您需要重置变换和 alpha

ctx.setTransform(1,0,0,1,0,0); // sets default transform
ctx.globalAlpha = 1.0; // resets alpha

您可以只拥有一个船精灵并将引擎制作为单独的精灵（只需移除船并保持相同的大小以方便定位）然后您可以使用 alpha 淡入和控制独立于船的引擎发光和出去。您还可以设置ctx.globalCompositeOperation = "lighter" 或"screen" 以获得更好的引擎辉光。将comp模式重置为"source-over"以进行正常渲染。

您还应该考虑使用requestAnimationFrame 和单个游戏循环，而不是使用所有的 setTimeouts。

【讨论】：