使用 HTML5 Canvas 进行真正的等距投影 [英] True Isometric Projection with HTML5 Canvas

问题描述

我是 HTML5 Canvas 和 JavaScript 的新手，但有没有一种简单的方法可以在 HTML5 Canvas 元素中进行等距投影?

I am a newbie with HTML5 Canvas and JavaScript, but is there a simple way to have Isometric projection in HTML5 Canvas element?

我的意思是真正的等距投影 - http://en.wikipedia.org/wiki/Isometric_projection

I am mean the true isometric projection - http://en.wikipedia.org/wiki/Isometric_projection

谢谢大家的回复.

推荐答案

首先，我建议将游戏世界想象成一个由 X 乘 Y 方格组成的规则网格.这使得从碰撞检测、寻路甚至渲染的一切都变得更加容易.

First, I would recommend thinking of the game world as a regular X by Y grid of square tiles. This makes everything from collision detection, pathfinding, and even rendering much easier.

要在等距投影中渲染地图，只需修改投影矩阵:

To render the map in an isometric projection simply modify the projection matrix:

var ctx = canvas.getContext('2d');

function render(ctx) {
    var dx = 0, dy = 0;
    ctx.save();

    // change projection to isometric view
    ctx.translate(view.x, view.y);
    ctx.scale(1, 0.5);
    ctx.rotate(45 * Math.PI /180);

    for (var y = 0; i < 10; y++) {
        for (var x = 0; x < 10; x++) {
            ctx.strokeRect(dx, dy, 40, 40);
            dx += 40;
        }
        dx = 0;
        dy += 40;
    }

    ctx.restore(); // back to orthogonal projection

    // Now, figure out which tile is under the mouse cursor... :)
}

当您第一次使用它时，这很令人兴奋，但您很快就会意识到它对于绘制实际等轴测图并没有多大用处……您不能只是旋转平铺图像并查看拐角处有什么.变换与其说是为了绘图，不如说是为了在屏幕空间和世界空间之间进行转换.

This is exciting the first time you get it work, but you'll quickly realize that it's not that useful for drawing actual isometric maps... you can't just rotate your tile images and see what's around the corner. The transformations are not so much for drawing, as they are for converting between screen space and world space.

奖励:找出鼠标在哪个瓷砖上

Bonus: figuring out which tile the mouse is over

您想要做的是从视图坐标"(从画布原点的像素偏移)转换为世界坐标"(从 tile 0,0 沿对角轴的像素偏移).然后简单地将世界坐标除以瓦片宽度和高度即可得到地图坐标".

What you want to do is convert from "view coordinates" (pixel offsets from the canvas origin) to "world coordinates" (pixel offsets from tile 0,0 along the diagonal axes). Then simply divide the world coordinates by the tile width and height to get the "map coordinates".

理论上，您需要做的就是通过上述投影矩阵的逆来投影视图位置"向量以获得世界位置".我说的是理论上，因为出于某种原因，画布没有提供返回当前投影矩阵的方法.有一个 setTransform() 方法，但没有 getTransform()，所以这是你必须滚动你自己的 3x3 变换矩阵的地方.

In theory, all you need to do is project the "view position" vector by the inverse of the projection matrix above to get the "world position". I say in theory, because for some reason the canvas doesn't provide a way of returning the current projection matrix. There is a setTransform() method, but no getTransform(), so this is where you'd have to roll your own 3x3 transformation matrix.

实际上并没有那么难，在绘制对象时，您将需要它来在世界坐标和视图坐标之间进行转换.

It's not actually that hard, and you will need this for converting between world and view coordinates when drawing objects.

希望这会有所帮助.

这篇关于使用 HTML5 Canvas 进行真正的等距投影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！