Godot 2D #5: Conociendo mejor la Cámara

¡Muy buenas a todos!

Es hora de profundizar en los usos que podemos darle a la cámara.

Podremos personalizarla a nuestro gusto, ver cómo luce nuestra cámara y cómo se comporta esta dentro del juego.

Esta entrada corresponde a la parte escrita del vídeo que he hecho en YouTube. Si quieres ver este mismo tutorial de una forma más visual, no dudes en echarle un vistazo. Además, este vídeo incluye mucha más información y explicaciones gráficas que te ayudarán a comprender mejor qué es lo que estamos haciendo. Así que no lo dudes, ¡échale un ojo!

Vídeo de este tutorial: 

https://www.youtube.com/watch?v=9q7sd1aBBBY

Dicho todo esto, ¡vamos al lío!

Vamos a partir de la base que creamos en el anterior post, así que si no lo has visto, te recomiendo que vayas a verlo para no perderte detalle. 

Lo primero que vamos a hacer es introducir un fondo a modo de ejemplo para que nuestro personaje pueda moverse en él. Vamos a introducir un nuevo nodo llamado "TextureRect", y después, vamos a coger la imagen que nosotros queramos y, una vez que tengamos seleccionado el nodo de "TextureRect", la pondremos en el apartado de "Texture" dentro del inspector de nodos.

Si queréis usar esta misma imagen que estoy usando yo, puedes descargarla desde aquí. Vamos a colocar el nodo justo debajo del nodo padre ("Node2D") para que no se ponga encima de nuestro personaje. 

Por si no lo sabías, el orden en la jerarquía de nodos también influye a la hora de ver qué objetos se ponen encima de otros, y de esta forma, los nodos que estén más arriba dentro de la jerarquía se verán más al fondo y, los que estén más abajo en la jerarquía, se verán en el frente. Te recomiendo que juegues con este concepto dentro de tu proyecto y veas cómo funciona.

Otro aspecto importante que debemos tener en cuenta, es que por defecto las imágenes vienen con un filtro, haciendo que se vean borrosas. Vamos a desactivar esto seleccionando nuestra imagen en el sistema de archivos y clickando en el apartado de "Importar" para desactivar la opción de "Filter".

Haciendo esto nuestra imagen ya no se verá borrosa por defecto (aunque si la agrandamos mucho perderá calidad como toda imagen).

Después la agrandaremos un poco, y la pondremos a nuestro gusto dentro de la escena. Como puedes ver la imagen es un ejemplo, y por lo tanto, al jugar veremos los cortes de donde acaba. No importa el tamaño de la imagen en este tutorial, ya que lo que nos interesa es la cámara, no la imagen de fondo.

Si tienes un personaje que se mueva, vas a poder ver que puedes explorar el nivel si ejecutas el juego. Si sabes poner colisiones, practica colocándolas por el nivel (no tienes que preocuparte porque en otro tutorial te enseñaré como crear niveles de una forma mucho más profesional).

Antes de empezar a modificar el entorno, vamos a ver con qué propiedades vamos a estar jugando para poder modificar el comportamiento de nuestra cámara. Si le echas un vistazo al inspector de nodos cuando tienes selecionado el nodo "Camera2D" (o como hayas llamado a tu cámara), podrás ver las siguientes opciones. 

Como puedes ver, hay muchísimas opciones que podemos customizar a nuestro antojo. En este tutorial vamos a centrarnos en aquellas que hacen que nuestra cámara se vea distinto. 

El resto de opciones sirven para cambiar propiedades internas de la propia cámara. Si quieres aprender exactamente qué es y para qué se usa, te recomiendo que visites la Documentación de Godot con respecto a este tema aquí. 

En nuestro caso vamos a centrarnos en los siguientes:

• Offset: determina el "grado de desvío de nuestra cámara", es decir, cuantos píxeles va a estar descentrada de donde se supone que estaría el centro.

Cámara sin "offset" (he desactivado el fondo para que podais verlo mejor):

Como puedes ver la cámara permanece centrada en el personaje.

Cámara con "offset" (x=100 y=100):

Como puedes ver, la cámara se ha "descentrado" un poco ya que gracias al ofset hemos hecho que se desplace del su centro 100 píxeles en el eje de la "x", y otros 100 en el de las "y".

• Rotating: determina si nuestra cámara va a rotar en caso de que nuestro personaje lo haga también. En la mayor parte de los casos esta opción nos interesa que no esté seleccionada, ya que queremos que nuestro personaje rote pero la cámara no.

Cámara sin "Rotating" activado (he rotado al personaje manualmente para que veas lo que ocurre):

Como ves, el personaje ha girado pero la cámara sigue estando recta y no ha girado con el. Veamos lo que pasa si activamos el "Rotating".

Cámara con "Rotating" activado:

Como puedes comprobar, la cámara ha rotado junto al personaje. De esta forma hacemos que sea posible ver al personaje recto a la vez que tenemos la cámara girada. Dependiendo de qué juego estemos haciendo nos interesará que nuestra cámara se comporte así o no. Por lo general, en mis proyectos esta opción no la activo.

• Drag Margin Horizontal and Vertical: una de las opciones más interesantes que tenemos. Esta opción nos permite crear una zona dentro del área que muestra la cámara, en el que nuestro personaje podrá moverse sin que se mueva la cámara. Para poder ver esta zona y editarla, hay que cambiar un par de opciones un poco más abajo. Puedes encontrarlas aquí:

Vamos paso a paso. Para activar esta zona debemos tener activado las opciones "Drag Margin H Enabled" y "Drag Margin H Enabled". Si sólo queremos que este efecto de zona (en el cual se puede mover el personaje) ocurra en el eje vertical u horizontal específicamente, basta con que solo activemos la vertical o la horizontal (dependiendo de qué sea lo que estamos buscando hacer con nuestro juego).

Para poder ver este área mejor, activaremos abajo del todo una opción llamada "Draw Drag Margin". Al hacerlo, nos aparecerá en medio de la cámara un recuadro azul clarito,  que será el área en la cual nuestra cámara no se moverá. En el momento que el jugador pase esas líneas, la cámara empezará a moverse siguiendo a nuestro personaje.

Por último, tenemos la opción del "Drag Margin" , es decir, los valores que podemos darle a este área. Podemos agrandarla, estrecharla y customizarla a nuestro antojo. No dudes en jugar con estos valores y ver qué es lo que ocurre.

Cámara sin "Drag Margin":

Nuestro personaje se mantiene centrado todo el rato en la cámara, y esta le sigue constantemente.

Cámara con "Drag margin":

Como ves, el personaje tiene una pequeña zona en la cual se puede mover sin que le siga la cámara. Si quieres verlo mucho mejor pásate por el vídeo de este tutorial y así podrás verlo de una manera mucho más visual.

• Smoothing: por último tenemos esta opción. Este es un efecto que hará que nuestra cámara tenga un efecto de movimiento algo más lento y que vaya de forma mucho más suave hacia donde esté enfocando. Esta velocidad a la cual va dirigida este sitio podemos modificarla y hacer que tenga un movimiento más brusco o no. Debido a que no te puedo mostrar cómo funciona en imágenes, te recomiendo encarecidamente que le eches un vistazo al vídeo para ver como esta opción puede ser una de las mejores si quieres darle un acabado algo más pulido a tu cámara en tu juego, y ya que viendo unas simples capturas lo más probable es que no se pueda apreciar o entender bien del todo.
  Podemos cambiar estos valores en la pestaña de "Smoothing":

Sin duda esta última opción te será de gran ayuda en tus juegos.

Bien, ¡pues esto es todo por ahora!

Si tienes cualquier tipo de duda no dudes en ponerme un comentario aquí debajo o en el propio vídeo, e intentaré contestarte lo más rápido posible.

¡Nos vemos!

El vídeo de este tutorial:

https://www.youtube.com/watch?v=9q7sd1aBBBY

Mi canal de YouTube:

https://www.youtube.com/channel/UCAwrHOXBtRvfw034z7BjIhw