Question

我正在开发HTML5画布游戏（2D）。画布的大小为2000x2000像素。我的屏幕有1920x1080的res。我想在JavaScript中制作一个相机对象来模仿播放器后面的相机（应该是视口的中心）

从我以前的一个游戏开始，我在C＃（XNA）

中使用过它

center = new Vector2(player.position.X + (player.rectangle.Width / 2) - (view.Width / 2), 50);
transform = Matrix.CreateScale(new Vector3(1, 1, 0)) * Matrix.CreateTranslation(new Vector3(-center.X, -center.Y, 0));

是否有人能够帮助我使用HTML5 Canvas将其“翻译”为JavaScript？我真的很感激！

Answer 1

我之前为游戏所做的是制作一个视图对象。这个视图对象有一个x和y变量，它将跟随播放器~~（你可以想出如何编码，只需根据视图的x和y检查播放器的x和y，以及从整个房间开始）~~

编辑：为了澄清，根据播放器的x和y值更改视图的x和y值。不要将视图的X和Y设置为玩家的X和Y，因为这会使画布在0,0处绘制玩家。而是检查以确保玩家位于视口的边界内，如果不是，则相应地移动视口。

然后在画布上绘图时，使用以下命令指定绘制游戏中的所有对象：

ctx.drawImg(img, x - view.x, y - view.y);

这将绘制相对于相机视图的所有内容。我正在尝试开发一个JavaScript游戏引擎，我遇到了同样的问题。我希望这有帮助。如果您需要更多说明，请随时提出。

HTML5 Canvas 2D游戏相机

1 个答案: