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

Creación de mundos isométricos: una guía para desarrolladores de juegos, continuación

by
Difficulty:IntermediateLength:LongLanguages:

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

En este tutorial, desarrollaremos el primer original Creando Mundos Isométricos, y aprenderemos sobre la implementación de recolecciones, fichas de activación, intercambio de niveles, búsqueda y seguimiento de rutas, desplazamiento de niveles, altura isométrica y proyectiles isométricos.


1. Recolecciones

Las recolecciones son elementos que se pueden recoger dentro del nivel, normalmente simplemente caminando sobre ellos, por ejemplo, monedas, gemas, efectivo y munición.

Los datos de recolección también se pueden acomodar directamente en nuestros datos de nivel de la siguiente manera:

En este nivel de datos, usamos 8 para denotar un arranque (1 y 0 representan paredes y baldosas transitables, respectivamente, como antes).

Es importante entender que 8 en realidad denota dos fichas, no solo una: significa que primero tenemos que colocar una loseta para pasto y luego colocar una camioneta en la parte superior. Esto significa que cada recolección siempre estará en un mosaico de césped. Si queremos que esté sobre una losa de ladrillo transitable, entonces necesitaremos otra loseta denotada por otro número, digamos 9, que represente "recogido en la losa de ladrillo".

El arte isométrico típico tendrá múltiples losetas transitables, supongamos que tenemos 30. El enfoque anterior significa que si tenemos N pastillas, necesitaremos baldosas (N * 30) además de las 30 fichas originales, ya que cada baldosa deberá tener una versión con pastillas y una sin. Esto no es muy eficiente; en su lugar, debemos tratar de crear dinámicamente estas combinaciones.

Para hacer esto, podemos usar otra matriz con los datos de recolección por sí solos, y usar esto para colocar mosaicos de recolección encima de los datos de diseño de niveles:

...más:

...resultados en:

pickups in level

Este enfoque asegura que solo necesitamos los 30 mosaicos originales además de N fichas de selección, ya que podemos crear cualquier combinación combinando ambas piezas de arte al representar el nivel.

Recogiendo recogidas

La detección de las recolecciones se realiza de la misma manera que la detección de las fichas de colisión, pero después de mover el personaje.

En la función isPickup(tile coordinate), verificamos si el valor del conjunto de datos de captación en la coordenada dada es un mosaico de captación o no. El número en la matriz de captación en esa coordenada de mosaico indica el tipo de captación.

Comprobamos las colisiones antes de mover el personaje, pero luego buscamos recogidas, porque en el caso de las colisiones el personaje no debería ocupar el lugar si ya está ocupado por la ficha de colisión, pero en el caso de las recolecciones, el personaje puede moverse libremente sobre él.

Otra cosa a tener en cuenta es que los datos de colisión generalmente nunca cambian, pero los datos de recolección cambian cada vez que recogemos un artículo. (Esto generalmente implica cambiar el valor en la matriz de recolección de, digamos, 8 a 0.)

Esto genera un problema: ¿qué sucede cuando tenemos que reiniciar el nivel y, por lo tanto, restablecer todas las recolecciones a sus posiciones originales? No tenemos la información para hacer esto, ya que la matriz de recolección se ha cambiado a medida que el jugador recogió los artículos. La solución es usar una matriz duplicada para recolecciones mientras está en juego y mantener intacta la matriz de recolección original; por ejemplo, usamos pickupsArray [] y pickupsLive[], clonamos la última de la anterior al inicio del nivel, y solo cambiar pickupsLive[] durante el juego.


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

Deberías notar que buscamos recolecciones cada vez que el personaje está en ese mosaico. Esto puede ocurrir varias veces en un segundo (solo verificamos cuando el usuario se mueve, pero podemos dar vueltas y vueltas dentro de un mosaico) pero la lógica anterior no fallará; ya que establecemos los datos de la matriz de recolección en 0 la primera vez que detectamos un recogido, todas las verificaciones siguientes isPickup(tile) devolverán resultados falsos false para esa ficha.


2. Trigger Tiles

Como su nombre indica, las casillas de activación causan que algo suceda cuando el jugador las pisa o presiona una tecla al pisarlas. Pueden teletransportar al jugador a una ubicación diferente, abrir una puerta o engendrar un enemigo, por poner algunos ejemplos. En cierto sentido, las pastillas son solo una forma especial de fichas de activación: cuando el jugador pisa una ficha que contiene una moneda, la moneda desaparece y el contador de monedas aumenta.

Veamos cómo podemos implementar una puerta que lleva al jugador a un nivel diferente. La ficha al lado de la puerta será una ficha de activación; cuando el jugador presione la barra espaciadora, pasarán al siguiente nivel.

hero at door

Para cambiar los niveles, todo lo que tenemos que hacer es intercambiar la matriz de datos del nivel actual con la del nuevo nivel, y establecer la nueva posición y dirección del elemento héroe.

Supongamos que hay dos niveles con puertas para permitir el paso entre ellos. Como la casilla de tierra junto a la puerta será la casilla de activación en ambos niveles, podemos usar esto como la nueva posición para el personaje cuando aparecen en el nivel.

La lógica de implementación aquí es la misma que para las recolecciones, y nuevamente usamos una matriz para almacenar los valores de activación. Esto es ineficiente y debe considerar otras estructuras de datos para este propósito, pero vamos a mantener esto simple por el bien del tutorial. Deje que las nuevas matrices de niveles sean las siguientes (7 denota una puerta):

Deje que los niveles tengan algunas pastillas, como se detalla en las matrices de recolección siguientes:

Deje que las matrices de fichas de activación correspondientes para cada nivel sean las siguientes:

Los valores (1 y 2) indican el nivel que se cargará cuando el jugador presiona Espacio.

Aquí está el código que se ejecuta cuando el jugador golpea esa tecla:

La función isTrigger () comprueba si el valor del conjunto de datos de activación en la coordenada dada es mayor que cero. Si es así, nuestro código pasa ese valor a doRelevantAction(), que decide a qué función llamar después. Para nuestros propósitos, usaremos la regla simple de que si el valor se encuentra entre 1 y 10, es una puerta, por lo que se llamará a esta función:

Dado que el valor de la tesela en la matriz de disparadores también denota el nivel que debe cargarse, simplemente podemos pasarlo a swapLevel(). Esto implica, a su vez, que nuestro juego tiene diez niveles.

Aquí hay una demostración funcional. Intenta recoger objetos caminando sobre ellos e intercambiando niveles de pie junto a las puertas y golpeando Espacio.


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

He hecho que el disparador se active cuando se libera Espacio; si solo escuchamos presionar la tecla, terminamos en un bucle en el que intercambiamos los niveles siempre que la tecla se mantenga presionada, ya que el carácter siempre aparece en el nuevo nivel encima de una ficha de activación.

Aquí está el código completo (en AS3):


3. Búsqueda de ruta

La búsqueda de ruta y seguimiento de ruta es un proceso bastante complicado. Hay varios enfoques que usan diferentes algoritmos para encontrar la ruta entre dos puntos, pero nuestros datos de nivel son una matriz 2D. Las cosas son más fáciles de lo que podrían ser: tenemos nodos bien definidos y únicos que el jugador puede ocupar y podemos verificar fácilmente si son caminables

Una visión detallada de los algoritmos de ruta está fuera del alcance de este artículo, pero intentaré explicar la forma más común de hacerlo funcionar: el algoritmo de ruta más corta, cuyos algoritmos A * y Dijkstra son implementaciones famosas.

Nuestro objetivo es encontrar nodos conectando un nodo inicial y un nodo final. Desde el nodo de inicio visitamos los ocho nodos vecinos y los marcamos como visitados; este proceso central se repite para cada nodo recientemente visitado, recursivamente. Cada hilo rastrea los nodos visitados. Al saltar a los nodos vecinos, los nodos que ya han sido visitados se omiten (la recursión se detiene); de lo contrario, el proceso continúa hasta que llegamos al nodo final, donde la recursión finaliza y la ruta completa seguida se devuelve como una matriz de nodos. A veces, el nodo final nunca se alcanza, en cuyo caso falla la búsqueda de ruta. Por lo general, terminamos encontrando múltiples rutas entre los dos nodos, en cuyo caso tomamos el que tiene el menor número de nodos.

Hay muchas soluciones estándar disponibles para encontrar rutas basadas en matrices 2D, por lo que evitaremos reinventar esa rueda. Usemos esta solución AS3 (le recomiendo que revise esta gran demostración explicativa)).

La solución devuelve una matriz con puntos que forman la ruta desde el punto de inicio hasta el punto final:

Seguimiento de Camino

Una vez que tenemos la ruta como una matriz de nodos, tenemos que hacer que el personaje la siga.

Digamos que queremos hacer que el personaje camine hacia un azulejo en el que hacemos clic. Primero debemos buscar una ruta entre el nodo que el personaje ocupa actualmente y el nodo donde hicimos clic. Si se encuentra una ruta exitosa, entonces tenemos que mover el carácter al primer nodo en la matriz de nodos configurando es como el destino. Una vez que llegamos al nodo de destino, verificamos dónde hay más nodos en la matriz de nodos y, si es así, configuramos el próximo nodo como destino, y así sucesivamente hasta llegar al nodo final.

También cambiaremos la dirección del jugador según el nodo actual y el nuevo nodo de destino cada vez que lleguemos a un nodo. Entre los nodos, simplemente caminamos en la dirección requerida hasta que llegamos al nodo de destino. Esta es una IA muy simple.

Mira este ejemplo de trabajo:


Haga clic para mover el personaje. Haga clic aquí para ver la versión completa.

Aquí está la fuente completa:

Puede haber notado que eliminé la lógica de verificación de colisión; ya no es necesario ya que no podemos mover nuestro personaje manualmente usando el teclado. Sin embargo, debemos filtrar puntos de clics válidos para determinar si hemos hecho clic dentro del área transitable, en lugar de un mosaico de pared u otro mosaico que no se pueda recorrer.

Otro punto interesante para codificar la IA: no queremos que el personaje mire hacia la próxima casilla en la matriz de nodos tan pronto como llegue al actual, ya que un giro inmediato da como resultado que nuestro personaje camine sobre los bordes de azulejos. En su lugar, debemos esperar hasta que el personaje esté unos pocos pasos dentro del mosaico antes de buscar el próximo destino. También es mejor colocar manualmente al héroe en el centro de la casilla actual justo antes de que giremos, para que todo se sienta perfecto.

Además, si exploras la demostración anterior, puedes notar que nuestra lógica de sorteo se interrumpe cuando el héroe se mueve diagonalmente cerca de una ficha de pared. Este es un caso extremo en el que, para un marco, nuestro héroe parece estar dentro del mosaico de la pared. Esto sucede porque hemos desactivado el control de colisión. Una solución consiste en utilizar un algoritmo de identificación de ruta que ignora las soluciones diagonales. (Casi todos los algoritmos de búsqueda de rutas tienen opciones para habilitar o deshabilitar las soluciones de recorridos diagonales).


4. Proyectiles

Un proyectil es algo que se mueve en una dirección particular con una velocidad particular, como una bala, un hechizo mágico, una pelota, etc.

Todo sobre el proyectil es el mismo que el personaje héroe, aparte de la altura: en lugar de rodar por el suelo, los proyectiles a menudo flotan por encima a una cierta altura. Una bala viajará por encima del nivel de la cintura del personaje, e incluso una pelota puede necesitar rebotar.

Una cosa interesante a tener en cuenta es que la altura isométrica es la misma que la altura en una vista lateral 2D. No hay complicadas conversiones involucradas. Si una bola está a 10 píxeles del suelo en coordenadas cartesianas, está a 10 píxeles del suelo en coordenadas isométricas. (En nuestro caso, el eje relevante es el eje y).

Tratemos de implementar una pelota rebotando en nuestra pradera amurallada. Ignoraremos los efectos de amortiguación (y así haremos que los rebotes continúen interminablemente), y para darle un toque de realismo agregaremos una sombra a la pelota. Movemos la sombra tal como movemos el personaje héroe (es decir, sin usar un valor de altura), pero para la pelota debemos agregar el valor de altura al valor Y isométrico. El valor de altura cambiará de cuadro a cuadro dependiendo de la gravedad, y una vez que la pelota toque el suelo, voltearemos la velocidad actual a lo largo del eje y.

Antes de abordar el rebote en un sistema isométrico, veremos cómo podemos implementarlo en un sistema cartesiano 2D. Vamos a representar la altura de la pelota con un zValue variable. Imagine que, para empezar, la bola tiene diez píxeles de altura, por lo que zValue = 10. Usaremos dos variables más: incrementValue, que comienza en 0, y gravity, que tiene un valor de 1.

Cada cuadro, agregamos incrementValue to zValue, y restamos gravity de incrementValue. Cuando zValue llega a 0, significa que la pelota ha alcanzado el suelo; en este punto, volteamos el signo de incrementValue multiplicándolo por -1, convirtiéndolo en un número positivo. Esto significa que la bola se moverá hacia arriba desde el siguiente cuadro, rebotando.

Así es como se ve en el código:

De hecho, vamos a utilizar una versión ligeramente modificada de eso:

Esto elimina el efecto de amortiguación y permite que la pelota rebote para siempre.

Aplicando esto a nuestra pelota, obtenemos la demostración a continuación:


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

Aquí está el código AS3 completo:

Comprenda que el papel desempeñado por la sombra es muy importante y contribuye al realismo de esta ilusión. En el ejemplo anterior, he agregado la mitad de la altura de la bola a la posición y de la bola, de modo que rebota en la posición correcta con respecto a la sombra.

Además, tenga en cuenta que ahora estamos utilizando las dos coordenadas de la pantalla (xey) para representar tres dimensiones en coordenadas isométricas: el eje y en las coordenadas de la pantalla es también el eje z en las coordenadas isométricas. ¡Esto puede ser confuso!


5. Desplazamiento isométrico

Cuando el área del nivel es mucho más grande que el área de la pantalla visible, tendremos que hacer que se desplace.

El área de pantalla visible se puede considerar como un rectángulo más pequeño dentro del rectángulo más grande del área de nivel completa. Desplazarse es, esencialmente, simplemente mover el rectángulo interno dentro del más grande:

Scrolling Start

Por lo general, cuando ocurre ese desplazamiento, la posición del jugador sigue siendo la misma con respecto al rectángulo de la pantalla, comúnmente en el centro de la pantalla. Todo lo que necesitamos, para implementar el desplazamiento, es seguir el punto de esquina del rectángulo interno:

Scrolling Next

Este punto de esquina, que está en coordenadas cartesianas (en la imagen solo podemos mostrar los valores isométricos), estará dentro de un mosaico en los datos de nivel. Para desplazarse, incrementamos la posición x e y del punto de esquina en coordenadas cartesianas. Ahora podemos convertir este punto en coordenadas isométricas y usarlo para dibujar la pantalla.

Los valores recién convertidos, en el espacio isométrico, también deben ser la esquina de nuestra pantalla, lo que significa que son los nuevos (0, 0). Por lo tanto, al analizar y dibujar los datos de nivel, restamos este valor de la posición isométrica de cada mosaico y solo lo dibujamos si la nueva posición del mosaico cae dentro de la pantalla. Podemos expresar esto en pasos así:

  • Actualice las coordenadas x e y del punto de esquina cartesiano.
  • Convierta esto a espacio isométrico.
  • Reste este valor de la posición de extracción isométrica de cada mosaico.
  • Dibuje el mosaico solo si la nueva posición de extracción isométrica cae dentro de la pantalla.

Mira este ejemplo (usa las flechas para desplazarte):


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

Aquí está el código fuente completo de AS3:

Tenga en cuenta que el punto de esquina se incrementa en la dirección opuesta a la actualización de la posición del héroe a medida que se mueve. Esto asegura que el héroe se quede donde está con respecto a la pantalla:

La lógica de dibujo solo cambia en dos líneas, donde determinamos las coordenadas cartesianas de cada mosaico. Acabamos de pasar el punto de esquina al punto original que realmente combina los puntos 1, 2 y 3 anteriores:

Un par de notas:

  • Mientras se desplaza, es posible que tengamos que dibujar mosaicos adicionales en los bordes de la pantalla, o de lo contrario, podremos ver que los mosaicos desaparecen y aparecen en los extremos de la pantalla.
  • Si tienes fichas que ocupan más de un espacio, entonces necesitarás dibujar más fichas en los bordes. Por ejemplo, si la ficha más grande de todo el conjunto mide X por Y, entonces tendrá que dibujar X más fichas a la izquierda y derecha e Y más fichas en la parte superior e inferior. Esto asegura que las esquinas de las fichas más grandes aún estarán visibles cuando se desplace hacia adentro o hacia afuera de la pantalla.
  • Todavía tenemos que asegurarnos de no tener áreas en blanco en la pantalla mientras nos acercamos a los bordes del nivel.
  • El nivel solo debe desplazarse hasta que la ficha más extrema se dibuje en el extremo de la pantalla correspondiente; después de esto, el personaje debe continuar moviéndose en el espacio de la pantalla sin que se desplace el nivel. Para esto, necesitaremos rastrear las cuatro esquinas del rectángulo de la pantalla interna y estrangular la lógica de desplazamiento y movimiento del jugador en consecuencia. ¿Estás preparado para el desafío de intentar implementarlo por ti mismo?

Conclusión

Esta serie está especialmente dirigida a principiantes que intentan explorar mundos de juego isométricos. Muchos de los conceptos explicados tienen enfoques alternativos que son un poco más complicados y he elegido a propósito los más fáciles. Es posible que no cumplan todos los escenarios que pueda encontrar, pero el conocimiento adquirido se puede utilizar para construir sobre estos conceptos y crear soluciones muy complicadas.

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.