我正在開發等距游戲引擎,并且已經創建了像素完美點擊檢測算法。訪問該項目,并注意單擊檢測能夠檢測到瓷磚的哪個邊緣被單擊。它還會檢查y-index以單擊最前面的圖塊。我當前算法的解釋:等距網格由100 * 65px的圖塊圖像組成。 TileW=100, TileL=50, tileH=15該地圖由三維數組表示map[z][y][x]。瓦片中心點(x,y)的計算方式如下://x, y, z are the position of the tileif(y%2===0) { x-=-0.5; } //To accommodate the offset found in even rowsthis.centerX = (x*tileW) + (tileW/2);this.centerY = (y*tileL) - y*((tileL)/2) + ((tileL)/2) + (tileH/2) - (z*tileH);確定鼠標是否在圖塊上給定區域內的原型函數:Tile.prototype.allContainsMouse = function() { var dx = Math.abs(mouse.mapX-this.centerX), dy = Math.abs(mouse.mapY-this.centerY); if(dx>(tileW/2)) {return false;} //Refer to image return (dx/(tileW*0.5) + (dy/(tileL*0.5)) < (1+tileHLRatio));}Tile.prototype.allContainsMouse()如果鼠標在綠色內,則返回true。通過檢查dx>瓦片寬度的一半來裁切出紅色區域Tile.prototype.topContainsMouse = function() { var topFaceCenterY = this.centerY - (tileH/2); var dx = Math.abs(mouse.mapX-this.centerX), dy = Math.abs(mouse.mapY-topFaceCenterY); return ((dx/(tileW*0.5) + dy/(tileL*0.5) <= 1));};Tile.prototype.leftContainsMouse = function() { var dx = mouse.mapX-this.centerX; if(dx<0) { return true; } else { return false; }};(如果鼠標離開中心點)Tile.prototype.rightContainsMouse = function() { var dx = mouse.mapX-this.centerX; if(dx>0) { return true; } else { return false; }};(如果鼠標在中心點的右邊)將所有方法合為一體:遍歷整個3d地圖[z] [y] [x]數組如果allContainsMouse()返回true,則map [z] [y] [x]是我們的鼠標所在的圖塊。將此圖塊添加到數組tilesUnderneathMouse數組。遍歷tilesUnderneathMouse數組,然后選擇最高的圖塊y。這是最前期的圖塊。if(allContainsMouse && !topContainsMouse)if(allContainsMouse && !topContainsMouse && leftContainsMouse)(類似的概念適用于權利)最后,我的問題:#1您將如何做到這一點,以使其更有效(不遍歷所有圖塊)(接受偽代碼)#2如果您無法回答#1,您有什么建議來提高點擊檢測的效率(已經考慮了大塊加載)我想到的是:我最初試圖通過不使用圖塊中心點來解決此問題,而是將mouse(x,y)位置直接轉換為圖塊x,y。在我看來,這是最困難的代碼,但也是最有效的解決方案。在正方形網格上,將(x,y)位置轉換為網格上的正方形非常容易。但是,在交錯的列網格中,您需要處理偏移量。我嘗試使用帶有x或y值的函數來計算偏移量,并返回結果偏移量y或x。arccos(cosx)的Zig-zag圖解決了該問題。使用這種方法檢查鼠標是否在瓷磚內是很困難的,我無法弄清楚。我正在檢查mouse(x,y)是否在y=mx+b取決于tileX,tileY近似值(近似正方形網格)的線下。如果您到這里,謝謝!
改善交錯列等距網格上單擊檢測的性能
catspeake
2019-10-21 14:48:07