可以用 HTML5 做等距透视<canvas>
吗?它与setTransform
? 还是以另一种方式存在?
例子:
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
类似于 Farmville 的视角。
非常感谢。
可以用 HTML5 做等距透视<canvas>
吗?它与setTransform
? 还是以另一种方式存在?
例子:
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
类似于 Farmville 的视角。
非常感谢。
你可以在画布上绘制任何你想要的东西到单个像素,所以任何像“是否可能”这样的问题都会有一个“是”的答案。
如果您的意思是如果画布中已经内置了 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
将设置一个矩阵:
angle1
angle2
您可以在此示例页面上看到这些公式的一个小示例。
制作等距游戏与其说是倾斜整个画布,不如说是关于您使用的图形。例如,瓷砖通常是 h=w/2。因此,在普通游戏中,您将拥有一个 32x32 的图块,而在等距游戏中,您将使其成为 32x16。瓷砖的位置也有点不同,以补偿角度。
简短的回答是,等距游戏完全可以使用画布。以Freeciv为例。
另一个询问等距游戏创建细节的好地方是https://gamedev.stackexchange.com/