Share
El desplazamiento de paralaje es una forma simple y efectiva de crear la ilusión de profundidad en un juego 2D. Ya sea que esté desarrollando un tirador vertical o un juego de plataformas de desplazamiento lateral horizontal, el desplazamiento de paralaje es un elemento de juego probado y verdadero que aumentará en gran medida la inmersión y el impacto gráfico de su proyecto..
En este tutorial, cubriré los aspectos básicos del desplazamiento de paralaje, junto con varios métodos de implementación, de tal manera que podrá introducir con confianza y con éxito el desplazamiento de paralaje en su conjunto de habilidades, independientemente de su nivel de habilidad actual.
Pruebe la demostración a continuación para ver escenas que usan desplazamiento horizontal, vertical, sin desplazamiento de paralaje. Haga clic en la demostración para activarla, luego use las teclas numéricas para cambiar de escena y las teclas de flecha para mover la nave espacial (para las escenas apropiadas).
La paralaje se define como el desplazamiento aparente de un objeto observado debido a un cambio en la posición del observador. Con el desplazamiento de paralaje 2D, la posición del observador solo cambia a lo largo de los ejes x e y. Solo la velocidad y la ubicación de un objeto cambiarán con la posición del observador, ya que escalar el objeto requerirá un cambio a lo largo del eje z.
De Takashi Nishiyama Patrulla de la Luna es ampliamente reconocido como el primer juego en ofrecer desplazamiento de paralaje 2D, pero la técnica existía en la animación tradicional desde 1933. Al usar una cámara multiplano, los animadores pudieron crear un efecto 3D no estereoscópico que creó la ilusión de profundidad permitiendo diferentes recursos de arte para moverse a diferentes velocidades en relación con la distancia percibida de la lente de la cámara. Así es como se logra el desplazamiento de paralaje en los videojuegos modernos, pero en lugar de una cámara multiplano, las escenas se ensamblan con múltiples capas y una sola cámara o vista de juego..
Al dividir los elementos de fondo y de primer plano de un juego en diferentes capas, es posible controlar la velocidad y la posición de estos elementos en función de sus capas. El observador, en este caso, es el jugador, y la cámara del juego se mantiene enfocada en un punto u objeto en particular, mientras que las capas de fondo y primer plano se mueven en consecuencia.
Este punto focal se mueve a la velocidad "normal", o la velocidad definida por el juego. Los objetos de fondo se mueven más lentamente que el punto focal, mientras que los objetos en primer plano se mueven más rápido que el punto focal. Esto da como resultado una ilusión de profundidad que hace que una escena 2D se sienta más inmersiva..
En nuestro primer ejemplo, tenemos una escena muy simple de una calle en la noche que presenta desplazamiento horizontal sin elementos interactivos. Las distintas capas de fondo se mueven a velocidades predeterminadas a lo largo del eje x. Por ahora, concentrémonos en los conceptos básicos del desplazamiento de paralaje sin preocuparnos por el movimiento de los jugadores o las vistas cambiantes.
Primero, analicemos los elementos y atributos individuales de nuestra escena. La ventana del juego es de 600x300px, y cada uno de nuestros activos artísticos tiene un ancho de al menos 600px. Al utilizar elementos de fondo que son más grandes que la ventana del juego, podemos evitar que todo el activo sea visible en un momento dado. Dado que las capas están en mosaico, esto ayudará a evitar demasiadas repeticiones obvias a medida que el mismo activo se desplaza indefinidamente.
Las cuatro capas que componen nuestra primera escena..Nuestra escena está compuesta por cuatro capas. En este ejemplo, el número de la capa define el orden en el que el elemento se dibuja en la pantalla, así como su velocidad de movimiento. Si se tratara de un juego de plataformas de desplazamiento lateral, entonces nuestro objeto de jugador existiría en la parte superior de la Capa 3. Esta capa sería el punto focal del observador, y también dictaría la velocidad de las capas de fondo y de primer plano..
La capa 2 se mueve más lentamente que la capa 3, y la capa 1 se mueve más lentamente que la capa 2. La capa 4 existe como la capa de primer plano, por lo que se mueve más rápido que el punto focal en la capa 3.
Hay varias maneras de implementar este tipo de técnica de desplazamiento de paralaje. En este ejemplo, las capas se mueven a velocidades predeterminadas sin hacer referencia entre ellas. Si planea tener varias escenas con cantidades variables de fondo y capas de primer plano, sería mejor definir las velocidades de la capa leyendo la velocidad actual de la capa del punto focal. Por ejemplo, si el punto focal es la Capa 3 y se está moviendo a una velocidad de 5, entonces cada capa de fondo sucesiva se movería a una velocidad inferior a 5. Cualquier capa de primer plano se movería a una velocidad mayor que 5.
// Variables focal_point_speed = 5; layer_difference = 1; // capa de punto focal layer3.hspeed = focal_point_speed; // Capas de fondo layer2.hspeed = layer3.hspeed - layer_difference; layer1.hspeed = layer2.hspeed - layer_difference; // Capas de primer plano layer4.hspeed = layer3.hspeed + layer_difference; layer5.hspeed = layer4.hspeed + layer_difference;
Si bien el desplazamiento de paralaje se usa con más frecuencia con fondos horizontales, también se puede usar en escenas verticales, como en este ejemplo de disparo espacial. Puede haber formas más eficientes de crear un campo de estrellas, pero el desplazamiento de paralaje hace el trabajo.
Lo más importante de este ejemplo vertical es que el desplazamiento de paralaje funciona en las cuatro direcciones a lo largo de los ejes xy y. (Veremos cuán importante es esto en nuestro tercer y último ejemplo).
Esta escena presenta cuatro capas de fondo: un fondo negro estático y tres colecciones de estrellas en diferentes tamaños. El fondo estático no se mueve, y cada capa sucesiva de estrellas se hace más grande y se mueve más rápido, con la capa final de estrellas que determina en última instancia la velocidad vertical del punto focal, la nave espacial del jugador. Este tipo de desplazamiento de paralaje nos permite simular la profundidad del espacio a la vez que simula el movimiento hacia adelante. La nave del jugador en realidad nunca sube la pantalla, pero todavía tienes la sensación de que el espacio viaja a un ritmo acelerado..
Ahora que comprendemos mejor de qué se trata el desplazamiento de paralaje, podemos comenzar a construir una escena en la que se implementan tanto el desplazamiento horizontal como el vertical, junto con una vista del juego que rastrea el movimiento de un objeto controlado por el jugador..
En la demostración en la parte superior del tutorial, esta escena se divide en dos ejemplos. La primera versión muestra cómo es la escena sin ningún desplazamiento de paralaje. La segunda versión presenta un desplazamiento de paralaje vertical y horizontal completo, y realmente ilustra cómo el desplazamiento de paralaje puede agregar una gran cantidad de inmersión y profundidad a lo que originalmente era una escena muy plana y sin vida..
El aspecto más importante de este ejemplo es el movimiento del jugador y la vista del juego. Debido a que nuestro fondo ya no está bloqueado en una velocidad predeterminada o en una posición de la pantalla, tenemos que calcular la velocidad y la posición de cada capa en relación con la ventana de visualización a medida que el jugador se mueve..
El origen de nuestra ventana de vista está en la esquina superior izquierda en (X, Y). El origen de cada activo de la capa de fondo está en la esquina superior izquierda del sprite en (0,0). Al encontrar las coordenadas x e y actuales de la ventana de visualización en relación con el mundo del juego, podemos realizar un cálculo para determinar dónde se debe colocar el origen de una capa de fondo en la escena. Esta posición cambia a medida que la ventana de vista se mueve en función de este cálculo.
Al usar diferentes valores en el cálculo de cada capa, podemos mover cada capa a diferentes velocidades, dependiendo de qué tan rápido se mueva el jugador.
El código para dibujar la capa que se encuentra directamente detrás de nuestro objeto de jugador está en el siguiente formato: draw_background_tiled_horizontal (layer, x, y) dónde draw_background_tiled_horizontal () es una función simple para dibujar un activo en mosaico en una ubicación específica, y bg_ex_3_2 es nuestro activo de capa.
// Layer 3 draw_background_tiled_horizontal (bg_ex_3_2, view_xview [view_current] / 2.5, (view_yview [view_current] / 10) + 300);
El valor X de la capa en este caso se define por el valor X de la vista actual dividido por un valor de 2.5, creando un movimiento horizontal que se mueve ligeramente más lento que el movimiento de la vista en sí.
De manera similar, el valor Y de la capa se define por el valor Y de la vista actual dividido por 10. El valor Y de la capa se incrementa en 300 Posicionarlo correctamente en relación con el mundo del juego. Sin esta adición extra de 300, El activo aparecerá cerca de la parte superior del mundo del juego en lugar de cerca de la parte inferior donde queremos que esté..
Estos valores obviamente diferirán en su proyecto, pero lo importante a recordar es que la velocidad del movimiento de la capa aumentará a medida que aumenta el número de división, pero solo hasta cierto punto. Al usar la división, la capa solo puede moverse a la misma velocidad o más lenta que la del jugador..
Las dos capas detrás de esta capa se mueven más lentamente, por lo que los números de división son más pequeños:
// Layer 1 draw_background_tiled_horizontal (bg_ex_3_0, view_xview [view_current] / 1.5, (view_yview [view_current] / 2.5) + 175); // Layer 2 draw_background_tiled_horizontal (bg_ex_3_1, view_xview [view_current] / 2, (view_yview [view_current] / 5) +250);
Para hacer una capa que se mueva más rápido que el punto focal, como una capa de primer plano, se debe hacer un ligero cambio. No hay una capa de primer plano en este ejemplo, y la capa del punto focal en realidad solo es visible en la parte inferior de la pantalla. El jugador puede volar por encima del punto focal, que es el suelo, por lo que el barco se convierte en el punto focal. En este ejemplo, nos referimos al suelo como el punto focal porque el suelo es la única capa que se mueve a la misma velocidad percibida que la nave espacial. Aquí es donde obtenemos nuestro verdadero sentido de la velocidad en la escena..
La capa de fondo se mueve más rápido que la vista en sí misma, por lo que el código para dibujar esta capa es ligeramente diferente a las otras capas de fondo:
// Capa de punto focal (suelo) draw_background_tiled_horizontal (bg_ex_3_3, -view_xview [view_current] * 1.5, -view_yview [view_current] + 700);
Con capas que se mueven más rápido que la vista, tomamos la negativo Los valores X e Y de la vista actual y los multiplican por algún valor. No hay división involucrada en el cálculo de la velocidad de las capas de primer plano. En este ejemplo, la capa de suelo se mueve a una velocidad horizontal que es una vez y media Más rápido que la velocidad de la ventana de visualización. No se realiza ninguna multiplicación en la velocidad vertical de la capa, por lo que se mueve a la misma velocidad que la vista. Un valor adicional de 700 se agrega al valor Y de la capa para colocarlo en la ubicación deseada cerca de la parte inferior del mundo del juego.
El desplazamiento de paralaje es una forma simple pero muy efectiva de agregar la ilusión de profundidad a un juego 2D. Espero que los ejemplos en la demostración hayan demostrado cuán efectivo puede ser, y espero que el tutorial en sí haya demostrado lo sencillo que es implementar!
Accentsconagua