Encontré un enfoque simple y alternativo que usa la misma lógica que un tablero de ajedrez regular. Crea un efecto de ajuste a la cuadrícula con puntos en el centro de cada mosaico y en cada vértice (al crear una cuadrícula más ajustada e ignorar los puntos alternos).
Este enfoque funciona bien para juegos como Catan, donde los jugadores interactúan con fichas y vértices, pero no es adecuado para juegos donde los jugadores solo interactúan con fichas, ya que devuelve qué punto central o vértice a las coordenadas están más cerca, en lugar de qué ficha hexagonal Las coordenadas están dentro.
La geometría
Si coloca puntos en una cuadrícula con columnas que son un cuarto del ancho de un mosaico y filas que son la mitad de la altura de un mosaico, obtendrá este patrón:
Si luego modifica el código para omitir cada segundo punto en un patrón de tablero de ajedrez (omitir if column % 2 + row % 2 == 1), terminará con este patrón:
Implementación
Con esa geometría en mente, puede crear una matriz 2D (tal como lo haría con una cuadrícula cuadrada), almacenando las x, ycoordenadas para cada punto en la cuadrícula (desde el primer diagrama), algo como esto:
points = []
for x in numberOfColumns
points.push([])
for y in numberOfRows
points[x].push({x: x * widthOfColumn, y: y * heightOfRow})
Nota: Como es normal, cuando crea una cuadrícula alrededor de los puntos (en lugar de colocar puntos en los puntos mismos), debe compensar el origen (restando la mitad del ancho de una columna xy la mitad de la altura de una fila y).
Ahora que tiene su matriz 2D ( points) inicializada, puede encontrar el punto más cercano al mouse tal como lo haría en una cuadrícula cuadrada, solo teniendo que ignorar cualquier otro punto para producir el patrón en el segundo diagrama:
column, row = floor(mouse.x / columnWidth), floor(mouse.y / rowHeight)
point = null if column % 2 + row % 2 != 1 else points[column][row]
Eso funcionará, pero las coordenadas se están redondeando al punto más cercano (o sin punto) en función del rectángulo invisible dentro del puntero. Realmente desea una zona circular alrededor del punto (por lo que el rango de ajuste es igual en todas las direcciones). Ahora que sabe qué punto verificar, puede encontrar fácilmente la distancia (usando el Teorema de Pitágoras). El círculo implícito aún tendría que caber dentro del rectángulo delimitador original, limitando su diámetro máximo al ancho de una columna (un cuarto del ancho de un mosaico), pero aún es lo suficientemente grande como para funcionar bien en la práctica.
