Estou trabalhando em um jogo baseado em grade isométrica e estou tendo um problema ao tentar vincular um clique do mouse do usuário a um bloco. Consegui dividir o problema em duas partes:
- Encontrar um retângulo que circunda um bloco (o que eu pude fazer)
- Descobrir a partir do retângulo em que o clique foi marcado (me deixou perplexo)
Aqui está um exemplo de um retângulo com azulejos por dentro:
O retângulo tem 70px de comprimento e 30px de altura, portanto, se eu usar uma entrada de digamos 30x (superior) / 20y (esquerda), como eu determinaria em qual bloco ele caiu?
Respostas:
Para cada passo que você fizer na direção x, você moverá 35px para a esquerda e -15px até a tela;
Para cada passo que você fizer na direção y, você moverá -35px para a esquerda e -15px até a tela;
Isso significa que você pode converter facilmente o sistema de coordenadas do bloco em pixel:
(x, y) => (35 · x, -15 · x) + (-35 · y, -15 · y) = (35 · x - 35 · y, -15 · x - 15 · y) = ( Xpx, Ypx)
Você precisa resolver o problema inverso que conhece Xpx e Ypx e deseja conhecer x e y (na coordenada do bloco).
Xpx = 35 x - 35 y;
Ypx = -15 x - 15 y;
você pode resolver isso? deve ser:
x = 1/70 · Xpx - 1/30 · Ypx
y = -1 / 70 · Xpx - 1/30 · Ypx
Obviamente, você terá valores não inteiros no caso geral: assumir o teto de x e y fornecerá a coordenada de todo o bloco.
fonte