La cámara

En el tutorial anterior creaste un nivel para tu juego. El personaje puede deambular alrededor de la escena, pero esto significa que a veces se sale del enfoque de la cámara. En este tutorial ajustarás la configuración de la cámara para asegurarte de que eso no suceda.

En Unity las escenas o Scenes están conformadas de GameObjects, los mismos que a su vez, tienen una colección de componentes anexados. La manera en la que los jugadores ven la escena está construida de la misma forma.

Para ver la escena, un GameObject dentro de la escena debe tener un componente Camera o Cámara. Cuando se crea una nueva escena, se añade un GameObject llamado Main Camera o Cámara principal, el mismo que tiene un componente Camera dentro.

La cámara apunta hacia abajo en el eje z del GameObject y se comporta de la misma manera que los otros GameObjects. En la vista Scene puedes ver un gizmo que representa el tronco o frustrum. El tronco o frustrum es una figura sólida que parece una pirámide con la parte superior, la misma que es paralela al fondo, recortada. Esta es la forma de la región que puede verse y puede reproducirse con una cámara de perspectiva.

Cuando haces un juego, tienes algunas opciones para asegurarte de que la cámara siga al personaje del jugador. Una solución sería escribir un script para ello. Sin embargo, Unity tiene una solución integrada para resolver ese problema: Cinemachine.

Cinemachine es la repuesta de Unity a todas las cosas relacionadas con las cámaras dentro de los juegos. El siguiente es un resumen básico de este sistema:

• Se crea una o más cámaras «virtuales» en una escena.
• El componente llamado Cinemachine Brain o el Cerebro de Cinemachine maneja estas cámaras virtuales.
• El Cinemachine Brain o el Cerebro de Cinemachine está anexado al mismo GameObject que un componente Camera. Por defecto será el GameObject llamado Main Camera o Cámara principal.
• El Cinemachine Brain maneja todas las cámaras virtuales y decide qué cámara virtual (o una combinación de cámaras virtuales) la cámara debe seguir.

En tu juego, la cámara solo seguirá a John Lemon; por lo tanto, solo necesitarás una cámara virtual. Te vas a asegurar de que esta cámara virtual solo siga a JohnLemon y luego el GameObject Main Camera se atendrá a ello.

En la ventana Project, ve a Assets > Scenes (Recursos > Escenas) y haz clic doble en MainScene (Escena principal).

1. En la jerarquía o Hierarchy, selecciona el GameObject JohnLemon,

2. Mueve tu cursor sobre la ventana Scene y pulsa la tecla F

3. En la parte superior del menú, ve a Cinemachine > Create Virtual Camera (Cinemachine > Crear cámara virtual)

Esto creará un GameObject nuevo en la escena llamado CM vcam1:

Esta se creará en el punto de enfoque de la cámara de la ventana Scene para que esté justo arriba de JohnLemon. No obstante; desde que tienes una cámara virtual en la escena, esta va a mover la vista de la ventana Game, de tal manera que no verás a JohnLemon dentro de ella.

Para que eso no suceda, necesitas asegurarte de que la cámara esté siguiendo el personaje cambiando la configuración de la cámara virtual de Cinemachine.

Para configurar la cámara virtual para que siga a JohnLemon debes:

1. en Hierarchy o jerarquía, seleccionar CM vcam1;

2. en el Inspector, ubica el componente Virtual Camera o Cámara virtual. Este componente tiene muchas configuraciones, pero por el momento solo necesitas enfocar tu atención en tres secciones: las referencias meta, el cuerpo o Body y el objetivo o Aim.

Las referencias meta tienen dos secciones: Follow o seguir y Look at o Mirar hacia. Son referencias opcionales a los componentes Transform de los GameObjects.

Si quieres que tu cámara virtual se mueva, necesita saber cómo moverse. Específicamente, necesita una referencia al componente Transform que va a seguir. Así mismo, si quieres que tu cámara virtual gire, necesita saber hacia qué debe mirar y, por consiguiente, hacia qué debe girar.

Las dos partes de la sección siguiente son Body o el cuerpo y Aim o el propósito. Estas son las configuraciones que determinan cómo se mueve y cómo gira la cámara. Vas a restringir el movimiento de la cámara virtual, de tal manera que mantenga a JohnLemon a la vista todo el tiempo, pero realmente no mira hacia el personaje.

1. En la sección Aim u objetivo, cambia el menú desplegable en la parte superior derecha de Composer (Compositor) a Do Nothing (Hacer Nada).

2. Arrastra el GameObject JohnLemon desde la ventana Hierarchy y suéltalo en la propiedad Follow (Seguir) del componente Virtual Camera o cámara virtual de Cinemachine. Esto cambiará la configuración de Follow para que tome como referencia el componente Transform de JohnLemon.

3. En la sección Body (cuerpo) cambia el menú desplegable en la parte superior derecha de la sección de Transposer a Framing Transposer. Cambiar el Body a un Framing Transposer te permitirá controlar la posición de la cámara virtual al darle reglas sobre dónde debe estar el objetivo.

Para saber más sobre los diferentes valores de configuración puedes echarle un vistazo a la documentación sobre Cinemachine (en la barra de menú superior ve a Cinemachine > About).

La ventana Game ahora debería tener algunas cajas rojas y azules. Estas son las guías que indican dónde debe estar los objetivos en la pantalla.

6. Ahora vamos a configurar el ángulo correcto de la cámara virtual. En Hierarchy, selecciona el GameObject CM vam1. En el componente Transform del GameObject CM vam1, configura la Rotation (rotación) alrededor del eje horizontal a 45.

Ahora la cámara está apuntando hacia abajo y mira al personaje desde arriba. Así es como más o menos queremos que ocurra. ¿Por qué se movió la cámara virtual cuando solo cambiaste la rotación? ¡Ese es el poder de Cinemachine!

Sabías que necesitas un ángulo que mire hacia abajo para la cámara y la cámara virtual calculó que si quieres que la cámara mire hacia abajo; entonces, necesitaría estar localizada más arriba para así poder tener su objetivo en la pantalla.

7. La mayoría de las configuraciones por defecto del Framing Transposer o el Intercambiador de marcos funcionan con tu juego. La única que necesitas cambiar es la configuración de Camera Distance o la distancia de la cámara. El personaje parece muy pequeño en la pantalla; por lo tanto, deberías mover la cámara virtual un poco más cerca.

Cambia la Camera Distance (Distancia de la cámara) de 10 a 8.

8. En Hierarchy, selecciona CM vcam1 y cámbiale el nombre a VirtualCamera.

9. Deselecciona el GameObject de la VirtualCamera para remover las guías de la ventana Game.

10. Guarda la escena en File > Save Scene desde el menú en la parte superior o presionando Ctrl + S (Windows) or CMD + S (macOs).

11. Pulsa el botón Play en la barra de herramientas y testea el juego hasta ahora. Haz clic nuevamente

Eso es todo. Configuraste la cámara virtual y sus movimientos. Ahora puedes empezar a agregar algo de interés visual a la cámara para hacer que el juego se vea incluso mejor.

El posprocesamiento requiere aplicar filtros y efectos a la imagen del juego antes de que sea reproducida en la pantalla (igual a los filtros que se les puede agregar a las fotos). En esta sección del tutorial vas a explorar cómo funciona el posprocesamiento en Unity y luego lo aplicarás a tu propio juego.

¿Cómo funciona el posprocesamiento en Unity?

Generalmente, los efectos de posprocesamiento están agrupados juntos y se usan en diferentes áreas del mundo de juego. Esto significa que cuando la cámara está en un área en particular, su colección de procesos designados se aplicará a la imagen.

Imagina que estás en un cuarto oscuro y luego pasas a través de una puerta a la luz del sol resplandeciente. Tus ojos tomarán un poco de tiempo en ajustarse y todo parecerá más brillante de lo que normalmente es cuando sales del cuarto. En Unity esto puede simularse teniendo diferentes grupos de procesos posteriores que se aplican dentro y fuera del cuarto. Los grupos de procesos posteriores son Assets o recursos llamados Post-processing Profiles o Perfiles de posproceso. Las áreas del juego que tienen perfiles asignados son componentes llamados Post Process Volumes o Volúmenes de posprocesamiento.

A veces, los distintos tipos de cámaras tienen procesos posteriores diferentes. Para vincular una colección de procesos a una cámara específica se añade un componente llamado Post Process Layer o Capa de Posprocesamiento al mismo GameObject que el componente Camera. Las capas son una manera óptima de organizar los GameObjects de acuerdo con su comportamiento.

Aprende más sobre el posprocesamiento en Unity

Este tutorial incluye instrucciones detalladas para agregar efectos específicos de posprocesamiento en el Editor Unity. Si te gustaría explorar estos efectos en más detalle, puedes encontrar más información (en inglés) en:

• la reseña sobre posprocesamiento en el manual de Unity;
• la documentación sobre el paquete de posprocesamiento.

To create a post-processing layer:

1. En Hierarchy selecciona el GameObject llamado MainCamera (Cámara principal).

2. En el Inspector ubica la propiedad Layer (capa) debajo del nombre del GameObject.

Un GameObject solo puede pertenecer a una capa. La cámara principal o Main Camera está en la capa por defecto o Default Layer. Hay muchas opciones por defecto en Unity, pero también puedes crear tus propias capas en el administrador de capas y etiquetas o Tags & Layers Manager.

3. En el menú desplegable de la propiedad Layer (capa), selecciona Add Layer (añadir capa).

4. En el administrador de capas y etiquetas o Tags & Layers Manager hay 32 capas disponibles (comienzan con 0 y terminan en 31).

Las primeras ocho capas están reservadas parar las capas por defecto de Unity, pero las otras 24 pueden usarse para lo que quieras. Desde que necesitas una capa para tu Post Process Volume o Volumen de Posprocesamiento, tiene sentido crear una capa para todos los volúmenes de posprocesamiento.

5. Agrega PostProcessingVolumes como User Layer 8 (Capa de usuario 8).

6. En Hierarchy, selecciona el GameObject Main Camera (Cámara principal). Todavía estará en la capa por defecto (Default):

Esto es porque, aunque ya has creado una nueva capa, todavía no le has asignado la cámara principal o Main Camera a ella.

7. Agrega una componente Post Process Layer (Capa de posprocesamiento) a la cámara principal (Main Camera).

8. Cambia la propiedad Layer de Nothing (nada) a PostProcessingVolumes

Antes de que continúes con la configuración de tu volumen y el perfil vamos a echarle un vistazo muy rápido a lo que constituye anti-aliasing.

Aliasing es cuando el borde de un objeto parece estar dentado y el contorno de píxeles puede verse:

Anti-aliasing es un efecto de posprocesamiento que reduce la prominencia de estas líneas serradas al rodearlas con píxeles de matices similares. Hay muchos algoritmos diferentes para figurar qué píxeles deberían ajustarse y cuánto—tú vas a usar el más simple y efectivo.

1. Asegúrate de que la vista Game esté visible, así podrás ver los cambios que estás realizando en esta sección del tutorial.

2. En el componente Post Process Layer o capa de Posprocesamiento cambia el menú desplegable Mode (Modo) de No Anti-aliasing a Fast Approximate Anti-aliasing (FXAA) o Anti-alias de aproximación rápida.

3. Habilita la casilla Fast Mode (modo rápido) debajo del menú desplegable.

¡John Lemon ya se ve mucho mejor!

Ahora que la capa de posprocesamiento está configurada adecuadamente, puedes continuar a crear tu propio volumen.

Para crear un volumen de posprocesamiento:

1. En la ventana Hierarchy, ve a Create > Create Empty (Crear > Crear vacío).

2. Ponle «GlobalPost» al nuevo GameObject.

3. En el Inspector, configura la capa a PostProcessingVolumes (Volúmenes de posprocesamiento).

4. Cambia la propiedad Position (Posición) del componente Transform (Transformar) a (0, 0, 0). Este GameObject va a ser tu volumen global de posprocesamiento o global Post Process Volume.

5. Añade un componente Post Process Volume (Volumen de posprocesamiento) a GlobalPost.

6. Habilita la casilla Is Global (es global).

7. Haz click en el botón New a la extrema derecha de la propiedad Profile (perfil). Esto creará un nuevo perfil de posprocesamiento. Sus recursos serán almacenados en una carpeta nueva llamada MainScene_Profiles (Perfiles de la escena principal) en Assets > Scenes (Recursos > Escenas)

8. Ya que un nuevo Profile (perfil) ha sido configurado, verás más configuraciones disponibles en el componente Post Process Volume.

La subsección de Overrides (control manual) se refiere a los diferentes efectos que pueden invalidar cómo la cámara reproduce. Por defecto, un perfil no tiene efectos; por lo tanto, no hay nada en la subsección Overrides.

Para agregar el efecto de Ajuste cromático (Color Grading):

1. Haz clic en el botón Add effect (Agregar efecto) y selecciona Unity > Color Grading (Unity > Ajuste cromático).

El ajuste cromático es una manera de cambiar el brillo, el contraste y los colores de una vista reproducida. Puedes pensar sobre ello como el aplicar filtros en programas de procesamiento fotográfico o en Instagram. Para hacer que tu juego se vea mucho más tenebroso, vas a ajustar los colores y el brillo de la vista reproducida.

Ojo: Las configuraciones dentro de este componente son combinaciones rápidas al perfil de recurso; todos los cambios a la sección de Overrides (Control manual) cambiarán el perfil de recurso y no van a afectar el componente directamente.

2. Selecciona la flecha junto al Ajuste cromático o Color Grading para expandir sus configuraciones.

3. Primero, necesitas hacer un mapeo tonal o Tonemap de la escena. El mapeo tonal cambia el resultado del marco reproducido final de tal manera que sea mucho más fácil controlar las luces y las sombras.

Habilita la casilla Mode (Modo) en la subsección Tonemapping. En el menú desplegable, cambia su propiedad de nada a ACES. El mapeo tonal ACES es una manera estándar de la industria de aplicar el mapeo tonal. Ayuda a que tus proyectos tengan un aire más cinematográfico.

4. Como te habrás dado cuenta, la escena se ve muy oscura ahora. Esto se debe a que la exposición del marco reproducido final ACES es cero (para más información consulta la documentación). Una buena manera de arreglar esto es usar la herramienta Post-exposure o herramienta de posexposición. Esta es una buena manera de ajustar la exposición por defecto.

En la subsección Tone (Tono), habilita la casilla Post-exposure (Posexposición). Configura el valor a 1 para iluminar tu escena.

5. Puedes hacer tu escena un poco más tenebrosa cambiando los colores. En el medio de la sección de etalonaje o Color Grading, encuentra las ruedas cromáticas llamadas Trackballs.

6. Habilita las casillas Lift, Gamma y Gain debajo de cada rueda cromática.

Lift afecta los colores de las sombras, Gain cambia los toques de luz más brillantes y Gamma cubre todo lo que está en el medio (o en el medio de la gama) del color de tus imágenes.

7. Arrastra el círculo al centro de la rueda cromática para ajustar el color moderadamente en tu vista Game. Arrastra

• las ruedas cromáticas Lift y Gamma un poco hacia el azul;
• la rueda cromática Gain un poco hacia el amarillo.

Esto agregará profundidad a las sombras y calor a las luces

8. Colapsa el efecto Color Grading o etalonaje.

Tus luces son mucho más efectivas, pero aún no parecen reales. Añade el efecto Bloom para darles un resplandor muy agradable.

1. Haz clic en el botón Add effect… (Agregar efecto) y selecciona Unity > Bloom. Expande la sección efecto Bloom.

2. Selecciona la casilla de acceso rápido All (Todas) justo debajo de la sección title —esto va a habilitar todas las configuraciones de Bloom. Actualmente nada está resplandeciendo ya que la intensidad o Intensity no es lo suficientemente alta.

3. Configura la propiedad Intensity a 2,5 para crear un resplandor muy atractivo en las luces.

4. Puedes ver algunos objetos más brillantes que pienses puedan verse bien con un poco de resplandor. Puedes agregar el efecto Bloom usando la propiedad Threshold o umbral. Al disminuir este valor los píxeles que se agregan con el efecto son mucho menos resplandecientes.

Configura Threshold a 0,75 para añadir más resplandor a la escena.

5. Colapsa el efecto Bloom.

Ahora las luces se ven resplandecientes, pero es importante mantener el ambiente tenebroso de esta casa embrujada. Una buena opción para oscurecer algunas de las esquinas y grietas es usar el efecto de oclusión ambiental o Ambient Occlusion. Este efecto imita el efecto de la realidad cuando la luz no llega a las esquinas más estrechas al oscurecer estas áreas.

Para agregar este efecto:

1. Haz clic en el botón Add effect… y selecciona Unity > Ambient Occlusion. Expande la sección Ambient Occlusion.

2. Haz clic en la casilla de acceso rápido All (Todas) debajo del título de la sección para activar todas las herramientas que necesites.

3. Al igual que en Bloom, necesitas configurar la intensidad (Intensity) antes de que podamos verla funcionar. Configura la propiedad Intensity a 0,5 y crearás unas sombras muy lóbregas y espeluznantes en las esquinas de las habitaciones.

4. Puedes extender este efecto incluso más allá de la habitación usando el modificador de espesor o Thickness Modifier. Configura la propiedad Thickness Modifier a 3,5.

Ahora deberías poder ver un gran efecto sombrío extendiéndose detrás de algunos de los otros adornos en la escena.

5. Colapsa el efecto de oclusión ambiental o Ambient Occlusion.

Algunos efectos imitan cómo una cámara vería la escena. Los últimos efectos cambiarán cómo el lente de una cámara como esa funcionaría en realidad. Primero, vas a agregar el efecto Vignette o viñeta para oscurecer el contorno del mismo lente. Esto ayuda a enfocar la imagen en el jugador y hace que evoque una sensación de claustrofobia.

Para agregar este efecto:

1. Haz clic en el botón Add effect… y selecciona Unity > Vignette. Expande la sección Vignette.

2. Haz clic en la casilla de acceso rápido All (Todas) de Vignette para activar todas las herramientas que necesites.

3. Tal como Bloom y Oclusión ambiental (Ambient Occlusion), el efecto Vignette necesita que se configure Intensity. Esto va a determinar cuán lejos a lo largo de la pantalla se expandirá el efecto. Configura la propiedad Intensity a 0,5.

4. Puedes evocar una sensación aun más claustrofóbica y tenebrosa al incrementar el Smoothing (Moderación). La propiedad Smoothness, o uniformidad, determina la distancia sobre la cual el efecto se disipa hacia el centro de la pantalla. Configura la propiedad Smoothness a 0,3.

5. Colapsa el efecto viñeta o Vignette.

El efecto final que necesitas agregar es la distorsión óptica o Lens Distortion. Esto distorsiona el marco reproducido final y ayudará a que se sienta como si estuvieras viendo el juego a través de una cámara escondida.

Para agregar este efecto:

1. Haz clic en el botón Add effect… y selecciona Unity > Lens Distortion. Expande la sección Lens Distortion.

2. Haz clic en la casilla de acceso rápido All (Todas) de la propiedad Lens Distortion para activar todas las herramientas que necesites.

3. Al igual que en los otros efectos, Intensity, o la intensidad, controla la fuerza del efecto. Intenta deslizar la intensidad de un lado al otro para que te de una idea de cómo funciona el efecto. Luego, configura la propiedad Intensity a 35.

4. Cuando uses este efecto, a veces puede crear problemas visuales a los costados de la pantalla donde la imagen ha sido combada. Para arreglarlo, simplemente puedes hacer zoom hacia el marco reproducido para que no aparezcan los problemas en la pantalla.

Configura la propiedad Scale o escala a 1,1 para arreglarlo.

5. Guarda la escena.

¡Acabas de terminar de posprocesar!

En este tutorial manipulaste muchos de los efectos visuales para tu juego—no solo cómo se mueve la cámara, sino que también cómo se cambian las visuales del juego para que luzca muy profesional. Mira la diferencia visual que ha ocurrido:

Antes:

Después:

En el próximo tutorial explorarás la interfaz de usuario o UI de tu juego y crearás un final para el mismo.