[Tutorial] Seguir a nuestro personaje con la cámara

camarasCorona

Muchas veces en el desarrollo de nuestros juegos nos vemos con la necesidad de hacer que el nivel de juego sea mayor que los límites de la pantalla para poder crear una pantalla más grande por la que mover nuestro protagonista. Por tanto, es necesario definir una “cámara” que siga los movimientos de nuestro personaje.

Para trabajar con ello utilizaremos una herramienta creada por Caleb P que nos facilita la tarea.

La información la podemos obtener del siguiente enlace: http://developer.coronalabs.com/code/perspective

A continuación, especificaré cómo trabajar con la librería.

 

1.- Crear una cámara

local perspective=require("perspective")
local camera=perspective.createView()

De manera opcional podemos especificar un parámetro en createView para especificar el número de capas que vamos a utilizar (para si queremos trabajar con varios fondos que se muevan a diferente velocidad representando la perspectiva). Por defecto utiliza 8.

 

Una vez creada la cámara, ya se puede añadir a otros grupos (para superponer capas como el HUD) o cambiar variables, etc. La cámara mueve cada capa internamente así que puedes mover la cámara por sí sola. Cuando la mueves básicamente equivale a hacer un desplazamiento en el eje X o el eje Y

camera.x, camera.y=100, 100

 

2.- Añadir objetos a la cámara

local myObject=display.newImage("myImage.png")
local myObject2=display.newImage("myImage2.png")

camera:add(myObject, 4, false)
camera:add(myObject2, 5, false)

Añadir objetos a la cámara hace que se muevan cuando la cámara se mueva, o simplemente los separa en capas si no estás siguiendo con la cámara. Los parámetros que necesita son los siguientes:

  • objeto – El objeto display que se añadirá a la cámara
  • numCapa – Es la capa a la que añadiremos el objeto yendo de 1 a 8 siendo el 8 el fondo y el 1 el frente
  • esFoco – es un booleano que especifica si la cámara tiene que seguir al objeto o no.

 

3.- Establecer el foco de la cámara

camera:setFocus(myObject)

Cuando un objeto es el foco de la cámara, la cámara se moverá para mantener dentro de la vista. Es conveniente aclarar que si se aplica el foco a más de un objeto seguirá únicamente al último especificado

 

4.- Establecer los límites

Los límites de la cámara determinan hasta dónde sigue la cámara. Si el objeto sobrepasa esos límites, no le seguirá.

camera:setBounds(0,display.contentWidth, 0,display.contentHeight)

Los parámetros necesarios son los siguientes:

  • x1 – la posición X inicial
  • x2 – la posicion X final
  • y1 – la posición Y inicial
  • y2 – la posición Y final

Tener en cuenta que los límites van de acuerdo a las posiciones X e Y del objeto, no los lados de la cámara. De modo que si tienes un objeto en la posición más a la izquierda de los límites y la cámara no tiene desplazamiento en el eje X, se mostrará la vista la mitad del tamaño de la pantalla a la izquierda del objeto, con esta imagen se ilustra este caso:

 

Si sólo se quiere seguir en una dirección (por ejemplo el eje X) simplemente establece el y2 que sea menor que el y1 (o x2 menor que x1 para el scrolling en el eje Y)

Si no quieres que haya límites simplemente se puede establecer un único parámetro a false

camera:setBounds(false)

 

5.- Comenzar el seguimiento de la cámara

camera:track()

Y para pararlo:

camera:cancel()

 

6.- Borrar algún elemento de la cámara

camera:remove(myObject)

 

7.- Destruir la cámara

camera:destroy()

Esta función borrará y hará nil cada capa, la vista y la cámara

 

8.- Funciones para objetos

Es posible utilizar algunas funciones una vez el objeto ha sido añadido a la cámara

myObject:toLayer(1)

Mueve el objeto a la capa especificada por el argumento

 

myObject:back()

myObject:forward()

Mueve el objeto hacia atrás o hacia adelante exactamente una capa

 

myObject:toCameraFront()

myObject:toCameraBack()

Mueve el objeto al frente de la cámara o al fondo de la cámara

 

9.- Miscelánea

Damping

camera.damping=10

El “damping” es la medida de cómo de rápido se mueve la cámara para seguir al objeto. Cuando el damping es 0 la cámara instantáneamente seguirá el objeto. Cuanto más alto sea el damping, más fluido y lento será el movimiento de cámara.

 

Posiciones del Scroll

camera.scrollX, camera.scrollY

El scrollX y scrollY de la cámara es la posición raíz de la capa 1. Así que cuando se hace una función touch, por ejemplo, para evitar el “snaping” (que se congele la cámara, como una foto) que ocurre cuando se ha movido la cámara se puede utilizar lo siguiente:

--In a touch listener
object.x=event.x-camera.scrollX

 

Obtener una capa

camera:layer(6)

Devuelve la capa especificada por el parámetro

 

Mover la cámara a un punto

camera:toPoint(display.contentCenterX, display.contentCenterY)

Mueve la cámara a las posiciones X e Y especificadas. Si el damping es muy bajo, tendrá un feo “teletransporte” a la posición así que se podría cambiar el damping un poco más alto antes de llamar a esta función.

 

El parallax es una manera de representar la perspectiva haciendo que las capas se muevan a diferentes velocidades de modo que aparente que hay más profundidad.

Cada cámara puede tener su propio factor de parallax o velocidad exceptuando la capa 1. La capa 1 siempre seguirá la velocidad fija como sin parallax.

El parallax es tan fácil de añadir como el damping, aunque tienes que añadirlo a cada capa en lugar de a la cámara en sí.

camera:layer(4).parallaxRatio=0.5

 

El factor de parallax es cuánto se mueve la capa cuando la cámara está siguiendo. Un valor de 1 indica que la capa se moverá exactamente a la misma velocidad con respecto al objeto, como la primera capa. Un valor de 0.5 indica que la capa se moverá a la mitad de velocidad de la capa 1 y un valor de 0 indica que no se moverá en absoluto.

 

A partir de la versión 1.4.2 se ha añadido una función para establecer el parallax más rápidamente.

camera:setParallax(
    1,
    1,
    1,
    1,
    0.9,
    0.8,
    0.7,
    0.6
)