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

Posicionando indicadores en la pantalla para apuntar a objetivos fuera de ella

by
Read Time:8 minsLanguages:

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

En los juegos de desplazamiento en 2D (y algunos juegos en 3D), a menudo tendrás que mostrarle al jugador la ubicación de un objetivo que está fuera de la pantalla, ya sea un enemigo, un aliado o un objetivo del juego. Muchos juegos usan una flecha que flota cerca del borde de la pantalla para indicar en qué dirección se encuentra el objetivo. En este tutorial, explicaré un método que usa álgebra simple para encontrar dónde colocar dicha flecha indicadora.


Forma de intersección de pendiente

Positioning off-screen indicators Game UIPositioning off-screen indicators Game UIPositioning off-screen indicators Game UI

La forma de intersección de pendiente es una forma de describir una línea recta en 2D con álgebra lineal. Utiliza una pendiente, que normalmente utiliza el símbolo m, que define la inclinación de la línea, y un desplazamiento o intersección, que utiliza el símbolo b, que define dónde la línea cruza el eje y.

\[y = mx + b\]

Gracias a esta relación, si tenemos un valor podemos usar la ecuación general para calcular fácilmente el otro valor, tanto conceptual como matemáticamente.

Dado que buscamos la posición relativa a la pantalla, una superficie plana, hacemos todos los cálculos en 2D, incluso si el juego está en 3D.

Consejo: Si estás trabajando en 3D, deberás transformar la ubicación del mundo en la ubicación de la pantalla de tu objeto 3D. La mayoría de los motores convencionales tienen funciones integradas para hacer esto; consulta la documentación de tu motor para obtener más información.

Si podemos encontrar una línea en la pantalla que describa en qué dirección se encuentra el objeto al que apuntamos, podemos determinar el punto donde cruza cualquier borde dado, y luego usar un poco de prueba y error para averiguar en qué lado de la pantalla estará adjunto a.


Hacer suposiciones

Positioning off-screen indicators Game UIPositioning off-screen indicators Game UIPositioning off-screen indicators Game UI

Si imaginamos que nuestra pantalla está en una cuadrícula y que el punto de origen (0, 0) está justo en el centro de la pantalla, entonces es fácil calcular los valores que describen la línea.

Dado que la línea pasará por el centro, sabemos que nuestra intersección, b, debe ser cero. Y si la cuadrícula se coloca así, podemos calcular muy fácilmente la pendiente, m: es simplemente y/x del objetivo. (En la imagen de arriba, nuestro objetivo es el cursor del mouse).

Una vez que tenemos la pendiente, podemos usar la sustitución para calcular dónde la línea cruzaría los bordes de la pantalla. Por ejemplo, si queremos encontrar cuál es el valor de "y" en el punto donde la línea cruza el borde de la pantalla, usamos la forma original y = mx, donde x se establece en el borde de la pantalla. Si quisiéramos encontrar dónde cruza la parte superior o inferior de la pantalla, dividimos ambos lados por m para que la ecuación sea: x = y / m. Luego simplemente establecemos y en el borde de la pantalla.

Si bien la cuadrícula se coloca de esta manera, el borde de la pantalla sería la mitad del ancho de la pantalla, negativo para la izquierda y positivo para la derecha. Para el eje vertical, de manera similar, el borde de la pantalla está a la mitad de su altura, pero si hacia arriba es positivo o negativo (puede variar entre motores).

Entonces, un juego de 800x600px tendrá sus bordes de pantalla en x = -400px, x = +400px, y = -300px, y y = +300px.


Espacio de coordenadas

Lo anterior estaría bien si el origen del sistema de coordenadas fuera el centro de la pantalla, pero ese rara vez es el caso. La mayoría de los motores tienen el origen en la esquina superior izquierda o en la esquina inferior izquierda.

Antes de hacer nuestros cálculos, necesitamos cambiar nuestro espacio de coordenadas para que todos nuestros valores sean relativos al centro de la pantalla, en lugar del origen predeterminado que usa nuestro motor.

Positioning off-screen indicators Game UIPositioning off-screen indicators Game UIPositioning off-screen indicators Game UI

Cambio de espacio de coordenadas. Puntos no a escala.

¿Suena complejo? Realmente no. Solo tenemos que averiguar cuánto queremos mover el espacio de coordenadas y restar eso de nuestra posición objetivo. Entonces, si queremos mover nuestra cuadrícula hacia arriba la mitad del ancho de la pantalla, restamos la mitad del ancho de la pantalla del valor y del objetivo.


Aquí hay uno que preparé antes

Positioning off-screen indicators Game UIPositioning off-screen indicators Game UIPositioning off-screen indicators Game UI

En el ejemplo anterior, el tamaño de la pantalla es 800x600px, con el espacio de coordenadas desplazado para que (0, 0) esté en el centro del monitor. El objetivo fuera de la pantalla está en (800, 400) usando el mismo espacio de coordenadas.

Dado que la coordenada y del objetivo es positiva (y, en este motor, el eje y apunta hacia arriba), sabemos que no estará en el borde inferior de la pantalla, por lo que inicialmente encontramos su posición a lo largo del borde superior de la pantalla, que es (600, 300).

Podemos decir matemáticamente que este punto todavía está fuera de la pantalla porque su coordenada x (600) es mayor que la mitad del ancho (800/2 = 400), por lo que luego pasamos a buscar su posición en el costado de la pantalla.

Nuevamente, solo necesitamos verificar un lado de la pantalla, porque si nuestra coordenada x es positiva, entonces el punto tiene que estar en el lado derecho de la pantalla. (Si fuera negativo, tendría que estar en el lado izquierdo).

Una vez que encontramos el punto en el lado derecho de la pantalla (400, 200) sabemos que debe ser correcto, ya que hemos descartado todos los lados de la pantalla mediante un proceso de eliminación.


Agregar una pequeña pizca de trigonometría

Además de colocar el indicador, es posible que desees girarlo también para obtener un efecto adicional, especialmente si es una flecha. Hay una función útil que forma parte de la mayoría de las clases de matemáticas y que resuelve este problema con bastante facilidad: atan2().

La función atan2() toma dos parámetros: una coordenada "x" y una coordenada "y". Devuelve un ángulo que indica la dirección de (0, 0) a (x, y).

Hay un par de cosas a tener en cuenta con atan2() que pueden variar entre idiomas y motores. En primer lugar, los argumentos suelen ser atan2(y, x), mientras que la mayoría de las otras funciones matemáticas toman primero la coordenada x. Además, la rotación a menudo se devuelve en radianes en lugar de grados.

Consejo: No entraré en las diferencias entre radianes y grados, excepto para decir que la conversión de uno a otro es fácil: simplemente multiplica los radianes por (180/Pi) para convertirlos en grados y multiplicalos por (Pi/180) si deseas volver a cambiarlos.


Últimas verificaciones

Hay una última cosa que debemos verificar antes de hacer un indicador fuera de la pantalla, y es si nuestro objetivo está realmente fuera de la pantalla, ya que no tiene mucho sentido apuntar en la dirección de nuestro objetivo si ya podemos verlo. Nuevamente, usaremos matemáticas bastante simples para resolver esto.

Dado que nuestra pantalla es un rectángulo sin girar, no necesitamos hacer nada con ángulos, solo necesitamos verificar si nuestro punto objetivo está más bajo que la parte superior, más alta que la parte inferior, a la izquierda del borde derecho y al a la derecha del borde izquierdo de la pantalla.

Usando los valores ficticios anteriores, encontramos que el objetivo está en pantalla. Estos valores pueden provenir de cualquier lugar que almacene información sobre el objeto que está rastreando.

Ten en cuenta que el código anterior asume que estamos en el espacio de coordenadas donde (0, 0) está en la esquina de la pantalla, como la mayoría de los motores lo tienen por defecto. Por lo tanto, este paso debe realizarse antes de desplazar el espacio de coordenadas al centro, como hacemos al calcular la posición del indicador.


Poniéndolo todo junto

Aquí hay una demostración rápida para mostrar estos conceptos en acción (mira el código en GitHub):

Repasemos el código:

  • En primer lugar, comprobamos si el objetivo está realmente fuera de la pantalla; si está en pantalla ya sabemos dónde colocar el cursor, si así lo deseamos.
  • Cambiamos el espacio de coordenadas para que el origen esté en el centro de la pantalla.
  • Mirando la posición del cursor, podemos saber fácilmente si está en la mitad superior o inferior de la pantalla.
  • Usando esa información y la sustitución algebraica, calculamos dónde estaría ese punto en la parte superior o inferior de la pantalla.
  • Observamos el punto que acabamos de calcular y comprobamos si en realidad se trata de una posición en la pantalla o si está demasiado a la izquierda o la derecha.
  • Si el punto está fuera de la pantalla, calculamos un nuevo punto en el costado de la pantalla, en lugar de la parte superior o inferior.
  • Ahora deberíamos tener el punto correcto en el espacio de coordenadas incorrecto, por lo que hacemos lo contrario de lo que hicimos en el primer paso para devolverlo al sistema de coordenadas correcto.

Conclusión

Ahí lo tienes: un práctico fragmento de código para agregar a la interfaz de usuario de tu juego. Ahora que puedes apuntar al jugador en la dirección de un objetivo, considera cómo puedes mostrar la distancia también.

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.