Question

创建一个琼脂克隆，它现在几乎可以工作，但是我希望通过这样做来改进它，如果玩家离开屏幕，屏幕跟随它们，这是通过视口完成的。唯一的问题是我不知道该怎么做。我试过ctx.translate（），但这只是导致一些奇怪的东西。（授予，我使用常规背景，并且我已经听说过它需要一个实际的图像，但我也不知道如何做到这一点，所以...）这里＆＃39;是我的jsFiddle。初始化与画布相关的变量：

var canvas = document.createElement("canvas");
canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.display = "none";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

Answer 1

您使用翻译来设置原点。在画布上或关闭的位置，坐标X = 0，y = 0是。

你的角色正在游荡一个比画布大许多倍的游戏世界。你还有许多其他物品和玩家，每个物品和玩家在游戏世界都有自己的坐标..

渲染它的一种方法是...对于游戏中的每个项目，找到距离原点的距离，并在绘制它们时从每个项目中减去该距离。然后在屏幕中央绘制自己的角色。但这很慢，并且需要为每个项目/玩家提供额外的数学计算。

所以让硬件用变换来做。变换将比例（x，y）保持为旋转（ang）和平移（原点偏移）。每次在画布上绘制一个对象时，变换矩阵都会应用于它，你无法避免它，它必须发生。因此，如果你不利用它，那就浪费了。

如何使用它。 您的游戏区左上角10,000，-1,000像素，右下角10,000,10,000像素。每个人都有一个位置在这些数字之间，包括你的播放器，可能是5,000,6,000像素。如果你ctx.drawImage(playerImage,5000,6000)图像不会出现，它的方式是画布的右下角，但你希望他在画面的中心。

要执行此操作，请移动原点（当前位于画布的左上角（0,0）），以便在中心显示5000,6000。

var playerX = 5000;  // your position
var playerY = 6000;
var screenWidth = 1920;  // size of the screen
var screenHeight = 1080;
var originX = 0;   // where the origin is
ver originY = 0

让自己居中移动原点，使其减去你的位置。

originX -= playerX;
originY -= playerY;

现在你在画布的左上角，但你想要中心。所以将它移回屏幕尺寸的一半。

originX += screenWidth/2;
originY += screenHeight/2;

将它们合二为一。假设原点总是0,0而且你得到了

originX = -(playerX-screenWidth/2);
originY = -(playerY-screenHeight/2);

现在你有了可以放入翻译的数字。

但如果你把它直接放到变换矩阵中就好了，而且你真的不需要原点变量。

因此只需一步。

ctx.setTransform(1,0,0,1,-(playerX-screenWidth/2),-(playerY-screenHeight/2));

现在当你在

画画时

ctx.drawImage(payerImage,5000,6000);

您出现在画布的中心。 5500,6200的坏人用

画画

ctx.drawImage(enemyImage,5500,6200);

将出现在画布上，右边500像素，距你200英尺。

现在你不必乱用任何人的坐标并将它们渲染到原来的位置，你只用一行代码移动了游戏中的所有内容。它根本没有减慢你的游戏速度，因为变换总是应用，你只是确保它做你想做的。

在更新位置后，将变换设置在每帧开头附近，一切都将跟随您的角色。

画布视口

1 个答案: