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

问题描述

我是HTML5 Canvas和JavaScript的新手，但是有一个简单的方法在HTML5 Canvas元素中使用等距投影？

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

$ b $

解决方案

首先，我建议把游戏世界看作是一个普通X by Y网格的方形砖。

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

  var ctx = canvas.getContext（'2d'）; 
 
 function render（ctx）{
 var dx = 0，dy = 0; 
 ctx.save（）; 
 
 //将投影更改为等轴视图
 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（）; //回到正交投影
 
 //现在，弄清楚哪个瓦片在鼠标光标下... :) 
} 
  

这是令人兴奋的第一次你得到它的工作，但你会很快意识到，这不是有用的绘制实际等距地图...你不能只需旋转您的平铺图像，看看在拐角处。

奖金：找出鼠标在哪个图块上

你想要做的是从视图坐标（从画布原点的像素偏移量）转换为世界坐标（沿着对角线的瓦片0,0 的像素偏移量）轴）。然后简单地将世界坐标除以瓦片的宽度和高度，得到地图坐标。

理论上，你需要做的是投射向量通过上面的投影矩阵的逆来获得世界位置。我在理论上说，因为由于某种原因，画布不提供返回当前投影矩阵的方法。有一个 setTransform（）方法，但没有 getTransform（），所以这是你必须滚动你自己的3x3变换矩阵。

这不是那么难，你需要这个在世界和视图坐标之间转换时绘制对象。

希望这有助于。

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

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

Thanks all for reply's.

解决方案

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

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".

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.

Hope this helps.

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