0

我正在开发一个 HTML5 画布游戏 (2D)。画布的大小为 2000x2000 像素。我的屏幕分辨率为 1920x1080。我想在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 吗？我真的很感激！

4

1 回答 1

1

我为之前制作的游戏所做的就是制作一个视图对象。这个视图对象有一个 x 和 y 变量，并且会跟随玩家（你大概可以弄清楚如何编写代码，只需根据视图的 x 和 y 以及整个房间）

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

然后在画布上绘制时，指定绘制游戏中的所有对象：

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

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

于 2013-01-08T23:09:49.687 回答