Layers para videojuegos: los grupo de objetos en Corona.

Figura 1 – Flappy bird

¿Alguna vez jugaste este famoso juego de nombre flappy bird? Tal vez específicamente ese juego no pero seguramente si alguno muy similar. Como puedes observar hay algunos elementos que hacen llamativa la interfaz y es el hecho de que parece tener un fondo azul con nubes y edificios, enfrente de estos es donde aparecen los obstáculos y al mismo nivel vemos esta simpática ave que es la que controlas por medio de taps en el juego. Este orden de imágenes u objetos es lo que nos permite darle una percepción de profundidad a la interfaz y nos permite dar la sensación de que el escenario se mueve.

Cuando en un framework como Corona agregamos objetos en la interfaz, estos se van apilando uno a otro como si fueran ladrillos en el momento en que vamos agregándolos a la interfaz.

Figura 2 – Apilamiento de objetos que se insertan en pantalla en el framework de Corona. Arriba como lo ve el usuario, abajo como lo interpreta Corona.

Imagina por un momento que estamos agregando cuadrados con los colores verde, azul, rojo, naranja (en ese orden) y en forma escalonada, seguramente veríamos algo como lo que se muestra en la figura 2. Sin embargo para Corona estos fueron agregados en orden y por lo tanto, el primer cuadrado agregado en pantalla quedará mas “al fondo” que los cuadros siguientes ya que estos se pondrán “encima” de sus predecesores. Y esto siempre sucederá con cualquier nuevo objeto que agregues en pantalla.

Ahora pensemos en una situación en particular. Imagina que deseamos crear una interfaz donde tenemos que capturar muñecos de nieve, estos solo podremos capturarlos antes de que caigan detrás de una cerca o muro. En teoría esto es tan simple como colocar una imagen de fondo, hacer que los muñecos de nieve se generen y luego poner las cajas, pero al hacerlo de esta manera obtendríamos un resultado similar al siguiente:

Figura 3 – ejemplo de creación de objetos en pantalla – snowman

Si seguimos el orden explicado anteriormente solo el primer muñeco de nieve caerá y pasará detrás del muro de cajas, pero los muñecos de nieve siguientes aparecerán enfrente de estas cajas. ¿Cómo podríamos solucionarlo entonces? Fácil, usando display groups.

Layers y display groups.

Figura 4 – Layers / display groups

Un layer lo puedes imaginar como una hoja transparente a la que puedes agregar objetos a mostrar en pantalla como lo son imágenes, sprites, formas, controles de usuario, etc (ver figura 4). Los layers nos permiten lograr que los objetos siempre estén en el orden de prioridad que esperamos, por lo que, si regresamos al ejemplo que intentábamos resolver esto se resolvería haciendo lo siguiente:

  1. Crear 3 layers (estos se ordenarán dependiendo cual haya sido creado primero y cual después)
  2. La imagen de fondo agregarla al primer layer creado
  3. La fila de cajas agregarlas al último layer creado
  4. Los muñecos de nieve asegurarnos de que siempre sean agregados al layer intermedio.

Esto generará algo similar a lo que vemos en la siguiente imagen:

Figura 5 – Ejemplo snowman organizado en layers.

Si nos aseguramos que los muñecos de nieve, al momento de ser creados, siempre sean agregados al layer intermedio, estos siempre se ocultarán detrás del layer que contiene el muro de cajas sin importar si construimos antes o no dicho muro de cajas.

A continuación les comparto el código ejemplo para el ejercicio realizado en snowman.

Entender como usar un layer te permitirá crear escenarios cada vez mas complejos y mucho mas interactivos. Solo recuerda que debes planear con cuidado el orden y los objetos que deseas en cada layer para que la experiencia que deseas crear sea cada vez mas sofisticada.

Espero hayas disfrutado y aprendido muchas cosas de este artículo 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 que les pueda ayudar en sus proyectos futuros. ¡Hasta la próxima!

0 comments on “Layers para videojuegos: los grupo de objetos en Corona.Add yours →

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *