类似透视变换在画布上？ [英] Mode7-like perspective transform in canvas?

问题描述

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

I'm making a canvas-based game engine and am wondering if anyone has any good info on how to achieve an overhead view perspective. What I'm looking for is somewhere halfway between the traditional birds eye view and the old SNES mode7 view. Just a slight angle to give the illusion of 3D.

我想弄清楚什么是最好的方式来处理透视倾斜。我不是做旋转，所以3D矩阵的东西将会过时，但我需要能够处理以一致的角度渲染地图层，如果角度是可调的，这将是很好。我还需要处理深度变形。基本上，底行像素应该是1：1像素宽度和高度，那么对于每一行，它会得到，例如，小5％或类似的。我想要的是能够提供一个大的画布作为纹理，然后提供0和90之间的摄像机角度0是完全水平和90是鸟瞰图。

I'm trying to figure out what is going to be the best way to deal with the perspective skewing. I'm not doing rotations so 3D matrix stuff would be going overboard, but I need to be able to deal with rendering the map layers at a consistent angle and it'd be nice if the angle was adjustable. I also need to deal with the depth warp. Basically, the bottom row of pixels should be 1:1 pixel width and height, then for each row it'd get, for example, 5% smaller or something like that. What I'd like is to be able to supply a large canvas as a texture and then supply a camera angle between 0 and 90 where 0 is perfectly horizontal and 90 is birds eye view.

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

Anyone have any related tutorials or sample code? I've searched online a bit, but everything I've found seems to either be unsuitable for use in this particular application or overly complex, doing all sorts of crazy 3D skewing and rotation stuff. All I want is to take the normal tiled grid and lean it back a bit, no rotations or complicated stuff like that.

这里是一个我想要的例子;
>

Here's an example of what I want;

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

The bottom pixel row is 1:1 pixel ratio, and each row above that progressively gets shorter horizontally and vertically. The source texture of the top center region is normally about half the height of the bottom center region, but it has been shrunk vertically and horizontally to fit the perspective.

思维可能最好的工作是将平面视图中的当前视口状态渲染到另一个画布上，在顶部和侧面有大约50％的额外空间，然后从上面切割一个上部三角形区域，并将其绘制到实际可见的

What I'm thinking might work best is to render the current viewport state to another canvas in flat, birds eye view, with approximately 50% extra space on the top and sides, then slice an upside triangular region from that and draw that to the actual visible canvas.

只有问题是，在计算角度等方面我会遇到数学问题。

Only problem is, I suck at math when it comes to calculating angles and such.

推荐答案

如果我理解你的权利，你只是想要一个简单的梯形变换。如果是，则可以此或此链接可帮助您。对于不是中心的图像，它将只是一个额外的菱形变形，这是很容易可能的画布，据我所知。

if i understand you right, you just want a simple trapeze transformation. if so, maybe this or this link helps you out. for images that aren't centered it would just be an additional rhomboid tranformation, wich is easily possible with canvas, as far as i know.

这篇关于类似透视变换在画布上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！