Tutorial videojuegos: juegos con perspectiva isométrica

Hoy comenzamos un tutorial de programación de juegos con perspectiva isométrica, iré completandolo a medida que vaya realizando el juego que estoy preparando. Espero servirte de ayuda si estás preparando un juego isométrico.

Históricamente la perspectiva isométrica podríamos decir que apareció en los años 80 con los ordenadores de 8 Bits. Yo recuerdo el Ant Attack de Spectrum que fue el primer juego para ordenador que usó esta perspectiva, para otras plataformas fueron el Zaxxon y el Q*Bert. Más adelante aparecieron autenticas maravillas de la técnica como el Knight Lore o el Hear Over Heels sin scroll y el The Great Escape con scroll. Nosotros intentaremos hacer un juego isométrico sencillo para comenzar y más adelante quien sabe, igual nos lanzamos y hacemos uno que supere a los grandes clásicos.

No voy a entrar en más detalles sobre qué es la perspectiva isométrica, si no lo tienes claro, entonces no sigas leyendo porque este tutorial será demasiado avanzado, te recomiendo que vayas a nuestros otros tutoriales de programación de videojuegos que tienen explicaciones y técnicas más intuitivas y fáciles de aprender

Cómo crear gráficos con perspectiva isométrica

Antes de comenzar a programar un videojuego con perspectiva isométrica necesitamos algunos sprites isométricos para poder ver en pantalla si lo estamos haciendo bien.

Lo primero que necesitamos son algunos sprites normales para transformarlos en isométricos con ayuda de Photoshop u otro programa de retoque de imágenes. El tutorial lo haremos con Tiles de tamaño rectangular y 32x32 píxeles. Cuando cojas práctica podrás experimentar con otros tamaños de imágenes, pero para comenzar lo mejor es ir a lo sencillo.

Nosotros usaremos 3 imágenes distintas, una para la parte superior del sprite, y las otras dos para los laterales:

Tiles no isométricos que nos servirán para hacer la perspectiva isométrica

Parte IzquierdaParte DerechaParte superior

Para transformar esas 3 imágenes en una sola con perspectiva isométrica usaremos el método Escalar, Inclinar y rotar (Scale, Shear y Rotate o SSR method en inglés por si lo queréis buscar en goole). Este método se basa en hacer 3 transformaciones a las 3 imágenes. Es recomendable que estas transformaciones que explicamos abajo las grabemos como una acción en photoshop para que nos sea más facil luego repetirla a todos nuestros sprites.

Metodo SSR: Escalar el sprite

Lo primero es escalar la imagen para reducirla sólo verticalmente al 86,062%. Para ello en photoshop escalamos la imagen, es importante que desmarquemos la casilla "restringir proporciones" para que la imagen se reduzca solo verticalmente. Nos daremos cuenta de que al hacerlo la imagen se aplana y se deforma un poco. Nos quedaría así:

Metodo SSR: Inclinar el sprite

Ahora hay que inclinar la imagen, esta parte depende de cual de las 3 partes estemos haciendo. Como la imagen es la de la parte superior de la perspectiva isométrica, deberemos inclinar la imagen -30º, si fuera para otra parte más adelante explicaremos como se inclina. En photoshop pulsamos CTRL+A para seleccionar todo, CTRL+T para transformar y en la barra que nos sale arriba, en el parametro H: pondremos -30. De esta forma la imagen se inclinará. Pulsamos Intro para que se aplique la transformación. Obtendremos algo como esto:

Metodo SSR: Rotar el sprite

Ahora hay que rotar la imagen, como estamos haciendo la parte superior del sprite isométrico la rotaremos 30º con lo cual obtendremos un rombo como este:

Es importante que el lienzo lo vayamos ampliando o reduciendo para que se ajuste al tamaño del tile.

Metodo SSR: Parte izquierda y derecha

Cuando vayamos a hacer la parte derecha e izquierda del sprite isométrico hay la parte de inclinar y rotar es distina (la de reducir es igual)

Para la parte izquierda inclinaremos la imagen 30º y luego rotaremos 30º

Para la parte derecha inclinaremos la imagen -30º y luego rotaremos -30º

Resultado de las partes del sprite isométrico

Parte izquierdaParte derechaParte superior

Una vez tengamos las tres partes las unimos con el Photoshop en una sola y la grabamos. Obtendremos algo como esto:

Como habéis visto hacer un sprite isométrico no es difícil aunque sí laborioso. En mi caso la parte izquierda y la derecha las he sacado de un mismo Tile, simplemente he oscurecido la de la derecha un poco para que parezca que le da menos la luz y está en la sombra. Vosotros podéis hacerlo igual o usar una imagen distinta.

Unir los tiles isometricos en un juego para el mapeado

Ahora queda unir todos esos tiles para formar el plano del juego. En cuanto pueda lo añado al tutorial y os explico como se hace el mapeo. De momento os muestro el resultado de juntar todos esos tiles y rodearlos por unos tiles de muro que he preparado también.

El muro que he preparado ha quedado así:

El mapeado con el tile del suelo rodeado por muros queda así

Votos totales: 34