11

可以用 HTML5 做等距透视<canvas>吗？它与setTransform? 还是以另一种方式存在？

例子：

ctxt.setTransform (1, -0.2, 0, 1, 0, 0);

类似于 Farmville 的视角。

非常感谢。

4

2 回答 2

33

你可以在画布上绘制任何你想要的东西到单个像素，所以任何像“是否可能”这样的问题都会有一个“是”的答案。

如果您的意思是如果画布中已经内置了 3d 管道，那么答案是否定的，画布上下文是 2d，因此命令是 2d。Canvas 元素确实支持完整的 3d 管道 (webgl)，但这是非常低级的，旨在提供对 GPU 的访问（更具体地说，旨在表示当前硬件的工作方式）；“高级”抽象 API 是 2d。您可以设置一个 2d 矩阵，使您的正方形绘图命令看起来像等轴测视图，但您将无法在该平面上方或下方绘制任何东西，因为高级命令仅处理 2d 坐标。

您当然可以使用标准的 3d->2d 映射技术在画布 2d 上下文中进行 3d 渲染（等距或透视）。例如，请参阅这个仅使用 canvas 2d 上下文和 javascript的4k 演示（如果您的浏览器不支持 HTML5，这里是一个相同的 youtube 视频）。

对于等轴测视图，矩阵设置部分更简单......例如

var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);
var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;
ctx.setTransform(a, d, b, e, c, f);

画布上下文在哪里ctx将设置一个矩阵：

  • XY 旋转角度为angle1
  • 有一个视角倾斜角angle2
  • 映射长度为 1 到 100 像素
  • 将 (0, 0) 映射到 200, 200

您可以在此示例页面上看到这些公式的一个小示例。

于 2011-03-03T20:26:32.053 回答
3

制作等距游戏与其说是倾斜整个画布，不如说是关于您使用的图形。例如，瓷砖通常是 h=w/2。因此，在普通游戏中，您将拥有一个 32x32 的图块，而在等距游戏中，您将使其成为 32x16。瓷砖的位置也有点不同，以补偿角度。

简短的回答是，等距游戏完全可以使用画布。以Freeciv为例。

另一个询问等距游戏创建细节的好地方是https://gamedev.stackexchange.com/

于 2011-03-03T20:16:52.730 回答