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

Profundidad Isométrica para Plataformas Móviles

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Clasificación de profundidad puede ser explicado en términos sencillos como una forma de averiguar qué elemento está más cerca de la cámara y que está más lejos, determinando el orden en que necesitan ser arreglados para transmitir la profundidad adecuada en la escena.

En este tutorial, tenemos que profundizar en profundidad clasificación de niveles isométricos mientras intentamos agregar plataformas móviles. Esto no es un tutorial para principiantes en isométrica teoría y no sobre el código. El objetivo es entender la lógica y la teoría en lugar de diseccionar el código. La herramienta de elección para el tutorial es unidad, y por lo tanto profundidad clasificación esencialmente cambia el sortingOrder de los sprites involucrados. Para otros marcos, puede ser un cambio de la orden de la z o la secuencia de orden de dibujo.

Para empezar a trabajar en teoría de la isométrica, por favor consulte esta serie de tutoriales. La estructura del código y la escena sigue mi tutorial isométrico anterior. Consulte estos si encuentras difíciles de seguir ya que se concentrará sólo en la lógica en este tutorial el tutorial.

1. Niveles Sin Movimiento

Si su nivel en isométrico no tiene elementos móviles o sólo tiene pocos personajes caminando sobre el nivel, la clasificación de la profundidad es sencilla. En tales casos, los personajes ocupando los azulejos isométricos serían más pequeños que los azulejos ellos mismos y pueden fácilmente usar la misma orden/profundidad de dibuja como el azulejo que ocupan.

Vamos a referir a niveles tan inmóviles como niveles estáticos. Hay algunas maneras en que tales niveles se pueden establecer para que transmite la profundidad adecuada. Por lo general, los datos de nivel será una matriz bidimensional donde las filas y columnas que corresponden a las filas y columnas del nivel.

Considere el siguiente nivel isométrico con dos filas y siete columnas.

Isometric level with 2 rows and numbered z order

Los números en los azulejos indican su orden sortingOrder o profundidad o z, es decir, el orden en que deben extraerse. En este método, estamos aprovechando todas las columnas en la primera fila, a partir de la primera columna con un sortingOrder de 1

Una vez que todas las columnas se dibujan en la primera fila, la columna más cercana a la cámara tiene una sortingOrder de 7, y se procede a la siguiente fila. Así que cualquier elemento en la segunda fila tendrá una sortingOrder mayor que cualquier elemento de la primera fila.

Esto es exactamente cómo los azulejos necesitan ser arreglado para transmitir la profundidad correcta como un sprite con un sortingOrder más alto se consigue overlaid sobre cualquier otros sprites con sortingOrder inferior.

En cuanto al código, esto es sólo una cuestión de bucle a través de las filas y columnas de la matriz de nivel y asignación de sortingOrder secuencialmente en un orden creciente. No se rompería aunque nosotros intercambiar filas y columnas, como se aprecia en la imagen de abajo.

Isometric level with 2 columns and numbered z order

Aquí dibujamos la columna primero antes de pasar a la siguiente fila. La percepción de la profundidad se mantiene intacta. Así que la lógica de un nivel estático es dibujar una fila completa o columna y proceda a la siguiente al asignar sortingOrder secuencialmente en un orden creciente.

Adición de Altura

Si tenemos en cuenta el nivel de un edificio, actualmente nos estamos dibujando la planta baja. Si necesitamos agregar un nuevo piso a nuestro edificio, todos tenemos que hacer es esperar a que dibujamos primero todo el piso de tierra y seguir el mismo método para el siguiente piso.

Para la profundidad adecuada, hemos esperado hasta que la fila completa era completa antes de que nos mudamos a la siguiente fila, y asimismo espere hasta que todas las filas están completas antes de continuar a la siguiente planta. Así que para un nivel con solo una hilera y dos pisos, se vería como la siguiente imagen.

Isometric level with 2 floors and numbered z order

Esencialmente, cualquier azulejo en el piso más alto tendrá un sortingOrder más alto que cualquier azulejo en la planta baja. En cuanto al código para agregar plantas superiores, sólo necesitamos el valor y de las coordenadas de pantalla para el azulejo, dependiendo de que planta ocupa de compensar.

El valor de floorHeight indica la altura percibida de la imagen de azulejo bloque isométrica, mientras que floorLevel indica que ocupa el azulejo de piso.

2. Mueve los aAzulejos en el Eje X

¿Profundidad de clasificación en un nivel estático isométrico no era correcta, complicadas? Avanzando, decidámonos a seguir el método de primera fila, donde asignar sortingOrder a la primera fila completamente y luego continuar a la siguiente. Vamos a considerar nuestra primera baldosa móvil o plataforma que se mueve en un solo eje, el eje x.

Cuando digo que el movimiento es en el eje x, necesita darse cuenta de que estamos hablando sobre el sistema de coordenadas cartesiano y no el sistema de coordenadas isométrico. Vamos a considerar un nivel con solo una planta de tres filas y siete columnas. Consideremos también que la segunda fila sólo tiene un único azulejo, que es nuestro movimiento. El nivel se verá como la imagen de abajo.

level with 3 rows and single tile moving in x axis

El azulejo oscuro es nuestro movimiento, y el sortingOrder que se le asigna será 8 como la primera fila tiene 7 fichas. Si la pieza se mueve en el eje cartesiano x entonces se moverá a lo largo de la trinchera entre las dos filas. En todas las posiciones que puede ocupar a lo largo de ese camino, las fichas en fila 1 tendrá una menor sortingOrder.

Del mismo modo, todas las fichas en fila 2 tendrá un sortingOrder más alto, independientemente de la posición de la baldosa oscura a lo largo de dicho camino. Así como seguimos un método primera fila de asignación de sortingOrder, no necesitamos hacer nada para el movimiento en el eje x. Ahora, eso fue fácil.

3. Mueve los Azulejos en el Eje Y

Problemas comienzan a surgir cuando empezamos a considerar el eje y. Vamos a considerar un nivel en el que nuestro azulejo oscuro está moviendo a lo largo de un foso rectangular, como se muestra a continuación. Puedes ver lo mismo en la escena de la unidad MovingSortingProblem en la fuente.

showing depth issues while moving in y axis

Con nuestro enfoque primera fila, podemos proporcionar un sortingOrder para nuestro azulejo móvil basado en la fila que ocupa actualmente. Cuando el azulejo es entre dos filas, haz asignaría un sortingOrder basado en la fila se mueve desde. En ese caso, no puede seguir la sortingOrder secuencial en la fila en la que se está moviendo. Esencialmente esto rompe nuestra profundidad clasificación de enfoque.

Clasificación en Bloques

Para solucionar esto, tenemos que dividir nuestro nivel en diferentes bloques, entre los cuales uno es el problema, que se rompe bajo nuestro enfoque primera fila, y el resto son bloques que pueden seguir el enfoque primera fila sin romperse. Considerar la imagen de abajo para una mejor comprensión.

level divided into blocks of which one is the problem block

El bloque de 2 x 2 mosaico representado por el área azul es nuestro bloque problema. Todos los bloques todavía pueden seguir el enfoque primera fila. Por favor no se confunda con la imagen ya que muestra un nivel que se ha separado ya debidamente con nuestro enfoque. El bloque azul consiste en los azulejos de dos columna en las filas entre las cuales está actualmente moviendo nuestro azulejo oscuro y las baldosas inmediatamente a la izquierda de ellos.

Para resolver la cuestión de la profundidad del bloque de problema, podemos utilizar el primer enfoque de la columna para este bloque solo. Así que para los bloques verdes, rosados y amarillos, utilizamos fila primero, y para el bloque azul, utilizamos el primer método de la columna.

Tenga en cuenta que todavía es necesario asignar secuencialmente la sortingOrder. En primer lugar el bloque verde, entonces el bloque rosado a la izquierda, luego el bloque azul, ahora viene el bloque rosado a la derecha y finalmente el bloque amarillo. Rompemos el orden sólo para cambiar a la primera aproximación de columna mientras que en el bloque azul.

Por otra parte, también podemos considerar el bloque 2x2 a la derecha de la columna móvil del azulejo. (Lo interesante es, no necesita incluso cambiar de enfoques como el romperse en bloques ha ya solucionado nuestro problema en este caso.) La solución puede verse en acción en la escena BlockSort.

depth issues solved using blocks

Esto se traduce a código como el siguiente.

4. Mueve los Azulejos en el Eje Z

Un movimiento en el eje z es un falso movimiento en el plano isométrico. Esencialmente es sólo movimiento en el eje y de pantalla. Para un sola planta isométrico nivel, no hay nada más que hacer para añadir movimiento sobre el eje z, si ya han hecho el bloque clasificación método descrito anteriormente. Puede ver esto en acción en la escena de la unidad de SingleLayerWave, donde he añadido un movimiento adicional de la onda en el eje z con el movimiento lateral de la fosa.

Movimiento de Z en Niveles con Múltiples Pisos

Adición de un piso adicional a su nivel es sólo una cuestión de compensación de la coordenada de pantalla, como se explicó antes. Si el azulejo no se mueve en el eje z, entonces no hay que hacer nada especial para la clasificación de la profundidad. Podemos bloquear el tipo de la planta baja con movimiento y luego aplicar clasificación primera fila para cada piso sucesivo. Puede ver esto en acción en la escena de la unidad de BlockSortWithHeight.

level with multiple floors and lateral motion

Un problema de profundidad muy similar se presenta cuando el azulejo se inicia movimiento entre las plantas. Sólo puede satisfacer el orden secuencial de una sola planta con nuestro enfoque y rompería la clasificación de la profundidad del otro piso. Necesitamos ampliar o modificar nuestro bloque clasificar a tres dimensiones para hacer frente a este problema de profundidad de suelos.

El problema será esencialmente a las dos plantas entre las que se mueve actualmente el azulejo. Para todas las otras plantas, podemos pegar a nuestro enfoque actual de la clasificación. Necesidades especiales se aplican a sólo estas dos plantas, entre los que podemos en primer lugar determinar la planta baja como abajo donde tileZOffset es la cantidad de movimiento en el eje z para el azulejo de nuestro movimiento.

Esto significa que la más lower y lower+1 son las plantas que necesitan un enfoque especial. El truco es asignar sortingOrder para estos pisos juntos, como se muestra en el código siguiente. Esto fija la secuencia para que los temas de profundidad se clasifican hacia fuera.

Esencialmente, estamos considerando dos pisos como una sola planta y haciendo una especie de bloque en ese piso solo. Revisa el código y la acción en la escena BlockSortWithHeightMovement. Con este enfoque, nuestro azulejo es libre de moverse en cualquiera de los dos ejes sin romper la profundidad de la escena, como se muestra a continuación.

level with tile moving along all 3 axes

Conclusión

La idea de este tutorial era aclarar la lógica de la profundidad de los enfoques de clasificación, y espero que bastante ha entendido esto. Es evidente que estamos considerando niveles comparativamente simples con sólo una ficha móvil.

No hay ninguna pistas ya sea como pistas habría hecho de este un tutorial mucho más. Pero una vez que han entendido la lógica de clasificación, entonces usted puede intentar extender la lógica bidimensional pendiente a la vista isométrica.

La unidad cuenta con una economía activa. Hay muchos otros productos que le ayudan a construcción su proyecto. La naturaleza de la plataforma también resulta una gran opción de que puede mejorar sus habilidades. En cualquier caso, usted puede ver lo que tenemos disponible en Envato Market.

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.