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 回答