¿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.
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:
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.
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:
- Crear 3 layers (estos se ordenarán dependiendo cual haya sido creado primero y cual después)
- La imagen de fondo agregarla al primer layer creado
- La fila de cajas agregarlas al último layer creado
- 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:
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.
local composer = require( "composer" )
local scene = composer.newScene()
local physics = require "physics"
--------------------------------------------
physics.start()
local layer_background = display.newGroup() -- layer nivel 0
local layer_snowman = display.newGroup() -- layer nivel 1
local layer_boxWall = display.newGroup() -- layer nivel 2
-- se crea el objeto de imagen de fondo
local background = display.newImageRect( "sprites/background.jpg", display.actualContentWidth, display.actualContentHeight )
background.anchorX = 0
background.anchorY = 0
background.x = 0 + display.screenOriginX
background.y = 0 + display.screenOriginY
-- agregar background al primer layer
layer_background:insert(background)
-- se crean las cajas
for i=1,9 do
local boxWall = display.newImageRect("sprites/crate.png",77,77)
boxWall:scale(2,2)
boxWall.x = 0 + (144 * (i - 1))
boxWall.y = display.actualContentHeight - 77
-- agregar las cajas al último layer
layer_boxWall:insert(boxWall)
end
-- función que creará un snowman que caerá de la parte superior de la pantalla
function fnt_createSnowman()
local snowMan = display.newImageRect("sprites/snowman.png",193,210)
snowMan.x = math.random(100, 700)
snowMan.y = 100
physics.addBody( snowMan, { density=3.0, friction=0.0, bounce=0.0 } )
-- agregar los muñecos de nieve al layer intermedio
layer_snowman:insert(snowMan)
end
--crear un primer snowman para no tener que esperar 2 segundos
fnt_createSnowman()
-- crear un snowman cada 2 segundos
timer.performWithDelay( 2000, fnt_createSnowman, -1 )
return scene
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!