等轴测渲染和拾取?


23

我一直在寻找在菱形世界中绘制(世界->屏幕)和鼠标拾取(世界->屏幕)等距图块的公式。我尝试过的似乎总是不对劲。这样做的通常/正确方法是什么?


使用的确切方法和公式取决于瓷砖的形状,可能还取决于您如何绘制地图(在地图的顶部,底部或其中一侧为0,0)更多详细信息关于你的问题会有所帮助。
thedaian

1
磁贴为2:1(更具体地说,为64x32)。因为我正在编写编辑器,所以坐标系无关紧要。(不过,顶部或左侧的0,0似乎是明智的。)
mpnk121

这个问题来得太晚了,我什至没有一个完整的答案,但是在这个精确的主题上有一个很好的Google Tech Talk。他们的设置包括选择任意图像的非透明部分(在javascript中,不少)。 youtube.com/watch?v=_RRnyChxijA
塞斯·巴丁

Answers:


21

根据您的评论,这是我用来将图块x,y值转换为屏幕坐标的代码。现在,它不考虑“ 3d磁贴”,所有内容都被视为在同一平面上,因此,如果您编写的游戏很重要,则此代码将不起作用。

//this converts a map x/y coordinate into screen coordinates
//public, static method, so can be called outside the Tile object
point Tile::convertToScreen(int x, int y, int offsetX, int offsetY)
{
        point screen;
        //calculate the screen coordinates
        //note: these will then be modified by the camera
        screen.x = offsetX - (y * TILE_WIDTH/2) + (x * TILE_WIDTH/2) - (TILE_WIDTH/2);
        screen.y = offsetY + (y * TILE_DEPTH/2) + (x * TILE_DEPTH/2);
        return screen;
 }

point只是一个包含x和y ints的结构,在您的情况下,TILE_WIDTH为64,TILE_DEPTH的命名不正确(实际上是切片图形的高度),但在您的情况下,则为32。偏移量是您要让瓦片地图在不同的x,y位置“开始”(例如,如果您希望瓦片在另一组瓦片上方)。通常,偏移量可以为0,0。

这将生成一个顶部,中间为0,0的地图,如下所示:

        0,0
    0,1     1,0
0,2     1,1     2,1

至于找到光标的图块x,y:

point selectedTile;
int x = mX - camera.x;
int y = mY - camera.y;
selectedTile.x = (y + x/2)/TILE_DEPTH;
selectedTile.y = (y - x/2)/TILE_DEPTH;

在这段代码中,mX和mY是鼠标屏幕坐标,我们将它们与摄像头值组合起来以找出我们在“世界坐标”中的位置。其他所有内容与前面的代码示例相同。

再次假设这是一个平面的2d等距图块地图。如果要使用地图的半3D视图,则需要做一些额外的工作,并且所有这些都假定您仍在2D模式下工作。


1
谢谢!-这非常适合平面地图。现在,您能否告诉我更多有关如何添加另一层上任意大小(即Z深度)的图块的信息?(例如道具,如水井或路灯)
mpnk121

2
那就是您使用offsetY和offsetX值的时候。如果您的路灯是64x64,则将offsetY值传递为负32应该使它出现在正确的位置。希望这足以让您入门。
thedaian

6
您的示例中的坐标“ 2,1”是否应该为“ 2,0”?
克里斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.