14

我正在制作一个基于画布的游戏引擎，我想知道是否有人对如何实现俯视视角有任何好的信息。我正在寻找的是介于传统鸟瞰图和旧 SNES mode7 视图之间的某个位置。只是一个轻微的角度，给人一种 3D 的错觉。

我试图找出处理透视倾斜的最佳方法。我没有进行旋转，所以 3D 矩阵的东西会过火，但我需要能够处理以一致的角度渲染地图图层，如果角度是可调节的，那就太好了。我还需要处理深度扭曲。基本上，像素的底行应该是 1:1 的像素宽度和高度，然后对于每一行，它会得到，例如，小 5% 或类似的东西。我想要的是能够提供一个大画布作为纹理，然后提供一个 0 到 90 之间的摄像机角度，其中 0 是完全水平的，90 是鸟瞰图。

任何人有任何相关的教程或示例代码？我在网上搜索了一下，但我发现的所有东西似乎要么不适合在这个特定的应用程序中使用，要么过于复杂，做各种疯狂的 3D 倾斜和旋转的东西。我想要的只是采用正常的平铺网格并将其向后倾斜一点，不要旋转或类似的复杂东西。

这是我想要的一个例子； 这是一个例子。http://img801.imageshack.us/img801/2176/perspectivesample.jpg

底部像素行是 1:1 的像素比，其上方的每一行在水平和垂直方向上逐渐变短。顶部中心区域的源纹理通常约为底部中心区域高度的一半，但它已在垂直和水平方向收缩以适应透视图。

我认为可能最有效的方法是将当前视口状态渲染到另一个平面鸟瞰画布上，顶部和侧面大约有 50% 的额外空间，然后从中切出一个向上的三角形区域并将其绘制到实际可见的画布。

唯一的问题是，在计算角度等方面，我的数学很烂。

4

2 回答 2

7

如果我理解你的话，你只需要一个简单的空中飞人变换。如果是这样，也许这个或这个链接可以帮助你。对于未居中的图像，它只是一个额外的菱形变形，据我所知，这很容易用画布实现。

于 2010-10-08T14:19:41.600 回答
4

您所说的是可以简单地使用任何 3D api 完成的事情。但是，由于您决定尝试使用 2D 画布，因此您必须在 2D 世界中做所有事情，这意味着使用矩形、旋转、缩放、倾斜等。也称为仿射变换，如其他答案所述。

您想做的事情是可能的，但是由于您要使用 2D，因此您必须考虑 2D 功能。

  1. 生成您的初始图像。
  2. 从原始图像的底部添加一个切片到画布的底部，稍微向左定位，使图像的中心与当前画布的中心匹配。
  3. 略微增加整个图像的比例
  4. 重复直到你到达图像的顶部。

伪代码看起来像这样......

imgA = document.getElementById('source');

// grab image slices from bottom to top of image
for (var ix=height-slice_height;ix>=0;ix-=slice_height)
{

    // move a section of the source image to the target canvas
    ctx.drawImage(imgA, 0,ix,width,slice_height, 
         0-half_slice_width_increase,width,slice_height);
    // stretch the whole canvas
    ctx.scale(scale_ratio, 1);
}

这将需要大量调整，但这是一般的解决方案。

  • scale_ratio将是一个稍大的数字，但非常接近 1。
  • ctx是标准的画布 2D 上下文
  • half_slice_width_increase是按比例缩放时画布将增长的量的 1/2。这使缩放的图像居中。

为了看起来正确，您需要先转换背景图块，然后再添加图标叠加层。

于 2010-10-04T20:57:57.317 回答