Razón Artificial

La ciencia y el arte de crear videojuegos

Crear tiles isométricos 2D con Blender

Escrito por adrigm el 20 de marzo de 2011 en Desarrollo Videojuegos, Recursos | 2 Comentarios.

Nota: este tutorial usa Blender 2.49 Los mismos principios se aplican a 2.5 Actualizaré este tutorial a la versión 2.5 cuando sea estable.

La escena por defecto en Blender se parece a esto, un cubo normal en perspectiva.

Cámara Ortográfica

Lo primero que queremos hacer es cambiar la cámara a ortográfica. Hacemos click derecho en la camara para seleccionarla, cambiar al panel de edición (F9) y haga clic en el botón “ortográfica”.

Nuestro cubo ahora se verá en la perspectiva correcta. En los juegos isomñetricos las líneas perpendiculares al plano de tierra deben ser paralelas entre sí. Dicho de otra manera, los objetos más lejanos en vista ortográfica no parecen más pequeños.

Ángulo de cámara isométrica

El siguiente paso es establecer el ángulo de cámara en el modo isométrico perfecto. En los videojuegos cuando decimos “isométrico” por lo general significa que el tamaño de los tiles es dos veces el ancho del alto (por ejemplo, 64×32). Con la cámara seleccionada “N” para abrir el menú de “Transform Properties” (Propiedades de transformación). Las opciones las dejamos de la siguiente manera: RotX = 60, RotY = 0, RotZ = 48. Y ya que estamos aquí vamos a poner la cámara en un lugar predecible: LocX = 5, LocY = -5, LocZ = 5.

Si se mide la cara superior de este cubo, se puede comprobar que el ancho en píxeles es exactamente el doble que la altura.

Tamaño de Render

Queremos adaptar el tamaño del render para que se adapte a nuestra salida deseada. Para manter sencillo este tutorial, vamos a remplazar el cubo por defecto por un plano predeterminaso. (Seleccionamos el cubo y lo eliminamos. Ass -> Mesh -> Plane para añadir el plano).

Vamos a cambiar el tamaño del render. Cambia al panel de escena(F10). Establecer SizeX = 64, SizeY = 32. Cambiamos también el formato de salida de JPG a PNG y el color de RGB a RGBA.

Ahora la imagen PNG tiene el tamaño correcto, pero el tile obviamente no.

Cámara LocZ y la escala del objetivo

Ahora hay que ajustar el LocZ de la cámara y la escala del objetivo hasta que el tile se ajuste a la imagen PNG.

Esta es la manera en la que lo hago: Cambio a la vista cámara (NumPad 0) Hasta la línea de puntos exterior es lo que va a ser nuestra imagen. Con esto como referencia. Camara LocZ esta en el menú “Transform Properties” (Seleccionar la cámara y pulsar N) y Lens Scale está en el “Editing Panel” (Encima de donde se elige la vista ortográfica).

En esta caso el me da salen los siguientes valores LocZ = 4.08 y la Escala del objetivo = 2.75. Te daras cuentas que las esquinas se salen de la zona del render, que se salga un poco ayuda acuando RGBA con AA esta activado. Los bordes de los tiles tendrán un valor Alpha que se vería sobre tiles adyacentes.

Sobremuestreo/Anti-Aliasing

La salida es un poco borrosa, pero es difícil de ver, vamos a aplicar una textura bonita al plano.

Definitivamente borrosa. Para los sprites pequeños de los tilesets queremos un filtro anti-aliasing diferente. En el panel de escena (F10), cambiar el filtro de Gauss (heavy blur) a CatRom o Mitch (CatRom muestra más detalles, pero es un poco ruidoso, me gusta para las texturas arenosas que uso en mi juego).

El resultado es mucho más nítido.

(Si desea aún más nítida, pruebe a desactivar MipMap e Interpol en la configuración de la textura de “Map Image”).

Sky a Key

Si aumentas la imagen resultante notarás un azul muy leve en el contorno de todo el tile. Esto se debe a que, por defecto, hacer un alpha-layer render (RGBA Mode) se mezcla el color del cielo en los píxeles con transparencias (0 < A < 1). Este azul se mostrará cuando se muestren tiles juntos. Tenemos que cambiar de "Sky" blending a "key" para mantener bien los bordes.

Iluminación

Por último, tenemos que tener una iluminación uniforme en el tile. Si se mira de cerca, el otro extremo del tile se ve más oscuro que el extremo mas cercano. Por defecto, las luces en Blender iluminan dependiendo de la distancia de la fuente de luz. Si cambia la fuente de luz a “Sun” la iluminación no disminuye con la distancia. Con un tipo de fuente de luz “Sun” se puede elegir el ángulo de la luz. Esta ángulo debe ser (generalmente) el mismo para todos los tiles del tileset y del juego. (En mi proyecto OSARE RPG uso RotX = 27, RotY = 25, RotZ = -12 que proyecta las sombras hacia atrás y a la derecha.

Ahora tiene una iluminación uniforme:

El tile en acción

Ahora vamos a cargar el tile en el editor de mapas libre Tiled.

Los tiles encajan correctamente y se ven claros. Por supuesto son repetitivos, por lo que querrás variedad de tiles.

Pero esto solo es la base, guarde este archivo y utilícelo como base para hacer otros. (Descargar fichero .blend).

Tiles con altura

Cuando llegue el momento de añadir tiles con altura ajuste el tamaño del render, el LocZ de la cámara y la escale del objetivo de nuevo. Un ejemplo: He añadido el cubo por defecto de nuevo y quiero hacerlo un tile de alto. 64×64 no será suficientemente alto como para meter el bloque, así que voy a cambiar el tamaño del render a 64×96 y mover la base del cubo a la parte inferior de la zona de render. Vea la captura de configuración debajo.

Y el resultado. (Tenga en cuenta que en esta vista previa he deshabilitado OSA/anti-aliasing de los tiles. OSA en realidad podría ayudar en algunos tiles).

Otras consideraciones

  • Ayuda usar una escala fija para tus tiles. Por ejemplo: 1 Unidad de blender = 1 metro y 1 tile = 1 metro cuadrado. De esta manera podrás mantener los tiles a escala.
  • Es posible que quieraas incluir sombras en tiles con altura. Crea un plano grande en (0, 0, 0) y ponle un material con Shaders con la opción “OnlyShad [ow]”.
  • Si tienes muchas tiles diferentes puedes montar tilesets de manera fácil con ImageMagick.
  • Si estas usando verdadero isométrico en juegos 2:1 pseudo-isométricos, cambia la cámara RotX de 60 a 54.736.

Ir a OpenGameArt.com para ver la serie completa de estos tiles marrones.

Written by Clint Bellanger. Released under CC-BY-SA and the GFDL.

Original en inglés

2 Comentarios en "Crear tiles isométricos 2D con Blender"

  1. Vaya, tiene muy buena pinta el sistema y parece fácil cuadrar la cámara para que coincidan los tiles (una de las cosas más complicadas en vista isométrica). Seguid así y por cierto, el nuevo estilo me parece excelente.

    ¡Saludos!

Deja un comentario