Estoy trabajando en un motor de juego isométrico y ya he creado un algoritmo para la detección de clics perfectos en píxeles. Visita elproyecto y observe que la detección de clics puede detectar en qué borde del mosaico se hizo clic. También se comprueba el índice y para hacer clic en el mosaico más adelantado.

Una explicación de mi algoritmo actual:

La cuadrícula isométrica está hecha de imágenes de mosaico que son 100 * 65px.TileW=100, TileL=50, tileH=15

El mapa está representado por una matriz tridimensional.map[z][y][x].

Puntos centrales del azulejo(x,y) se calculan así:

//x, y, z are the position of the tile

if(y%2===0) { x-=-0.5; }    //To accommodate the offset found in even rows
this.centerX = (x*tileW) + (tileW/2);
this.centerY = (y*tileL) - y*((tileL)/2) + ((tileL)/2) + (tileH/2) - (z*tileH);

Funciones de prototipo que determinan si el mouse está dentro de un área determinada en el mosaico:

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() devuelve verdadero si el mouse está dentro de verde. El área roja se recorta comprobando si dx> la mitad del ancho del mosaico

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; }
};

(Si el mouse queda a la izquierda del punto central)

Tile.prototype.rightContainsMouse = function() {
    var dx = mouse.mapX-this.centerX;
    if(dx>0) { return true; } else { return false; }
};

(Si el mouse está a la derecha del punto central)

Reuniendo todos los métodos para trabajar como uno solo:

Recorrer todo el mapa 3d [z] [y] [x] matrizSiallContainsMouse() devuelve verdadero, el mapa [z] [y] [x] es el mosaico en el que está nuestro mouse.Agregue este mosaico a la matriztilesUnderneathMouse formación.

RecorrertilesUnderneathMouse matriz y elija el mosaico con la mayory. Es el mosaico más adelantado.

if(allContainsMouse && !topContainsMouse)

if(allContainsMouse && !topContainsMouse && leftContainsMouse)

(Se aplica un concepto similar para el derecho)

Finalmente, mis preguntas:

# 1 ¿Cómo lograrías esto, de modo que sea más eficiente (no recorrer todos los mosaicos) (se acepta el código de pesudo)

# 2 Si no puede responder # 1, ¿qué sugerencias tiene para mejorar la eficiencia de mi detección de clics (ya se ha considerado la carga de fragmentos)

Lo que he pensado:

Originalmente traté de resolver este problema al no usar puntos centrales de mosaico, en lugar de convertir la posición del mouse (x, y) directamente en el mosaico x, y. En mi opinión, esta es la solución más difícil de codificar, pero más eficiente. En una cuadrícula cuadrada es muy fácil convertir una posición (x, y) a un cuadrado en la cuadrícula. Sin embargo, en una cuadrícula de columnas escalonadas, se trata de compensaciones. Traté de calcular los desplazamientos utilizando la función a que toma un valor x o y, y devuelve el desplazamiento resultante y, o x. El gráfico en zig-zag dearccos (cosx) resuelto eso.

Verificando si el mouse estaba dentro del mosaico, usar este método fue difícil y no pude resolverlo. Estaba comprobando si el mouse (x, y) estaba debajo de uny=mx+b línea que dependía de la aproximación tileX, tileY (una cuadrícula aproximada).

Si llegaste hasta aquí, ¡Gracias!