Corona SDK – El sistema de coordenadas y punto de ancla

El principal problema al que se enfrentan las personas que quieren comenzar a desarrollar un juego siguiendo tutoriales es que muchos de estos están escritos pensando en que el lector entiende los conceptos básicos, cuando la mayor parte de las veces son personas que apenas están entrando en este mundo y no conocen absolutamente nada. Por ello en este post hablaremos de uno de los temas más básicos: El sistema de coordenadas y el punto de ancla.

El sistema de coordenadas

Figura 1 – Sistema de coordenadas

El sistema de coordenadas es lo que nos permite determinar la posición de un objeto en un plano. ¿Recuerdas todas esas clases de geometría analítica donde debías trabajar con un plano y por medio de coordenadas ( X , Y ) ubicabas puntos? Esto aplica para cualquier framework de desarrollo de videojuegos.

Dependiendo el framework que vayas a utilizar el orígen (el punto 0,0) puede cambiar. En el caso de Corona SDK, un framework que me gusta mucho y que considero sencillo para introducirse al mundo de desarrollo de videojuegos, el sistema de coordenadas comienza en la esquina superior izquierda, y el límite se ubica en la esquina inferior derecha como se puede observar en el siguiente gráfico:

Figura 2 – Punto de inicio del sistema de coordenadas en corona SDK

En el gráfico anterior se esta asumiendo que la configuración de pantalla fue de 1200 x 800, por eso el punto mas alejado de la pantalla es dicha coordenada.

La posición de un sprite o un objeto dependerá de la posición ( x, y ) que indiquemos y del punto de ancla que dicho objeto tenga configurado. Antes de empezar con un ejemplo veamos como funciona el punto de ancla.

Punto de ancla

La propiedad en inglés la encontramos como anchor y es el punto de referencia que un objeto tomará para posicionarse en un plano. En el caso de corona SDK el este punto de referencia se encuentra por defecto al centro del objeto, sin embargo podemos modificar dicho punto de referencia en cualquier momento para resolver diferentes problemas.

Figura 3 – Ubicación del punto de ancla de una imagen en corona SDK

Por ejemplo, si especificamos la coordenada ( 600 , 400 ) para posicionar la imagen del árbol de la figura 3, la veremos en el centro del plano:

Figura 4 – Objeto posicionado en un plano

Aunque en una publicación posterior veremos mas a fondo como agregar sprites en nuestro juego les mostraré algunas cosas interesantes que se pueden hacer con el punto de ancla. En el siguiente ejemplo en código muestro como se ve la códificación en LUA para agrear ese objeto al centro:

  local arbolito = display.newImageRect("sprites/tree_01.png", 364, 280)

  arbolito.x = 600
  arbolito.y = 400

En este pequeño fragmento en la línea 2 se esta generando una nueva imagen rectangular, que esta en una carpeta de nombre “sprites” y su nombre es “tree_01.png”, y se almacena esta referencia en una variable de nombre “arbolito”.

En las líneas  4 y 5 se indica, para las propiedades (x , y) del sprite la ubicación de dicha imagen en pantalla dando como resultado lo que vimos en la imagen de la figura 4.

¿Podemos manipular la ubicación del punto de ancla? La respuesta es sí. Por ejemplo, habrá ocasiones en las que es mas sencillo, para posicionar un objeto, ubicar el punto de ancla en una esquina. Por ejemplo imaginemos que queremos que la imagen del árbol aparezca debajo de ambas líneas centrales como se muestra en el ejemplo (el cuadro morado sería el lugar donde aparecera la imagen del árbol):

Figura 5 – ejemplo de posición especifica

Tomando en cuenta que ya sabemos que el centro se ubica en la posición (600 , 400) podemos inferir que sumando la mitad del ancho y del alto de la imagen original obtendremos el punto especifico que necesitamos. La imagen original mide 364 x 280, por lo que sumaríamos 182 y 140 respectivamente. Si tuvieramos que estar haciendo esos cálculos con multiples imágenes de diferentes tamaños sería muy tardado construir una interfaz, sin embargo, corona SDK nos permite modificar la posición del punto de ancla usando valores que van del 0 al 1, donde 0 representa el orígen de la imagen (esquina superior izquierda) y 1 el final de la imagen (esquina inferior derecha) tanto para el alto como el ancho de la imagen (ver figura 6).

Figura 6 – Valores posibles para ubicar el punto de ancla en un sprite / objeto

Como se puede observar en la figura 6, esto nos dice que el punto de ancla por defecto se encuentra configurado con los valores (0.5 , 0.5), para el ejemplo que estamos buscando lograr podemos simplemente poner el punto de ancla en la esquina superior izquierda y una vez realizado simplemente seguir usando las coordenadas que sabemos son el centro de nuestra interfaz. En el fragmento de código a continuación están ambos ejemplos :

 

  -- Ejemplo 1, posicionando la imagen ajustando la posición
  local arbolito = display.newImageRect("sprites/tree_01.png", 364, 280)

  arbolito.x = 782            -- 600 + 182
  arbolito.y = 540            -- 400 + 140

  -- Ejemplo 2, posicionando la image cambiando el punto de ancla
  local arbolito = display.newImageRect("sprites/tree_01.png", 364, 280)

  arbolito.anchorX = 0
  arbolito.anchorY = 0
  arbolito.x = 600
  arbolito.y = 400

Saber manipular el punto de ancla puede ayudarnos a resolver algunos problemas de forma mas sencilla, explora y experimenta con diferentes ejemplos de interfaces, esto te ayudará a identificar cuando te conviene modificarlo.

Espero hayas disfrutado y aprendido muchas cosas de esta entrada y por favor siéntete libre de compartir esta información en tus redes sociales para que otras personas interesadas también puedan conocer algo nuevo y que les pueda ayudar en sus proyectos futuros. ¡Hasta la próxima!