Comunidad orientada al desarrollo de videojuegos

Creación de tiles isométricas usando el sistema SSR

En este tutorial aprenderemos a crear tiles (baldosas) isométricas, con las que podremos construir de manera sencilla nuestros mundos virtuales 2D con aspecto tridimensional.

Un poco de trasfondo

Lo primero que debemos entender es qué es una perspectiva isométrica. Las proyecciones isométricas pertenecen a la familia de las perspectivas axonométricas, siendo sus propiedades más importantes que la escala del objeto representado no depende de su distancia al observador, y que dos líneas paralelas en realidad son también paralelas en su representación axonométrica.

Resumiéndolo un poco, quiere decir que nuestros objetos no se verán afectados por la profundidad, y trabajarán siempre sobre una base de 30 grados.

Y resumiéndolo todavía más, podríamos decir que simplemente no existe punto de fuga. La diferencia se observa bien en una imagen.

Diferencias

Una de las principales ventajas de este sistema a la hora de crear videojuegos es que los objetos, al carecer de perspectiva, son fácilmente duplicables y apilables en un entorno 2D.

isometrica apilable

Sistemas para crear perspectivas isométricas

Uno de los sistemas para conseguir objetos en isométrica es crear manualmente una rejilla de líneas con una inclinación de 30 grados en las dos direcciones, y usarla como referencia para dibujar los objetos encima. Los objetos seguirán la rejilla en su ancho y largo, y en general tendrán líneas rectas a lo alto. Es sencillo y rápido conseguir resultados como el siguiente:

Isométrica usando guías
Una ventaja de este sistema es que es muy sencillo, una vez se tiene hecha la plantilla, o ‘suelo’, dibujar objetos encima. El mayor inconveniente es que aunque es bueno para objetos de líneas muy rectas, no lo es para cualquier variación curva. Por eso aprenderemos el sistema SSR que tiene mucha más flexibilidad.

Usando sistema SSR (Scale, Shear, Rotate)

Las siglas SSR vienen de las palabras Scale, Shear y Rotate en inglés (escalar, inclinar y rotar en español), y nos permitirán conseguir una versión isométrica de prácticamente cualquier ilustración, con lo que podemos usar efectos más complejos que cuando usamos la rejilla. En estos ejemplos usaremos el programa Adobe Illustrator, pero es aplicable a cualquier programa vectorial.

Dibujaremos primero un cuadrado del tamaño que deseemos.

Cuadrado inicial

Esta parte era sencilla, eh? 🙂

A continuación accederemos al menú de transformación de escala, ya sea desde el menú Object > Transform > Scale o haciendo doble click en la herramienta Scale y cambiaremos su escala vertical al 86,062% de la original. Con esto conseguiremos una versión ligeramente achatada del objeto. Si, es un valor un poco inusual.

Escalar

Este paso es exactamente igual para crear las secciones superior, izquierda y derecha de nuestros objetos, pero los siguientes pasos varían ligeramente, así que puede ser un buen momento para sacar un par de copias de ese cuadrado achatado y ‘reservarlas’

Continuamos aplicando transformaciones al rectángulo,  y ahora aplicaremos una inclinación de 30 grados positivos (esto es importante, porque podemos poner valores negativos consiguiendo otros efectos), desde el menú Object > Transform > Shear o haciendo doble click sobre su icono en la barra de herramientas de la izquierda.

Inclinar
Y por último, ese mismo objeto lo rotaremos 30 grados negativos, desde el menú Object > Transform > Rotate o doble click sobre la herramienta correspondiente. Con esto conseguiremos la parte superior de nuestra ‘baldosa’

Rotar
El proceso para conseguir los dos laterales de nuestro cubo serían los mismos, pero para el lado izquierdo haríamos un shear de -30 y un rotate de -30, y para el derecho, un shear de 30 y un rotate de 30 grados también positivo. La tabla de trasformaciones sería la siguiente:

Tabla transformaciones
Por supuesto que si las dos caras izquierda y derecha fuesen iguales, se podría ahorrar algunas transformaciones ya que con hacer un reflejo de una de ellas ya tendríamos la otra.
Y una vez tengamos los tres lados tendremos un cubo isométrico que podremos ensamblar..

Montaje
Puede parecer un proceso complicado, pero se realiza de manera muy rápida, sobre todo si lo grabas como acción de Illustrator, y además nos proporciona algunas ventajas muy importantes, dado que los objetos a los que aplicamos las transformaciones pueden ser todo lo complicados que queramos.

Jugando un poco con el proceso

Veamos el siguiente ejemplo. Si partimos de los siguientes cuadrados, algo más trabajados…

Caras dibujadas

Aplicándoles las transformaciones correspondientes conseguiremos un cubo isométrico mucho más interesante, y muy complicado de conseguir por otros medios:

Cubo isométrico molón

Apilando pequeñas variaciones de estos elementos podemos ir creando bloques que juntos vayan formando un escenario coherente.

Pequeño escenario

Y por último, juntando distintos objetos en isométrica, y además pintando por encima elementos que se salgan de esa líneas tan paralelas, podemos crear baldosas de muy distintos tipos, que ya sea en engine o mediante programación en tiempo real podamos colocar en nuestro videojuego.

Torre

Y esta sería una de las maneras más efectivas de crear elementos en perspectiva isométrica, usando el sistema conocido como SSR.

Como nota adicional he de añadir que en algunos casos, dependiendo del dispositivo, puede ser interesante realizar los pasos usando una inclinación de 26,6º en vez de los 30º habituales, ya que la línea recta que se crea está en una inclinación a la que se le puede aplicar de manera más sencilla determinadas técnicas de antialiasing. Pero ahí ya estamos hilando muy fino.

Espero les haya gustado, cualquier pregunta no duden en dejarla en los comentarios.

, , , , ,

4 thoughts on “Creación de tiles isométricas usando el sistema SSR

Leave a Reply