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

Juego 'Sokoban' isométrico y hexagonal basado en mosaico 2D de Unity

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Final product image
What You'll Be Creating

En este tutorial, convertiremos un juego convencional de Sokoban en mosaico 2D en vistas isométricas y hexagonales. Si eres nuevo en juegos isométricos o hexagonales, al principio puede ser abrumador intentar seguirlos a los dos al mismo tiempo. En ese caso, recomiendo elegir primero isométrico y luego regresar en una etapa posterior para la versión hexagonal.

Vamos a construir sobre el anterior tutorial de Unity: Unity 2D Tile-Based Sokoban Game. Primero, repase el tutorial, ya que la mayoría del código permanece inalterado y todos los conceptos básicos siguen siendo los mismos. También vincularé a otros tutoriales que explican algunos de los conceptos subyacentes.

El aspecto más importante en la creación de versiones isométricas o hexagonales a partir de una versión 2D es averiguar el posicionamiento de los elementos. Usaremos métodos de conversión basados en ecuaciones para convertir entre los diversos sistemas de coordenadas.

Este tutorial tiene dos secciones, una para la versión isométrica y otra para la versión hexagonal.

1. Juego Sokoban Isométrico

Vamos a sumergirnos en la versión isométrica una vez que hayas pasado por el tutorial original. La siguiente imagen muestra cómo se vería la versión isométrica, siempre que usemos la misma información de nivel utilizada en el tutorial original.

the isometric version of the sokoban level

Vista Isométrica

La teoría isométrica, la ecuación de conversión y la implementación se explican en varios tutoriales en Envato Tuts +. Una vieja explicación basada en Flash se puede encontrar en este detallado tutorial. Recomendaría este tutorial basado en Phaser, ya que es más reciente y a prueba de futuro.

Aunque los lenguajes de scripting utilizados en esos tutoriales son ActionScript 3 y JavaScript, respectivamente, la teoría es aplicable en todas partes, independientemente de los lenguajes de programación. Básicamente se reduce a estas ecuaciones de conversión que se deben usar para convertir coordenadas cartesianas 2D a coordenadas isométricas o viceversa.

Utilizaremos la siguiente función de Unity para la conversión a coordenadas isométricas.

Cambios en el arte

Utilizaremos la misma información de nivel para crear nuestra matriz 2D, levelData, que impulsará la representación isométrica. La mayor parte del código también seguirá siendo el mismo, aparte de lo específico de la vista isométrica.

El arte, sin embargo, necesita tener algunos cambios con respecto a los puntos de pivote. Por favor, consulte la imagen a continuación y la explicación que sigue.

isometric sprites and their offsets

El script del juego IsometricSokoban usa sprites modificados como heroSprite, ballSprite y blockSprite. La imagen muestra los nuevos puntos de pivote utilizados para estos sprites. Este cambio proporciona el aspecto pseudo 3D que pretendemos con la vista isométrica. BlockSprite es un nuevo sprite que agregamos cuando encontramos un invalidTile.

Me ayudará a explicar el aspecto más importante de los juegos isométricos, la clasificación en profundidad. Aunque el sprite es solo un hexágono, lo estamos considerando como un cubo 3D donde el pivote está situado en el medio de la cara inferior del cubo.

Cambios en el código

Descargue el código compartido a través del repositorio git vinculado antes de seguir adelante. El método CreateLevel tiene algunos cambios que tienen que ver con la escala y el posicionamiento de las teselas y la adición de blockTile. La escala de tileSprite, que es solo una imagen en forma de diamante que representa nuestra loseta de tierra, necesita ser alterada de la siguiente manera.

Esto refleja el hecho de que un mosaico isométrico tendrá una altura de la mitad de su ancho. El heroSprite y el ballSprite tienen un tamaño de tileSize/2.

Dondequiera que encontremos un invalidTile, agregamos un blockTile usando el siguiente código.

El hexágono necesita una escala diferente para obtener el aspecto isométrico. Esto no será un problema cuando el arte sea manejado por artistas. Estamos aplicando un valor alfa ligeramente inferior al blockSprite para que podamos ver a través de él, lo que nos permite ver la clasificación de profundidad correctamente. Tenga en cuenta que también estamos agregando estos mosaicos al diccionario de occupants, que se utilizarán más adelante para la clasificación en profundidad.

El posicionamiento de las teselas se realiza mediante el método GetScreenPointFromLevelIndices, que a su vez utiliza el método de conversión CartesianToIsometric explicado anteriormente. El eje Y apunta en la dirección opuesta para Unity, que debe tenerse en cuenta al agregar el middleOffset para posicionar el nivel en el medio de la pantalla.

Al final del método CreateLevel, así como al final del método TryMoveHero, llamamos al método DepthSort. La clasificación por profundidad es el aspecto más importante de una implementación isométrica. Esencialmente, determinamos qué fichas van detrás o frente a otras fichas en el nivel. El método DepthSort es como se muestra a continuación.

La belleza de una implementación en 2D basada en matrices es que para la correcta ordenación de profundidad isométrica, solo tenemos que asignar una profundidad secuencialmente mayor mientras analizamos el nivel en orden, utilizando secuencial para bucles. Esto funciona para nuestro nivel simple con solo una capa de suelo. Si tuviéramos varios niveles de suelo a varias alturas, la clasificación en profundidad podría complicarse.

Todo lo demás permanece igual que la implementación 2D explicada en el tutorial anterior.

Nivel Completado

Puedes usar los mismos controles de teclado para jugar el juego. La única diferencia es que el héroe no se moverá vertical u horizontalmente sino isométricamente. El nivel final se vería como la imagen de abajo.

Isometric version finished level

Vea cómo la clasificación de profundidad es claramente visible con nuestros nuevos blockTiles.

Eso no fue difícil, ¿verdad? Los invito a cambiar los datos de nivel en el archivo de texto para probar nuevos niveles. La siguiente es la versión hexagonal, que es un poco más complicada, y le aconsejo que se tome un descanso para jugar con la versión isométrica antes de continuar.

2. Juego Sokoban Hexagonal

La versión hexagonal del nivel Sokoban se vería como la imagen de abajo.

hexagonal sokoban level

Vista hexagonal

Estamos utilizando la alineación horizontal para la cuadrícula hexagonal para este tutorial. La teoría detrás de la implementación hexagonal requiere mucha lectura adicional. Por favor, consulte esta serie de tutoriales para una comprensión básica. La teoría se implementa en la clase auxiliar HexHelperHorizontal, que se puede encontrar en la carpeta utils.

Conversión de coordenadas hexagonales

El script del juego HexagonalSokoban utiliza métodos de conveniencia de la clase auxiliar para conversiones de coordenadas y otras características hexagonales. La clase auxiliar HexHelperHorizontal solo funcionará con una cuadrícula hexagonal alineada horizontalmente. Incluye métodos para convertir las coordenadas entre los sistemas offset, axial y cúbico.

La coordenada de desplazamiento es la misma coordenada cartesiana 2D. También incluye un método getNeighbors, que toma una coordenada axial y devuelve una List<Vector2> con los seis vecinos de esa celda de coordenadas. El orden de la lista es en el sentido de las agujas del reloj, comenzando con la coordenada de la celda del vecino del noreste.

Cambios en los controles

Con una cuadrícula hexagonal, tenemos seis direcciones de movimiento en lugar de cuatro, ya que el hexágono tiene seis lados, mientras que un cuadrado tiene cuatro. Entonces, tenemos seis teclas para controlar el movimiento de nuestro héroe, como se muestra en la imagen a continuación.

Hexagonal keyboard control keys

Las teclas se organizan en el mismo diseño que una cuadrícula hexagonal si se considera la tecla S del teclado como la celda central, con todas las teclas de control como vecinos hexagonales. Ayuda a reducir la confusión con el control del movimiento. Los cambios correspondientes al código de entrada son los siguientes.

No hay cambios en el arte, y no hay cambios de pivote necesarios.

Otros cambios en el código

Explicaré los cambios de código con respecto al tutorial 2D Sokoban original y no a la versión isométrica anterior. Consulte el código fuente vinculado para este tutorial. El hecho más interesante es que casi todo el código sigue siendo el mismo. El método CreateLevel solo tiene un cambio, que es el cálculo de middleOffset.

Un cambio importante es obviamente la forma en que se encuentran las coordenadas de la pantalla en el método GetScreenPointFromLevelIndices.

Aquí usamos la clase auxiliar para convertir primero la coordenada a axial y luego encontrar la coordenada de pantalla correspondiente. Tenga en cuenta el uso de la variable sideLength para la segunda conversión. Es el valor de la longitud de un lado de la losa hexagonal, que de nuevo es igual a la mitad de la distancia entre los dos extremos puntiagudos del hexágono. Por lo tanto:

El único otro cambio es el método GetNextPositionAlong, que es utilizado por el método TryMoveHero para encontrar la siguiente celda en una dirección determinada. Este método ha sido completamente modificado para acomodar el diseño completamente nuevo de nuestra cuadrícula.

Usando la clase de ayuda, podemos devolver fácilmente las coordenadas del vecino en la dirección dada.

Todo lo demás permanece igual que la implementación 2D original. Eso no fue difícil, ¿verdad? Dicho esto, entender cómo llegamos a las ecuaciones de conversión siguiendo el tutorial hexagonal, que es el quid de todo el proceso, no es fácil. Si juegas y completas el nivel, obtendrás el resultado de la siguiente manera.

hexagonal sokoban finished level

Conclusión

El elemento principal en ambas conversiones fue la conversión de coordenadas. La versión isométrica implica cambios adicionales en la técnica con su punto de pivote así como la necesidad de una clasificación en profundidad.

Creo que ha descubierto lo fácil que es crear juegos basados en cuadrículas utilizando solo datos de nivel basados en matrices bidimensionales y un enfoque basado en mosaicos. Hay posibilidades ilimitadas y juegos que puedes crear con esta nueva comprensión.

Si ha entendido todos los conceptos que hemos discutido hasta ahora, lo invitaría a cambiar el método de control para tocar y agregar algún hallazgo de ruta. Buena suerte.

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.