等距帆布/ SVG HTML 5图像

Question

我正在寻找一些教程，如何在等轴测图中制作画布或SVG（不确定哪些）图像以用于RTS游戏目的。图像应仅可在可见部分上单击，否则用户应单击背景图像。它可以通过自动检测PNG的透明区域或从颜色叠加来完成。我不知道哪个最好。

感谢。

Answer 1

如果您不想改变场景的视角，那么我会使用SVG因为它们是DOM元素（可点击开箱即用）并且您可以将点击区域限制为非透明部分元素。一个非常好的SVG库是RaphaelJS。

帆布是一种不同的动物。您在画布上绘制的矢量/栅格不会“保留”，这意味着与SVG不同，您无法指示刚刚在画布上移动的框。相反，您负责重新绘制您想要的框。在画布上绘制所有内容后，它基本上变成了一个大位图。如果您的场景的视角会发生变化，您可能需要画布最佳：速度和灵活性。使用矩阵变换，您可以进行2D移动，旋转，缩放和倾斜。由于您负责转换矩阵，因此您还可以模拟3D运动。如果您的用户使用非IE浏览器，您还可以使用WebGL，这是一个完整的3D成像系统。由于这种功能带来了复杂性，因此您可能会查看可用于画布的许多游戏开发平台。

使用这两个元素，您可以使用websockets来执行RTS（当然，对于不支持websockets的浏览器，可以降级为长轮询）。