二维等距网格中的点击检测? [英] Click detection in a 2D isometric grid?
问题描述
我多年来一直从事 Web 开发，我正在慢慢地让自己参与游戏开发，对于我当前的项目，我有这张等轴测图，我需要使用算法来检测哪个领域正在被点击.顺便说一下，这一切都在带有 Javascript 的浏览器中.
I've been doing web development for years now and I'm slowly getting myself involved with game development and for my current project I've got this isometric map, where I need to use an algorithm to detect which field is being clicked on. This is all in the browser with Javascript by the way.
地图
它看起来像 this，我添加了一些数字来向您展示字段的结构(瓷砖)及其 ID.所有字段都有一个中心点(x,y 数组)，绘制时四个角基于该中心点.
如您所见，它不是菱形，而是锯齿形图，并且没有角度(自上而下的视图)，这就是为什么我自己无法找到答案的原因，因为所有文章和计算通常都基于菱形有一个角度.
The map
It looks like this and I've added some numbers to show you the structure of the fields (tiles) and their IDs. All the fields have a center point (array of x,y) which the four corners are based on when drawn.
As you can see it's not a diamond shape, but a zig-zag map and there's no angle (top-down view) which is why I can't find an answer myself considering that all articles and calculations are usually based on a diamond shape with an angle.
数字
这是一张动态地图，可以更改所有大小和数字以生成新地图.
我知道这不是很多数据，但是地图是根据地图和字段大小生成的.
- 地图尺寸:x:800 y:400
- 场地尺寸:80x80(角之间)
- 所有字段 (x,y) 的中心位置
The numbers
It's a dynamic map and all sizes and numbers can be changed to generate a new map.
I know it isn't a lot of data, but the map is generated based on the map and field sizes.
- Map Size: x:800 y:400
- Field Size: 80x80 (between corners)
- Center position of all the fields (x,y)
目标
提出一种算法，告诉客户端(游戏)鼠标在任何给定事件(点击、移动等)中位于哪个区域.
The goal
To come up with an algorithm which tells the client (game) which field the mouse is located in at any given event (click, movement etc).
免责声明
我确实想提一下，我自己已经想出了一个可行的解决方案，但是我 100% 肯定它可以用更好的方式编写(我的解决方案涉及很多嵌套的 if 语句和循环)，那就是我为什么要问这里.
Disclaimer
I do want to mention that I've already come up with a working solution myself, however I'm 100% certain it could be written in a better way (my solution involves a lot of nested if-statements and loops), and that's why I'm asking here.
这是我的解决方案的一个例子，我基本上找到了一个有角的正方形最近的 4 个已知位置，然后我根据 2 个最近的字段之间的最小正方形得到我的结果.有意义吗?
Here's an example of my solution where I basically find a square with corners in the nearest 4 known positions and then I get my result based on the smallest square between the 2 nearest fields. Does that make any sense?
问我是否遗漏了什么.
推荐答案
这是我的想法，
function posInGrid(x, y, length) {
xFromColCenter = x % length - length / 2;
yFromRowCenter = y % length - length / 2;
col = (x - xFromColCenter) / length;
row = (y - yFromRowCenter) / length;
if (yFromRowCenter < xFromColCenter) {
if (yFromRowCenter < (-xFromColCenter))--row;
else++col;
} else if (yFromRowCenter > xFromColCenter) {
if (yFromRowCenter < (-xFromColCenter))--col;
else++row;
}
return "Col:"+col+", Row:"+row+", xFC:"+xFromColCenter+", yFC:"+yFromRowCenter;
}
X 和 Y 是图像中的坐标，长度是网格的间距.
X and Y are the coords in the image, and length is the spacing of the grid.
现在它返回一个字符串，只是为了测试..结果应该是行和列，这些是我选择的坐标:你的瓷砖1有坐标(1,0)瓷砖2是(3,0)，瓷砖10 是 (0,1)，图块 11 是 (2,1).您可以将我的坐标转换为一行或两行的编号图块.
Right now it returns a string, just for testing.. result should be row and col, and those are the coordinates I chose: your tile 1 has coords (1,0) tile 2 is(3,0), tile 10 is (0,1), tile 11 is (2,1). You could convert my coordinates to your numbered tiles in a line or two.
还有一个用于测试的 JSFiddle http://jsfiddle.net/NHV3y/
And a JSFiddle for testing http://jsfiddle.net/NHV3y/
干杯.
更改了返回语句，保留了一些我用于调试的变量.
changed the return statement, had some variables I used for debugging left in.
这篇关于二维等距网格中的点击检测?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
