Share
Si estás pirateando un juego para un Jam o # 1GAM, probablemente no estés demasiado preocupado por hacerlo "de la manera correcta". En este artículo, compartiré algunos consejos para dibujar y codificar niveles pseudo-isométricos de forma rápida y sencilla..
Técnicamente, "isométrico" se refiere a una proyección donde el ángulo entre los ejes x, yyz (en las dimensiones de la pantalla) es de 120 °. Y el apropiado La forma de convertir entre coordenadas de pantalla y coordenadas isométricas es mediante el uso de una matriz de transformación..
¡Pero olvida eso! En este Consejo rápido, vamos a cortar algunas esquinas y hacer un poco de trampa.
Mira esto. Podemos convertir una cuadrícula normal de 90 ° en algo que se vea lo suficientemente cerca de una cuadrícula isométrica con dos pasos simples.
Comience con una cuadrícula como esta (llamaré a esto una cuadrícula cartesiana):
Girarlo 45 °:
Aplastarlo 50% verticalmente:
¡Hecho! Esto debe ser referido correctamente como dimetric en lugar de isométrico, como se explica en este maravilloso artículo, pero servirá para la mayoría de los propósitos.
Esa cuadrícula no va a hacer mucho de un juego por sí solo. Tal vez quiera agregar piezas de ajedrez, tal vez quiera agregar monstruos: sea lo que sea lo que agregue, necesitará saber dónde colocarlo.
Aquí está el objeto que usaré (de The Noun Project):
No necesitamos girarlo ni aplastarlo para que encaje en la rejilla; simplemente bájalo apropiadamente
Como puede ver, la base (los pies del hombre, en este caso) debe ir en el centro del espacio de la cuadrícula. Así que tenemos que averiguar dónde está esto.
Podríamos usar trigonometría o una matriz de transformación o algo así, pero hay un álgebra simple que hará el trabajo..
Mida el ancho diagonal del azulejo y la media altura (en las dimensiones de la pantalla):
Esto se acerca. var tileHalfWidth = 17.5; var tileHalfHeight = 8.75;
Calcule los índices de cuadrícula del espacio que le interesa:
Como puedes ver, uso el centro de la cuadrícula como origen. El chico esta parado en el espacio (4, 2).
Convierta las coordenadas del espacio de la cuadrícula en coordenadas de pantalla, usando esta fórmula:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
En nuestro caso, esto le dará coordenadas de pantalla de (35, 52.5).
Esta es en realidad la esquina "superior" del espacio; para obtener el centro del espacio, necesitarás agregar azulejo media altura al resultado para pantallaY.
Tendrá que añadir un desplazamiento. Solo determine manualmente las coordenadas del espacio de la cuadrícula de origen (centro), en las coordenadas de la pantalla, y agréguelos a (screenX, screenY).
Su código de conversión final se ve así:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Supongamos que queremos generar un objeto en cualquier espacio de cuadrícula en el que el jugador haga clic. ¿Cómo podemos averiguar en qué espacio se hizo clic??
Con un poco de álgebra, podemos reorganizar las ecuaciones anteriores para obtener esto:
// Primero, ajuste la compensación: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY; // Ahora, recupere el espacio de la cuadrícula: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Luego simplemente corte todo lo que haya pasado los puntos decimales para averiguar qué espacio de cuadrícula es.
Una pequeña cosa para recordar: si estás haciendo blitting, ¡asegúrate de renderizar los objetos en la parte de atrás primero! De lo contrario, podrías terminar con algunos efectos superpuestos extraños:
Es simple hacer esto; solo necesita ordenar aquellos con el más bajo (es decir, el más alto) pantallaY primero los valores:
Tenga en cuenta también que no es necesario cambiar el tamaño de los objetos en función de su distancia a la suya; Con una vista pseudoisométrica como esta, los objetos que están más lejos no parecen más pequeños que los que están más cerca de usted..
Accentsconagua