Embora o método descrito por sws e MarkR também seja o que eu prefiro, gostaria de apresentar uma abordagem alternativa.
Uma opção imprudente para criar uma aparência isométrica com o mínimo esforço é realmente usar blocos ortogonais e context.transform para definir uma matriz de projeção que faz o mapa parecer isométrico (ou uma combinação de context.rotate e context.scale quando você não ' não sei como funcionam as matrizes de projeção).
Consulte a especificação para métodos de transformação de tela para obter detalhes.
Imagem lado a lado:
Código de desenho:
for (var x = 0; x < 5; x++) {
for (var y = 0; y < 5; y++) {
ctx.drawImage(img, x * img.width, y * img.height);
}
}
Resultado antes da aplicação da matriz:
O mesmo código com a mesma imagem de bloco após a aplicação desta matriz de transformação:
ctx.transform( 1, 0.5,
-1, 0.5,
160, 0 );
Com a grade tracejada removida da imagem do bloco e alterando o deslocamento do bloco no código do desenho para img.width - 1e img.height - 1para eliminar as lacunas causadas pela transformação. De repente, o ladrilho parece meio feio:
A principal desvantagem desse método é que, quando você cria seus blocos em um editor gráfico, eles não serão realmente o que você vê. Você também encontrará problemas quando quiser desenhar objetos que não estejam no chão, mas que estejam em pé. Para isso, você pode desativar a matriz de transformação antes de desenhá-la, mas precisará calcular a posição. Você pode usar estas fórmulas para isso:
var xScreen = xWorld * 1 + yWorld * -1 + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;
(observe como os números da matriz de transformação reaparecem nessas fórmulas - você está fazendo a multiplicação de matrizes aqui).
Então, por que eu deveria fazer isso?
Este método é bom quando você:
- você não tem experiência em projetar blocos isométricos, mas você tem ortogonais
- não queira gastar muito tempo desenvolvendo um mecanismo gráfico isométrico, o que é um pouco mais difícil que o ortogonal.
Outra característica interessante é que, quando você conhece o cálculo da matriz, é possível modificar a matriz de projeção entre os quadros para aumentar o zoom, inclinar e girar o mapa em tempo real para obter alguns bons efeitos 3D falsos (tente fazer ISSO com ladrilhos isométricos) .
Mas quando você sabe como lidar com ladrilhos isométricos, tanto artística quanto tecnicamente, e não precisa de nenhum truque de perspectiva falsa, prefiro sugerir que você escolha ladrilhos em forma de diamante com transparência.
