Perpectiva isométrica

Usualmente la perspectiva isometrica se caracteriza por estar trazada a 30 grados. Sin embargo, es posible encontrar juego que emplean una inclinación distinta como por ejemplo 26.6 grados, veamos el porque de este ángulo:

tan(26.6) = 0.5 = 1 / 2

Es muy fácil crear tiles con dimensiones “ancho = alto * 2″ y esto a su vez facilita algunos cálculos internos del motor que manipula el mapa.

En este documento los mapas isométricos poseerán la inclinación de 26.6 pero se pueden emplear cualquier otro tipo de inclinación.

Creación de tiles isométricos

Los tiles isométricos como indica la siguiente figura no ocupan el 100% efectivo del rectángulo en el cual están contenidos.

Figura 3. Un tile isométrico

Como mencionamos anteriormente es usual encontrar que “tw = 2 * th” pero esto no es mandatorio.

Por otro lado, cabe destacar que sólo la parte superior no visible del tile debe ser transparente, el área inferior no visible puede no ser transparente (sólo deberá disimularse en los bordes inferiores e izquierdos del mapa con algún tipo de máscara, utilizando el mismo color que el fondo o no dejando que el jugador se aproxime a los bordes del mapa).

Figura 4. Áreas no visibles del bloque

¿Por qué evitar transparencias?

Es conveniente evitar áreas transparentes pues suelen ser más costosas en tiempo de renderización. Mientras menos transparencias utilicemos, mayor cantidad de cuadros por segundo podremos obtener.

Definición de un mapa isométrico

Un mapa isométrico podría ser definido como cualquier mapa 2d tradicional, es decir, por medio de una matriz de dos dimensiones. Veamos cual es la equivalencia entre un mapa 2d y un mapa isométrico:

Figura 5. Un mapa 2d y su equivalente isométrico

La matriz que describe el mapa puede ser la misma para los dos mapas de la figura 2. Sólo cambiarán cálculos internos que realizará el motor de mapas isométricos.

Dibujado de un mapa isométrico

En un mapa clásico el código de dibujado se encuentra dentro de dos bucles anidados por medio de los cuales se recorren filas y columnas de la estructura de datos que describe el mapa.


hacer( desde row = 0, mientras row < ROWS, row = row + 1)
hacer( desde col = 0, mientras col < COLS, col = col + 1)
{
tile.x = col * tw
tile.y = row * th
dibujar tile en (x, y)
}


Los mapas isométricos también se describen de esta manera, pero el cálculo de la posición donde finalmente se ubica el tile no es tan directa. Ahora aparecen ciertas posiciones extra que se deben calcular para situar correctamente cada tile.

Figura 6. Centros de los tiles

La cruz roja marca el punto de ubicación del mapa dentro de la pantalla. Este punto poseerá las coordenadas (_x, _y).

En la implementación que analizaremos en (0, 0) se encontrará situado arriba a la izquierda. Y el eje Y es positivo hacia el extremo inferior de la pantalla.

Figura 7. Ubicación del punto (0, 0) en la pantalla

Por lo tanto, ahora nuestro pseudocódigo de dibujado será el siguiente:


hacer( desde row = 0, mientras row < ROWS, row = row + 1)
hacer( desde col = 0, mientras col < COLS, col = col + 1)
{
xy = GetPlaneWorldCoordsFromRowCol(row, col);
tile.x = Viewport.ToScreenX(xy[0]);
tile.y = Viewport.ToScreenX(xy[1]);
dibujar tile en (x, y)
}


COLS: Cantidad total de columnas que posee el mapa.
ROWS: Cantidad total de filas que posee el mapa.

Como se puede apreciar en el listado anterior el algoritmo de dibujado se basa en tomar la fila y la columna iterada conviertiéndola a coordendadas de mundo plano, luego estas coordenadas se convierten a coordenadas de pantalla y se posiciona el tile.

Pages: 1 2 3 4

Comentarios (1)