.NET Tutorial 14. Gráficos 2.5D

En el mundillo videojuegil se conoce como gráficos 2.5D a la proyección isométrica. En esta entrega realizaremos lo siguiente:

Existen grandes exponentes en este género. Quizás el más popular sea Diablo. Aunque existen muchísimos y muy antiguos: La abadía del crimen, Knight Lore, Head Over Heels, Alien 8, Ultima Online, etc, etc.

Quien no se acuerda el mítico Head Over Heels:


(Versión para Amiga)

O no el menos mítico Abadía del Crimen:


(Remake Abadía del Crimen en Informativos Tele5)

O el mítico Knight Lore:


(Knight Lore en su versión para Spectrum 48K)

Hay que recordar que el Knight Lore es del siglo pasado, sí, concretamente del 1984 y para su época supuso un antes y un después en la historia de los videojuegos. Algo así como lo que ocurriría con la aparición de DOOM, casi 10 años después, que también supuso otro hito en la programación de los videojuegos.

Cito de la wikipedia:

El entorno de juego, que utiliza perspectiva isométrica permite no sólo moverse en tres dimensiones sino también interaccionar con objetos mediante una física sencilla pero efectiva. El motor utilizado llevó el nombre de Filmation y se convertiría en la marca de la casa.

Esta técnica Filmation era impresionante para la época ya que introdujo grandes innovaciones a todos los niveles: marcó un antes y después de la historia de los juegos, siendo aún hoy en día una referencia a tener en cuenta. Los autores, que fueron elevados instantáneamente a la categoría de genios (fama alimentada por su notoria reticencia a ser entrevistados o fotografiados) eran conscientes de la revolución que iba a suponer el lanzamiento de este juego y de hecho retrasaron su salida hasta después del Underwurlde, a pesar de que Knight Lore había sido desarrollado con anterioridad.

Con esta técnica de dibujado se intenta dar una "pseudo" sensación de tridimensionalidad, ya que el juego no deja de ser un juego 2D pero "visto" de una forma en "perspectiva"

En nuestro caso, tomaremos como base el siguiente gráfico:

Se supone que dicho gráfico es de 64 x 32 pixels.

A priori, el orden para dibujar estos gráficos sería el siguiente:

En los juego isométricos se introduce una nueva coordenada "ficticia" (recordad, que sigue siendo 2D): La coordenada Z o también llamada produndidad.

En un juego 3D la coordenada Z ya no es ficticia, sino real, donde tendremos las coordenadas X, Y y Z

En un típico juego 2D solo tendremos la coordenada X e Y.

En la siguiente figura vemos la sensación de "profundidad" que conseguimos con la perspectiva isométrica:

Vemos claramente que el bloque amarillo está "detrás" de los bloques verdes.
Si comparamos la imagen anterior con el orden de dibujado que hemos visto antes, podríamos llegar a la erronea conclusión que el orden de dibujado es correcto.

Todo funcióna "bien" mientras no tengamos bloques que están "en mitad de dos o más bloques adyacentes":

o también:

Como véis, si utilizamos el orden de dibujado que habiamos previsto, existen determinadas posiciones donde se "solapan" varios bloques.

El orden correcto de dibujado para impedir este solapamiento es el siguiente:

De esta forma se consigue el efecto deseado.
Para ello, cada uno de los bloques de nuestro juego dispone de una propiedad, a la que llamamos Depth (o en castellano: Profundidad).

Como estamos en un entorno que no deja de ser un entorno 2D, nuestros gráficos solo tienen 2 dimensiones: X e Y o tambien, Filas y Columnas.

De tal forma, que para cada Fila, Columna se calcula su "profundidad" con la siguiente fórmula:

Profundidad = (51 * (Fila + 1) + 50 * (Columna + 1)) * 4 

Cada vez que el personaje se mueve se se calcula su profundiad en función de la (fila,columna) que ocupa asi cómo la profundidad del bloque que está justo a la derecha y abajo:

La profundidad de dicho bloque (del que está marcado con una flecha) siempre será: (Profundidad del jugador – 1). De esta forma, dicho bloque se dibujará antes que el jugador y no se producirá el solapamiento.

Por último, se ordenan todos los bloques y se dibujan primero los que tienen una profundidad menor.

En el ejemplo que os muestro hay muchas cosas por pulir, pero eso ya lo iremos viendo en sucesivas entregas. De todos modos, imagidad lo que se podría llegar a conseguir con unos gráficos un "poco currados".

 

Saludos.
mov eax,ollydbg; Int 13h 

 

Descargar proyecto .NET Tutorial 14
(55 KB. Visual Studio 2008)