.NET Tutorial 56. XNA y gráficos isométricos

En el Tutorial 14 vimos como simular un entorno isométrico usando GDI+

El GDI+ está "bien" para determinados casos muy puntuales. Sin embargo se queda algo "corto de potencia" en la mayoría de los casos. Aprovechando que XNA4 ya es totalmente compatible con VB.NET en la versión 2010 vamos a ver como hacer lo mismo pero usando toda la potencia de XNA

EL principal "problema" tal y como vimos en el Tutorial 14 que tiene la representación isométrica es la ordenación de los gráficos. (Z-order) En el Tutorial 14 se ordenaban los gráficos en cada ciclo para representarlos de forma correcta con un simple bucle for

En XNA vamos a aprovechar una característica del spritebatch que hace uso del concepto "capa" (layer). De esta forma, no tendremos que tener ningún algoritmo de ordenación que reordene, valga la redundacia, todos los gráficos antes de dibujarlos con un simple bucle for

Si creamos un nuevo proyecto de XNA, cargamos dos Texture2D y en el método Draw hacemos lo siguiente:

spriteBatch.Begin()

spriteBatch.Draw(bloqueAmarillo,
  New Vector2(360, 200),
  Nothing,
  Color.White,
  0.0F,
  Vector2.Zero,
  1.0F,
  SpriteEffects.None,
  1.0F)

spriteBatch.Draw(bloqueVerde,
  New Vector2(400, 208),
  Nothing,
  Color.White,
  0.0F,
  Vector2.Zero,
  1.0F,
  SpriteEffects.None,
  1.0F)

spriteBatch.End()

El resultado será este:

Primero se dibuja el bloque amarillo y luego el bloque verde, tal y como puede verse en el código.

Sin embargo, realmente el bloque amarillo está "por delante" del bloque verde, por lo que en teoría debería dibujarse primero el bloque verde y luego el bloque amarillo, de tal forma que el bloque amarillo, al dibujarse al final, "oculta" parte del bloque verde:

Bien, ¿Y esto como se consigue?

Pues indicando el SpriteSortMode en el Begin del spriteBatch y jugando con las capas.

En este código:

spriteBatch.Draw(bloqueAmarillo,
  New Vector2(360, 200),
  Nothing,
  Color.White,
  0.0F,
  Vector2.Zero,
  1.0F,
  SpriteEffects.None,
  1.0F)

El útlimo argumento indica el nivel de la capa. Los valores posibles van desde 0.0F a 1.0F

Dependiendo del SpriteSortMode el comportamiento es distinto:

En el caso FrontToBack

spriteBatch.Begin(SpriteSortMode.FrontToBack, BlendState.AlphaBlend) 

Se dibujan primero las capas con valores más bajos y luego las capas con valores más altos:

FrontToBack —> 0 (se dibuja primero) >>>>>> 1 (se dibuja último)

En el caso de BackToFront

spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend) 

Se dibujan primero las capas con valores más altos y luego las capas con valores más bajos:

BackToFront —> 1 (se dibuja primero) >>>>>> 0 (se dibuja último)

 

Ejemplo:

spriteBatch.Begin(SpriteSortMode.FrontToBack, BlendState.AlphaBlend) 

spriteBatch.Draw(bloqueAmarillo,
  New Vector2(360, 200),
  Nothing,
  Color.White,
  0.0F,
  Vector2.Zero,
  1.0F,
  SpriteEffects.None,
  1.0F)

spriteBatch.Draw(bloqueVerde,
 New Vector2(400, 208),
  Nothing,
  Color.White,
  0.0F,
  Vector2.Zero,
  1.0F,
  SpriteEffects.None,
  0.5F)

spriteBatch.End()

En el caso anterior el resultado es este:

Da igual que en el código tengamos primero el spriteBatch.Draw del bloque amarillo y después el spriteBatch.Draw del bloque verde, al usar el SpriteSortMode FrontToBack se dibujarán primero los sprites con un valor de layer menor.

Como vemos, el valor del layer del bloque verde es 0.5F, mientras que el del bloque amarillo es 1.0F. Por lo tanto, primero se dibuja el bloque verde y luego el bloque amarillo, de tal forma que el bloque amarillo "oculta" al bloque verde.

Puede parecer complicado, pero jugar con este parámetro da mucho juego y a nosotros nos viene de perlas para poder usar la representación isométrica.

Bien, el resultado del proyecto es como este: 

(Nota sobre la grabación: La grabación n o va suave debido a que el CamStudio me limita los fotogramas, pero si pruebas el código verás que se mueve a 60 fps)

 

 Tags: XNA for VB.NET, XNA Isometric, XNA Z-order, ZOrder, Z-Buffer

 

Saludos.
mov eax,ollydbg; Int 13h  

Descargar proyecto .NET Tutorial 56
(170 KB. Visual Studio 2010  / XNA 4)
 


Ollydbg ProSignature