En un mundo plano, en 2D, hacer coincidir los puntos del mundo virtual con los puntos de la pantalla, pasa por un simple cambio de coordenadas. Debemos cambiar el origen y también el signo o sentido de los desplazamientos en el eje y. Sin embargo, las direcciones seguirán siendo las mismas: horizontal y vertical. Por tanto, la representación de algo 2D en pantalla es sencillo.

En los sistemas de coordenadas cartesianas podemos representar puntos del plano mediante el eje horizontal x, que crece hacia la derecha y decrece hacia la izquierda, y el eje y, que crece hacia arriba y decrece hacia abajo. Este sistema permite representar también con coordenadas negativas. Por otro lado, en la pantalla del ordenador, los puntos vienen representados por coordenadas siempre positivas, que en x crecen en horizontal hacia la derecha, como en las cartesianas, pero en vertical, en y, crecen hacia abajo, al contrario que en las cartesianas.

Si dibujamos un mosaico cuadrado, donde cada tesela tenga un lado de, digamos, 64 píxeles, las coordenadas de pantalla se pueden calcular de manera fácil a partir de las coordenadas de las teselas.

Por ejemplo, para saber dónde debe iniciarse el dibujo de la tesela (3, 2), basta multiplicar cada valor, por el ancho de la textura, –en nuestro ejemplo 64–, de manera que debemos colocar la imagen a partir del punto (192, 128) o expresado como:

\[x_p = x_t \times w_t\] \[y_p = y_t \times h_t\]

donde:

• \(x_p\) es la coordenada x en pantalla.
• \(x_t\) es la coordenada x de la tesela.
• \(y_p\) es la coordenada y en pantalla.
• \(y_t\) es la coordenada y de la tesela.
• \(w_t\) es el ancho de la tesela, y
• \(h_t\) es el alto de la tesela.

Un mosaico de este tipo tiene la utilidad de servir de fondo para dibujar encima de él otras texturas, sprites o animaciones. Para ello es bastante habitual que necesitemos conocer otras posiciones o desplazamientos en la pantalla, una de las más frecuentes es su punto medio. Si queremos saber cuál es el punto medio de una tesela, el cálculo será el siguiente:

\[x_p = x_t \cdot w_t + \frac{w_t}{2}\] \[y_p = y_t \cdot h_t + \frac{h_t}{2}\]

donde:

• \(x_p\) es la coordenada x en pantalla.
• \(x_t\) es la coordenada x de la tesela.
• \(y_p\) es la coordenada y en pantalla.
• \(y_t\) es la coordenada y de la tesela.
• \(w_t\) es el ancho de la tesela, y
• \(h_t\) es el alto de la tesela.

El orden natural de dibujo es de izquierda a derecha y de arriba hacia abajo. Por lo que podemos crear una matriz de teselas con la información de qué textura debo cargar en cada una de ellas y con un bucle anidado para x dentro de un bucle para y, se dibujarán todas en el orden correcto.

Por ejemplo, utilizando löve2D podemos hacer una prueba rápida. Dejo también el código para que lo podáis descargar de la página, lo encontraréis el enlace más abajo al final del apartado de Otras consideraciones.

Todos esos cálculos sencillos son algo más complejos cuando se trata de echar una mirada a cómo resulta la misma matriz desde la perspectiva isométrica. Veamos primero un esquema y haré consideraciones a partir de esta gráfica:

El punto (0, 0) ya no se encuentra en la esquina superior izquierda, como en el modelo anterior, sino arriba, ni siquiera en el centro, sino desplazada hacia la izquierda. ¿Cuánto? la mitad del ancho de la tesela multiplicado por el número de filas menos uno. Por expresarlo, matemáticamente:

\[ x_p = (filas - 1) \times \frac{w_t}{2} \]

donde:

• \(x_p\) es la coordenada x en pantalla
• \(filas\) es el número de filas del mosaico
• \(w_t\) es el ancho de nuestra tesela.

Es decir, la posición horizontal de una tesela, también depende del eje y del mosaico y de la mitad del ancho de cada tesela ( \(w_t/2\) ). Expresado de otra manera: según se avanza la fila, para una misma columna, la coordenada x en pantalla disminuye medio ancho de tesela por cada fila.

Para dibujar el resto, a partir de ese punto inicial, si nos fijamos en el esquema de la figura 10, podemos comprobar que la siguiente tesela, la (1,0) se encuentra situada con un desplazamiento de medio ancho de la textura hacia la derecha y medio alto de la textura hacia abajo. La posición general en x será:

\[ x_p = x_{inicio} + \frac{w_t}{2} \] \[ y_p = y_{inicio} + \frac{h_t}{2} \]

donde:

• \(x_p\) es la coordenada x en pantalla
• \(y_p\) es la coordenada y en pantalla
• \(x_{inicio}\) es la coordenada x donde empezamos a dibujar
• \(y_{inicio}\) es la coordenada y donde comenzamos a dibujar
• \(w_t\) es el ancho de nuestra tesela y
• \(h_t\) es el alto de la tesela.

Para el punto (2,0) nos encontramos que la fórmula quedaría:

\[ x_p = x_{inicio} + 2 \times \frac{w_t}{2} \] \[ y_p = y_{inicio} + 2 \times \frac{h_t}{2} \]

y para el punto (3, 0) será:

\[ x_p = x_{inicio} + 3 \times \frac{w_t}{2} \] \[ y_p = y_{inicio} + 3 \times \frac{h_t}{2} \]

Podríamos concluir que para la primera fila, cuya coordenada en el mosaico es 0, la fórmula general sería:

\[ x_p = x_{inicio} + x \times \frac{w_t}{2} \] \[ y_p = y_{inicio} + x \times \frac{h_t}{2} \]

donde:

• \(x_p\) es la coordenada x en pantalla
• \(y_p\) es la coordenada y en pantalla
• \(x_{inicio}\) es la coordenada x donde empezamos a dibujar
• \(y_{inicio}\) es la coordenada y donde comenzamos a dibujar
• \(x\) es el valor de la columna en el mosaico
• \(w_t\) es el ancho de nuestra tesela y

En la fórmula anterior falta algo, ya habíamos visto que para la primera columna, los valores de x disminuían. Si nos centramos en las coordenadas de la primera tesela de la siguiente fila, el cálculo será distinto. Para empezar, el valor de \(x_p\) disminuye, según observamos en la Figura 10. Concretamente, las coordenadas de la tesela (0,1) son:

\[ x_p = x_{inicio} - \frac{w_t}{2} \] \[ y_p = y_{inicio} + \frac{h_t}{2} \]

donde:

• \(x_p\) es la coordenada x en pantalla
• \(y_p\) es la coordenada y en pantalla
• \(x_{inicio}\) es la coordenada x donde empezamos a dibujar
• \(y_{inicio}\) es la coordenada y donde comenzamos a dibujar
• \(w_t\) es el ancho de nuestra tesela y
• \(h_t\) es el alto de la tesela.

Como ya mostré antes, las posiciones disminuirán en su valor x según aumenten las filas. La fórmula completa será:

\[ x_p = x_{inicio} + x\left(\frac{w_t}{2}\right) - y\left(\frac{w_t}{2}\right) \] \[ y_p = y_{inicio} + x\left(\frac{h_t}{2}\right) + y\left(\frac{h_t}{2}\right) \]

Si sacamos factor común para ahorrarnos una operación de multiplicación:

\[ x_p = x_{inicio} + (x - y) \frac{w_t}{2} \] \[ y_p = y_{inicio} + (x + y) \frac{h_t}{2} \]

Modificando ligeramente el código que ya tenemos hecho, podemos convertir el dibujo del mosaico plano en su representación isométrica². Concretamente, para ahorrar cálculos, se han declarado las variables globales Wt2 que representa la mitad del ancho de la tesela y Ht2 que representa la mitad del alto de la tesela. Además se declaran también las variables x_inicio e y_inicio. En el mundo plano no hacía falta un punto de inicio, porque se asume que era (0,0). Por supuesto, también cambian las imágenes de las teselas:

local x_inicio = Wt2 * (ANCHO_MALLA - 1)
local y_inicio = 0

Por supuesto, también se ha modificado el código para dibujar una tesela:

-- Dibujar la tesela
function dibuja_tesela(imagen, x, y)
   local xp = x_inicio + (x - y) * Wt2
   local yp = y_inicio + (x + y) * Ht2
   love.graphics.draw(IMAGENES[imagen], xp, yp)
end

Un pantallazo confirma que todo marcha según lo esperado: