画布中的Mode7式透视变换？

Question

我正在制作一个基于画布的游戏引擎,我想知道是否有人有关于如何实现俯视视角的任何好信息.我正在寻找的是传统鸟瞰图和旧SNES mode7视图之间的某个地方.只是一个微小的角度来给出3D的幻觉.

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

任何人有任何相关的教程或示例代码？我在网上搜索了一下,但我发现的一切似乎都不适合在这个特定的应用程序中使用或过于复杂,做各种疯狂的3D倾斜和旋转的东西.我想要的只是采用普通的平铺网格,稍微向后倾斜,没有旋转或复杂的东西.

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

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

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

唯一的问题是,在计算角度等时,我很擅长数学.

Answer 1

如果我理解你的话,你只需要一个简单的空中转换.如果是这样,也许这个或这个链接会帮助你.对于没有居中的图像,它只是一个额外的菱形变换,据我所知,这很容易用帆布.

Answer 2

您所说的是可以使用任何 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。这使缩放后的图像保持居中。

为了看起来正确，您需要在添加图标叠加之前先转换背景图块。