画布视口

Canvas viewport

本文关键字：视口 布视口      更新时间：2023-09-26

创建琼脂克隆，现在基本上可以了，但我想通过制作它来改进它，这样如果玩家离开屏幕，屏幕就会跟随他们，这是用视口完成的。唯一的问题是我不知道该怎么做。我尝试了ctx.translate（），但结果产生了一些奇怪的东西。（当然，我使用的是常规背景，我听说它需要一个实际的图像才能工作，但我也不知道如何做到这一点，所以…）这是我的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");

您可以使用translate来设置原点。其中，在画布上或画布外，坐标X=0，y=0为。

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

一种渲染方法是……对于游戏中的每一个项目，找到你离原点的距离，并在绘制时从每个项目中减去。然后在屏幕中央绘制自己的角色。但这是缓慢的，并且需要每个项目/玩家进行额外的计算。

所以让硬件来完成转换。变换保持缩放（x，y）、旋转（ang）和平移（原点偏移）。每次在画布上绘制对象时，都会对其应用变换矩阵，这是不可避免的，它必须发生。所以，如果你不利用它为你的优势，它只是浪费。

如何使用它。你的游戏场地从左上角-100000像素到右下角1000010000像素。每个人在地图上都有一个位于这些数字之间的位置，包括你的玩家，可能是50006000像素。如果ctx.drawImage(playerImage,5000,6000)，图像将不会出现，它位于画布的右下角，但您希望他位于屏幕的中心。

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

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);

您将出现在画布的中心。坏家伙在55006200战平

ctx.drawImage(enemyImage,5500,6200);

将出现在画布上，向右500像素，向下200像素。

现在你不必摆弄任何一个坐标，只需在它们所在的地方渲染它们，你只需要一行代码就可以移动游戏中的所有东西。它并没有减缓你的游戏速度，因为变换总是被应用的，你只是确保它做了你想做的事。

在更新位置后，将变换设置在每帧的开头附近，所有内容都将跟随角色。

相关文章：