Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Isometric Games
Gamedevelopment

Creando mundos isométricos: una guía para desarrolladores de juegos

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial, le daré una descripción general amplia de lo que necesita saber para crear mundos isométricos. Aprenderá qué es la proyección isométrica y cómo representar los niveles isométricos como matrices en 2D. Formularemos relaciones entre la vista y la lógica, de modo que podamos manipular fácilmente los objetos en la pantalla y manejar la detección de colisiones basada en mosaicos. También veremos la clasificación de profundidad y la animación de personajes.

Artículos Relacionados

¿Quieres más consejos para crear mundos isométricos? Consulte la publicación de seguimiento, Creando mundos isometricos: Una guía para los desarrolladores de juegos, Continuado, y el libro de Juwal, Starling Game Development Essentials.


1. El mundo isométrico

La vista isométrica es un método de visualización que se usa para crear una ilusión de 3D para un juego que, de otro modo, sería 2D, a veces denominado pseudo 3D o 2.5D. Estas imágenes (tomadas de Diablo 2 y Age of Empires) ilustran lo que quiero decir:

diablo

Diablo 2
AOE

Era de los imperios

Implementar una vista isométrica se puede hacer de muchas maneras, pero en aras de la simplicidad me centraré en un enfoque basado en mosaicos, que es el método más eficiente y ampliamente utilizado. He superpuesto cada captura de pantalla anterior con una cuadrícula de diamantes que muestra cómo el terreno se divide en mosaicos.


2. Juegos basados en azulejos

En el enfoque basado en mosaicos, cada elemento visual se divide en piezas más pequeñas, llamadas mosaicos, de un tamaño estándar. Estas fichas se organizarán para formar el mundo del juego de acuerdo con los datos de nivel predeterminados, generalmente una matriz 2D.

Por ejemplo, consideremos una vista 2D estándar de arriba hacia abajo con dos mosaicos, una baldosa de hierba y una baldosa de pared, como se muestra aquí:

base 2d tiles

Algunas fichas simples

Estos mosaicos son del mismo tamaño que el otro y son cuadrados, por lo que la altura del azulejo y el ancho del mosaico son los mismos.

Para un nivel con pastizales cerrados por todos lados por muros, la matriz 2D de los datos de nivel se verá así:

Aquí, 0 denota una baldosa de hierba y 1 denota una baldosa de pared. Organizar las fichas de acuerdo con los datos de nivel producirá la imagen de nivel inferior:

2d level simple

Un nivel simple, que se muestra en una vista de arriba hacia abajo.

Podemos mejorar esto agregando azulejos de esquina y azulejos verticales y horizontales separados, que requieren cinco azulejos adicionales:

2d level complex

Nivel mejorado con números de mosaico

Espero que el concepto del enfoque basado en mosaico sea ahora claro. Esta es una implementación de grilla 2D directa, que podríamos codificar de la siguiente manera:

Aquí suponemos que el ancho del azulejo y la altura del azulejo son iguales (y lo mismo para todos los azulejos), y coinciden con las dimensiones de las imágenes del azulejo. Por lo tanto, el ancho del azulejo y la altura del azulejo para este ejemplo son ambos de 50px, que conforman el tamaño de nivel total de 300x300px, es decir, seis filas y seis columnas de losetas que miden 50x50px cada una.

En un enfoque normal basado en mosaicos, implementamos una vista descendente o una vista lateral; para una vista isométrica necesitamos implementar la proyección isométrica.


3. Proyección isométrica

La mejor explicación técnica de lo que significa "proyección isométrica", hasta donde yo sé, es de este artículo de Clint Bellanger:

    Inclinamos nuestra cámara a lo largo de dos ejes (balancee la cámara 45 grados hacia un lado, luego 30 grados hacia abajo). Esto crea una rejilla en forma de diamante (rombo) donde los espacios de la rejilla son dos veces más anchos que altos. Este estilo fue popularizado por juegos de estrategia y juegos de rol de acción. Si miramos un cubo en esta vista, son visibles tres lados (lado superior y dos lados enfrentados).

Aunque suena un poco complicado, implementar esta visión es sencillo. Lo que debemos comprender es la relación entre el espacio 2D y el espacio isométrico, es decir, la relación entre los datos de nivel y la vista; la transformación de coordenadas "cartesianas" de arriba hacia abajo en coordenadas isométricas.

the_isometric_grid

Cuadrícula cartesiana vs. cuadrícula isométrica.

(No estamos considerando una técnica basada en mosaicos hexagonales, que es otra forma de implementar mundos isométricos).

Colocando azulejos isométricos

Permítanme intentar simplificar la relación entre los datos de nivel almacenados como una matriz 2D y la vista isométrica, es decir, cómo transformamos las coordenadas cartesianas en coordenadas isométricas.

Trataremos de crear la vista isométrica para nuestros datos de nivel de pastizales cerrados:

En este escenario, podemos determinar un área transitable comprobando si el elemento de la matriz es 0 en esa coordenada, lo que indica hierba. La implementación de vista 2D del nivel anterior fue una iteración directa con dos bucles, colocando mosaicos cuadrados compensando cada uno con la altura del azulejo fijo y los valores de ancho del azulejo.

Para la vista isométrica, el código sigue siendo el mismo, pero la función placeTile() cambia.

Para una vista isométrica, necesitamos calcular las coordenadas isométricas correspondientes dentro de los bucles.
Las ecuaciones para hacer esto son las siguientes, donde isoX y isoY representan las coordenadas isométricas x e y, y cartX y cartY representan las coordenadas cartesianas x e y:

Estas funciones muestran cómo se puede convertir de un sistema a otro:

El pseudocódigo para el ciclo se ve así:

isolevel screenshot

Nuestro pastizal encerrado en una vista isométrica.

Como ejemplo, veamos cómo una posición 2D típica se convierte a una posición isométrica:

Del mismo modo, una entrada de [0, 0] dará como resultado [0, 0], y [10, 5] dará [5, 7.5].

El método anterior nos permite crear una correlación directa entre los datos de nivel 2D y las coordenadas isométricas. Podemos encontrar las coordenadas del mosaico en los datos de nivel de sus coordenadas cartesianas usando esta función:

(Aquí, suponemos esencialmente que la altura del azulejo y el ancho del azulejo son iguales, como en la mayoría de los casos).

Por lo tanto, a partir de un par de coordenadas de pantalla (isométricas), podemos encontrar las coordenadas del mosaico llamando:

Este punto de pantalla podría ser, por ejemplo, una posición de clic del mouse o una posición de pick-up.

Consejo: Otro método de colocación es el modelo Zigzag, que adopta un enfoque completamente diferente.

Moviéndose en coordenadas isométricas

El movimiento es muy fácil: manipula los datos de su mundo de juego en coordenadas cartesianas y simplemente usa las funciones anteriores para actualizarlo en la pantalla. Por ejemplo, si desea mover un carácter hacia adelante en la dirección y positiva, simplemente puede incrementar su propiedad y y luego convertir su posición a coordenadas isométricas:

Clasificación de profundidad

Además de la ubicación normal, tendremos que ocuparnos de la clasificación en profundidad para dibujar el mundo isométrico. Esto asegura que los elementos más cercanos al jugador se dibujen encima de los elementos más alejados.

El método más simple de clasificación en profundidad es simplemente usar el valor cartesiano de coordenada y, como se menciona en este consejo rápido: cuanto más arriba de la pantalla esté el objeto, más temprano se dibujará. Esto funciona bien siempre que no tengamos sprites que ocupen más de un espacio de teselas.

La forma más eficiente de clasificar en profundidad para los mundos isométricos es dividir todos los mosaicos en dimensiones estándar de un solo mosaico y no permitir imágenes más grandes. Por ejemplo, aquí hay una ficha que no encaja en el tamaño de tesela estándar: vea cómo podemos dividirla en varias teselas, cada una de las cuales se adapta a las dimensiones de la tesela:

split big tile

Una imagen grande se divide en varias fichas de dimensiones isométricas estándar

4. Creando el Arte

El arte isométrico puede ser pixel art, pero no tiene que serlo. Al tratar con el arte de píxeles isométricos, la guía de RhysD te dice casi todo lo que necesitas saber. Algunas teorías se pueden encontrar en Wikipedia también.

Al crear arte isométrico, las reglas generales son

  • Comience con una cuadrícula isométrica en blanco y adhiérase a la precisión perfecta de píxeles.
  • Intenta dividir el arte en imágenes de baldosas isométricas individuales.
  • Intente asegurarse de que cada baldosa sea accesible o no. Será complicado si tenemos que acomodar una sola loseta que contenga tanto áreas transitables como no transitables.
  • La mayoría de las fichas necesitarán mosaico sin fisuras en una o más direcciones.
  • Las sombras pueden ser difíciles de implementar, a menos que usemos un enfoque por capas donde dibujamos sombras en la capa del suelo y luego dibujamos el héroe (o árboles u otros objetos) en la capa superior. Si el enfoque que utilizas no es de varias capas, asegúrate de que las sombras caigan al frente para que no se caigan, por ejemplo, el héroe cuando se para detrás de un árbol.
  • En caso de que necesite usar una imagen de mosaico más grande que el tamaño de mosaico isométrico estándar, intente utilizar una dimensión que sea un múltiplo del tamaño del mosaico iso. Es mejor tener un enfoque en capas en tales casos, donde podemos dividir el arte en diferentes piezas en función de su altura. Por ejemplo, un árbol se puede dividir en tres partes: la raíz, el tronco y el follaje. Esto hace que sea más fácil ordenar las profundidades ya que podemos dibujar las piezas en las capas correspondientes que corresponden con sus alturas.

Los mosaicos isométricos que son más grandes que las dimensiones de un solo mosaico crearán problemas con la clasificación de profundidad. Algunos de los problemas se discuten en estos enlaces:


5. Personajes isométricos

Implementar caracteres en vista isométrica no es complicado, ya que puede sonar. El arte de los personajes debe ser creado de acuerdo con ciertos estándares. Primero necesitaremos fijar cuántas direcciones de movimiento están permitidas en nuestro juego; por lo general, los juegos proporcionarán movimiento en cuatro direcciones u movimiento en ocho direcciones.

Eight-way navigation directions in top-down and isometric views

Ocho direcciones de navegación en vista descendente e isométrica.

Para una vista de arriba hacia abajo, podríamos crear un conjunto de animaciones de personajes orientadas en una dirección, y simplemente rotarlas para todas las demás. Para el arte de los personajes isométricos, debemos volver a representar cada animación en cada una de las direcciones permitidas, por lo que para el movimiento a ocho bandas necesitamos crear ocho animaciones para cada acción. Para facilitar la comprensión, generalmente indicamos las direcciones como Norte, Noroeste, Oeste, Suroeste, Sur, Sureste, Este y Noreste, en sentido antihorario, en ese orden.

spriteSheet

Un personaje isométrico que mira en diferentes direcciones.

Colocamos personajes de la misma manera que colocamos los mosaicos. El movimiento de un personaje se logra calculando el movimiento en coordenadas cartesianas y luego convirtiendo a coordenadas isométricas. Supongamos que estamos usando el teclado para controlar el personaje.

Estableceremos dos variables, dX y dY, basadas en las teclas direccionales presionadas. Por defecto, estas variables serán 0 y se actualizarán según el cuadro siguiente, donde U, D, R y L indican las teclas de flecha Arriba, Abajo, Derecha e Izquierda, respectivamente. Un valor de 1 debajo de una tecla representa esa tecla presionada; 0 implica que no se está presionando la tecla.

Ahora, usando los valores de dX y dY, podemos actualizar las coordenadas cartesianas de la siguiente manera:

Entonces dX y dY representan el cambio en las posiciones x e y del personaje, en función de las teclas presionadas.

Podemos calcular fácilmente las nuevas coordenadas isométricas, como ya hemos discutido:

Una vez que tenemos la nueva posición isométrica, necesitamos mover el personaje a esta posición. En función de los valores que tenemos para dX y dY, podemos decidir a qué dirección se enfrenta el personaje y usar el arte del personaje correspondiente.

Detección de colisiones

La detección de colisión se realiza comprobando si la ficha en la nueva posición calculada es una ficha no accesible. Entonces, una vez que encontramos la nueva posición, no movemos el personaje inmediatamente, pero primero verificamos qué tesela ocupa ese espacio.

En la función isWalkable(), verificamos si el valor del conjunto de datos de nivel en la coordenada dada es un mosaico con desplazamiento o no. Debemos tener cuidado de actualizar la dirección en la que se encuentra el personaje, incluso si él no se mueve, como en el caso de que golpee una ficha que no se puede mover.

Clasificación de profundidad con personajes

Considera un personaje y una ficha de árbol en el mundo isométrico.

Para comprender correctamente la clasificación por profundidad, debemos entender que siempre que las coordenadas xey del personaje sean menores que las del árbol, el árbol se solapa con el carácter. Siempre que las coordenadas xey del personaje sean mayores que las del árbol, el carácter se superpone al árbol.

Cuando tienen la misma coordenada x, decidimos basándonos únicamente en la coordenada y: la que tenga una coordenada y más alta se superpone a la otra. Cuando tienen la misma coordenada y, entonces decidimos basándonos solamente en la coordenada x: lo que tenga la coordenada x más alta se superpone a la otra.

Una versión simplificada de esto es dibujar secuencialmente los niveles comenzando desde el mosaico más alejado, es decir, tile[0][0], luego dibujar todos los mosaicos en cada fila uno por uno. Si un personaje ocupa una ficha, primero dibujamos la ficha de tierra y luego renderizamos la ficha de personaje. Esto funcionará bien, porque el personaje no puede ocupar un azulejo de la pared.

La clasificación de profundidad debe hacerse cada vez que una baldosa cambie de posición. Por ejemplo, tenemos que hacerlo cada vez que se muevan los personajes. Luego actualizamos la escena mostrada, después de realizar la clasificación de profundidad, para reflejar los cambios de profundidad.


6. ¡Pruebalo!

Ahora, aproveche sus nuevos conocimientos creando un prototipo funcional, con controles de teclado y clasificación de profundidad adecuada y detección de colisión. Aquí está mi demo:

Haga clic para dar el foco SWF, luego use las teclas de flecha. Haga clic aquí para ver la versión completa.

Puede encontrar útil esta clase de utilidad (la he escrito en AS3, pero debería poder entenderla en cualquier otro lenguaje de programación):

Si realmente te quedas atascado, aquí tienes el código completo de mi demo (en formato de código de línea de tiempo Flash y AS3):

Puntos de registro

Presta especial atención a los puntos de registro de las fichas y al héroe. (Los puntos de registro pueden considerarse como los puntos de origen para cada sprite en particular). Generalmente, estos no caerán dentro de la imagen, sino que serán la esquina superior izquierda del cuadro delimitador del sprite.

Tendremos que modificar nuestro código de dibujo para corregir los puntos de registro correctamente, principalmente para el héroe.

Detección de colisiones

Otro punto interesante a tener en cuenta es que calculamos la detección de colisión en función del punto donde se encuentra el héroe.

Pero el héroe tiene volumen y no puede representarse con precisión con un solo punto, por lo que debemos representar al héroe como un rectángulo y verificar las colisiones contra cada esquina de este rectángulo para que no haya solapamientos con otros mosaicos y, por lo tanto, no haya artefactos de profundidad.

Atajos

En la demostración, simplemente vuelvo a dibujar la escena de nuevo en cada fotograma según la nueva posición del héroe. Encontramos la ficha que ocupa el héroe y dibujamos al héroe sobre la ficha de tierra cuando los bucles de representación llegan a esas fichas.

Pero si miramos más de cerca, veremos que no hay necesidad de recorrer todas las fichas en este caso. Las fichas de hierba y las fichas de la pared superior e izquierda siempre se dibujan antes de que se dibuje el héroe, por lo que no es necesario que vuelvas a dibujarlas. Además, los azulejos de la pared inferior y derecha siempre están delante del héroe y, por lo tanto, se dibujan después de que se dibuja el héroe.

Esencialmente, entonces, solo tenemos que realizar una clasificación en profundidad entre la pared dentro del área activa y el héroe, es decir, dos fichas. Al darse cuenta de este tipo de accesos directos, podrá ahorrar mucho tiempo de procesamiento, lo que puede ser crucial para el rendimiento.


Conclusión

Por ahora, debe tener una gran base para construir sus propios juegos isométricos: puede renderizar el mundo y los objetos en él, representar datos de nivel en matrices 2D simples, convertir entre coordenadas cartesianas e isométricas, y tratar conceptos como la clasificación en profundidad y animación de personajes. ¡Disfruta creando mundos isométricos!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.