Si bien el método descrito por sws y MarkR también es el que prefiero, me gustaría presentar un enfoque alternativo.
Una opción complicada para crear una apariencia isométrica con un esfuerzo mínimo es usar mosaicos ortogonales y usar context.transform para establecer una matriz de proyección que haga que el mapa se vea isométrico (o una combinación de context.rotate y context.scale cuando no lo hagas) No sé cómo funcionan las matrices de proyección).
Consulte la especificación de los métodos de transformación del lienzo para obtener más detalles.
Imagen de mosaico:
Código de dibujo:
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 de la aplicación de la matriz:
Mismo código con la misma imagen de mosaico después de aplicar esta matriz de transformación:
ctx.transform( 1, 0.5,
-1, 0.5,
160, 0 );
Con la red de trazos eliminar de la imagen de azulejos y baldosas cambió el desplazamiento en el código de dibujo de img.width - 1y img.height - 1para deshacerse de los huecos causados por la transformación. De repente, el azulejo se ve la mitad de feo:
El principal inconveniente de este método es que cuando diseñas tus mosaicos en un editor gráfico, realmente no serán lo que ves es lo que obtienes. También encontrará problemas cuando desee dibujar cualquier objeto que no esté en el piso pero que esté de pie. Para estos, puede desactivar la matriz de transformación antes de dibujarlos, pero luego tendrá que calcular la posición usted mismo. Puede usar estas fórmulas para eso:
var xScreen = xWorld * 1 + yWorld * -1 + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;
(observe cómo los números de la matriz de transformación reaparecen en estas fórmulas; usted mismo está haciendo la multiplicación de la matriz aquí).
Entonces, ¿por qué debería hacer esto?
Este método es bueno cuando usted:
- no tienes experiencia en el diseño de mosaicos isométricos, pero tienes otros ortogonales
- no quiero pasar mucho tiempo desarrollando un motor gráfico isométrico, que es algo más difícil que uno ortogonal.
Otra característica interesante es que cuando conoce el cálculo de la matriz, puede modificar la matriz de proyección entre cuadros para hacer zoom, inclinar y rotar el mapa en tiempo real para obtener algunos efectos fake-3d (intente hacer ESO con mosaicos isométricos) .
Pero cuando sabe cómo manejar mosaicos isométricos, tanto artística como técnicamente, y no necesita ningún truco de perspectiva falsa, prefiero sugerirle que elija mosaicos con forma de diamante con transparencia.
