Añadir una cámara en primera persona, una malla y una animación

Antes de empezar

Asegúrate de haber completado los siguientes objetivos de la sección anterior, Configuración del movimiento del personaje:

• Comprender cómo funcionan las acciones de entrada y los contextos de asignación de entradas.

• Configurar un personaje con movimientos hacia delante, hacia atrás, hacia la izquierda, hacia la derecha y de salto.

Controles de cámara en primera persona

Para cambiar la orientación de la cámara, se cambia el valor Rotación de la propiedad Transformar de la cámara. Para rotar en un espacio 3D, los objetos usan el cabeceo, el alabeo y la guiñada para controlar en qué dirección giran y a lo largo de qué eje. 

• Cabeceo: Controla la rotación a lo largo del eje horizontal (X). Al cambiarlo, un objeto rota hacia arriba o hacia abajo, de forma similar a asentir con la cabeza.

• Guiñada: Controla la rotación a lo largo del eje vertical (Y). Al cambiarla, un objeto rota hacia la izquierda o hacia la derecha, de forma similar a girar hacia la derecha o hacia la izquierda.

• Alabeo: Controla la rotación a lo largo del eje longitudinal (Z). Al cambiarlo, el objeto realiza un alabeo de un lado a otro, algo parecido a inclinar la cabeza hacia la derecha o hacia la izquierda.

En los juegos en primera persona, las cámaras suelen usar la guiñada y el cabeceo para controlar el movimiento. El alabeo puede ser relevante si estás programando un juego en el que necesites rotar un avión o una nave espacial o si necesitas simular asomarse por las esquinas.

Exploración del movimiento de cámara en blueprints

Abre BP_FirstPersonCharacter para ver la lógica de control de cámara del personaje por defecto en el editor de blueprints. En el grafo de eventos, fíjate en los dos nodos de la esquina arriba a la izquierda del grupo de nodo Cámara entrada. 

Al igual que con IA_Move, la acción de entrada IA_Look tiene un tipo de valor Axis2D, por lo que divide el movimiento en valores X e Y. Esta vez, x e Y se convierten en las entradas de guiñada y tono de la función personalizada de apuntar.

Haz doble clic en el nodo de función Apuntar para ver su lógica. Los nodos de función Añadir entrada de guiñada y Entrada de tono añaden los valores al personaje. 

Exploración de los componentes de personaje en primera persona 

Ve a la pestaña del visor de BP_FirstPersonCharacter para ver una previsualización en 3D del actor y sus componentes. 

En la pestaña Componentes , verás una jerarquía estructurada de componentes adjuntos que definen al personaje en el mundo. 

Los blueprints de personaje se instancian automáticamente con: 

• Un componente de cápsula que hace que el personaje colisione con objetos del mundo.

• Un componente de malla esquelética que activa animaciones y visualiza al personaje. En el panel Detalles , verás que este personaje utiliza SKM_Manny_Simple como recurso de malla esquelética.

• Un componente de movimiento del personaje que permite al personaje moverse.

Este personaje también tiene una segunda malla esquelética llamada FirstPersonMesh (que también usa SKM_Manny_Simple) que es un subordinado del componente de malla principal. En los juegos en primera persona, los personajes suelen tener mallas separadas para los contextos de primera y tercera persona. La malla en tercera persona solo es visible para otros jugadores o cuando el jugador está en una vista de tercera persona. La malla en primera persona es visible para el jugador cuando está en una vista de primera persona. 

La FirstPersonMesh tiene un componente de cámara subordinado llamado FirstPersonCamera. Esta cámara determina la vista en primera persona del jugador y gira con el personaje cuando este mira a su alrededor. En esta parte del tutorial, usarás C++ para instanciar una cámara en tu personaje durante el tiempo de ejecución y posicionarla para que coincida con la posición de esta cámara. 

Si quieres más información sobre los componentes de personaje, consulta la documentación sobre el marco de jugabilidad de personajes.

Implementación de entradas de vista en el código

Para implementar esta función de cámara en el código, al igual que el movimiento que implementaste en el paso anterior, vincularás la acción de entrada IA_Look a una función y luego, vincularás esa función a tu personaje. 

Declaración de la función Look() y de las variables

En Visual Studio, abre el archivo .h de tu personaje. 

Cuando hayas creado tu personaje en tiempo de ejecución, le dirás a UE que le añada un componente de cámara y posicione la cámara de forma dinámica. Para activar esta función, añade un nuevo #include para “Camera/CameraComponent.h”:  

#include "CoreMinimal.h"
#include "Camera/CameraComponent.h"
#include "GameFramework/Character.h"
#include "EnhancedInputComponent.h"
#include "EnhancedInputSubsystems.h" 
#include "InputActionValue.h"
#include "AdventureCharacter.generated.h"

En la sección protected de la cabecera, declara un nuevo puntero UInputAction llamado LookAction. Asigna a este puntero la misma macro UPROPERTY() que tienen MoveAction y JumpAction. Esto apuntará a la acción de entrada IA_Look.

// Look Input Actions
UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = Input)
UInputAction* LookAction;

En la sección public, declara una nueva función llamada Look() que tome una referencia constante FInputActionValue llamada Value. Asegúrate de añadir una macro UFUNCTION() a la función. 

// Handles Look Input
UFUNCTION()
void Look(const FInputActionValue& Value);

Después de la declaración de la función Look(), declara un nuevo puntero UCameraComponent llamado FirstPersonCameraComponent. Para exponer esta propiedad en Unreal Editor, añade un macro UPROPERTY() con los argumentos VisibleAnywhere y Category = Camera para que aparezca en la sección Cámara del panel Detalles. 

// First Person camera
UPROPERTY(VisibleAnywhere, Category = Camera)
UCameraComponent* FirstPersonCameraComponent;

Declara un FVector denominado FirstPersonCameraOffset. Utilizarás este desfase para colocar la cámara correctamente cuando configures el personaje. Inicialízalo para un FVector con los siguientes valores y los macros EditAnywhere y Category = Camera para que puedas ajustarlo en Unreal Editor si hace falta.

// Offset for the first-person camera
UPROPERTY(EditAnywhere, Category = Camera)
FVector FirstPersonCameraOffset = FVector(2.8f, 5.9f, 0.0f);

Necesitas un par de propiedades más para ajustar cómo aparecen los objetos en primer plano (como el cuerpo del personaje) en la vista de la cámara. Declara las siguientes dos variables float:  

• FirstPersonFieldOfView: el campo de visión horizontal (en grados) que debe usar esta cámara al renderizar los componentes primitivos con la etiqueta FirstPerson. Establécelo en 70.0f.  

• FirstPersonScale: la escala que debe aplicar esta cámara a los componentes primitivos con la etiqueta FirstPerson. Establécelo en 0.6f.   

Asigna a estas propiedades una macro UPROPERTY con los especificadores EditAnywhere y Category = Camera.    

// First-person primitives field of view
UPROPERTY(EditAnywhere, Category = Camera)
float FirstPersonFieldOfView = 70.0f;

// First-person primitives view scale
UPROPERTY(EditAnywhere, Category = Camera)
float FirstPersonScale = 0.6f;

Por último, declara un nuevo puntero USkeletalMeshComponent denominado FirstPersonMeshComponent. Dale una macro UPROPERTY() con los argumentos VisibleAnywhere y Category = Mesh. 

// First-person mesh, visible only to the owning player
UPROPERTY(VisibleAnywhere, Category = Mesh)
USkeletalMeshComponent* FirstPersonMeshComponent;

Ya has configurado las declaraciones para lo siguiente: 

• Malla en primera persona (que se correlaciona con la FirstPersonMesh hija que viste en el blueprint).

• Cámara

• Función Look().

• Acción de entrada IA_Look.

El archivo .h de tu personaje ahora debería tener este aspecto:

// Copyright Epic Games, Inc. All Rights Reserved.

#pragma once

#include "CoreMinimal.h"
#include "Camera/CameraComponent.h"
#include "GameFramework/Character.h"
#include "EnhancedInputComponent.h"
#include "EnhancedInputSubsystems.h" 
#include "InputActionValue.h"

Añadir un entrada de vista con Look()

Abre el archivo .cpp de tu personaje para implementar la lógica de entrada de cámara del blueprint de personaje usando la función Look().

Al igual que sucede con IA_Move, IA_Look devuelve un valor FVector2D cuando se activa. Añade una nueva definición de función para Look(). Dentro de la función, obtén el valor del FInputActionValue dentro de un nuevo FVector2D denominado LookAxisValue.

void AAdventureCharacter::Look(const FInputActionValue& Value)
{
	const FVector2D LookAxisValue = Value.Get<FVector2D>();
}

A continuación, en una instrucción if, comprueba si el controlador es válido. 

De ser así, llama a AddControllerYawInput() y AddControllerPitchInput(), pasándoles los valores LookAxisValue.X y LookAxisValue.Y respectivamente. Tu función Look() completa debería parecerse a esto:

void AAdventureCharacter::Look(const FInputActionValue& Value)
{
	const FVector2D LookAxisValue = Value.Get<FVector2D>();

	if (Controller)
	{
		AddControllerYawInput(LookAxisValue.X);
		AddControllerPitchInput(LookAxisValue.Y);
	}
}

Asignar una función de vista a una entrada con SetupPlayerInputComponent

Dentro de SetupPlayerInputComponent(), de forma similar a las acciones de movimiento, vincularás la función Look() a la acción de entrada LookAction. 

EnhancedInputComponent->BindAction(LookAction, ETriggerEvent::Triggered, this, &AAdventureCharacter::Look);

Ahora tu función SetupPlayerInputComponent() debería parecerse a esto:

// Called to bind functionality to input
void AAdventureCharacter::SetupPlayerInputComponent(UInputComponent* PlayerInputComponent)
{
	// Check the UInputComponent passed to this function and cast it to an UEnhancedInputComponent
	if (UEnhancedInputComponent* EnhancedInputComponent = CastChecked<UEnhancedInputComponent>(PlayerInputComponent))
	{
		// Bind Movement Actions
		EnhancedInputComponent->BindAction(MoveAction, ETriggerEvent::Triggered, this, &AAdventurenCharacter::Move);

		// Bind Look Actions

Guarda el código y compila haciendo clic en Compilar en Visual Studio. 

Cómo asignar una acción LookInput en el blueprint

Por último, asigna una acción de entrada a la nueva propiedad Look Action del blueprint del personaje.

Para asignar controles de aspecto a tu personaje, sigue estos pasos:

1. En Unreal Editor, abre tu blueprint del personaje.

2. En el panel Componentes, verifica que el componente raíz BP_[NombreDelPersonaje] esté seleccionado.

3. En el panel Detalles, en la sección Entrada, ajusta Look Action en IA_Look.

   

4. Compila y guarda el blueprint.

Probar los movimientos de vista

Si pulsas el botón de reproducción para probar el juego, podrás mirar a tu alrededor y mover a tu personaje en la dirección que quieras. 

Ten en cuenta que, aunque la vista en el juego parece provenir de una cámara en primera persona, el personaje no tiene todavía un componente de cámara. En su lugar, Unreal Engine simula una vista desde el centro del componente de cápsula de tu personaje. En el siguiente paso, aprenderás a cambiar esto añadiendo una cámara a tu clase personaje.

Creación de componentes en tiempo de ejecución

A continuación, terminarás de crear la cámara y la malla de primera persona de tu personaje instanciando los punteros FirstPersonCameraComponent y FirstPersonMeshComponent que declaraste en el archivo de cabecera.

Para empezar, abre el archivo .cpp de tu personaje. 

En la parte superior del archivo, verás el constructor de clase (AAdventureCharacter() en este tutorial). Esta clase se ejecuta cuando el objeto se asigna en memoria y establece los valores predeterminados para tu personaje. Aquí es donde añadirás otros componentes. 

Cómo crear un componente de cámara

Para añadir componentes al personaje, utilizarás la función de plantilla CreateDefaultSubobject(). Devuelve un puntero al nuevo componente y recibe los siguientes argumentos:

CreateDefaultSubobject<type>(TEXT(“Name”));

Donde type es el tipo de subobjeto que estás creando y Name es el nombre interno que utiliza Unreal Engine para identificar el subobjeto y mostrarlo en el editor.

En el constructor de clase, establece el puntero FirstPersonCameraComponent al resultado de llamar a CreateDefaultSubobject() de tipo UCameraComponent. En el argumento TEXT, asigna al objeto el nombre ”FirstPersonCamera”. 

FirstPersonCameraComponent = CreateDefaultSubobject<UCameraComponent>(TEXT("FirstPersonCamera"));

Esto crea un objeto de cámara por defecto como hijo de la clase Character.  A continuación, para garantizar que la cámara se haya instanciado correctamente, comprueba que FirstPersonCameraComponent no sea nulo. 

// Create a first person camera component.
FirstPersonCameraComponent = CreateDefaultSubobject<UCameraComponent>(TEXT("FirstPersonCamera"));
check(FirstPersonCameraComponent != nullptr);

Cómo crear un componente de malla

Establece FirstPersonMeshComponent en otra llamada a la función CreateDefaultSubobject. Esta vez, utiliza USkeletalMeshComponent como tipo y asigna el nombre «FirstPersonMesh». No olvides añadir una comprobación después.

// Create a first person mesh component for the owning player.
FirstPersonMeshComponent = CreateDefaultSubobject<USkeletalMeshComponent>(TEXT("FirstPersonMesh"));
	check(FirstPersonMeshComponent != nullptr);

Cómo adjuntar y configurar la malla 

Ahora que se ha creado la malla, adjúntala al personaje y habilita el renderizado en primera persona sobre ella. 

La función SetupAttachment() adjunta un componente de escena a otro y establece una relación padre-hijo en la jerarquía de componentes.   

Llama a la función SetupAttachment() en el objeto al que apunta FirstPersonMeshComponent y pásale el componente padre. En este caso, el padre debería ser la malla esquelética predeterminada del personaje, que puedes obtener mediante GetMesh(). 

// Attach the FirstPerson mesh to the Skeletal Mesh
FirstPersonMeshComponent->SetupAttachment(GetMesh());

En el archivo de cabecera del personaje, has declarado un campo de visión de la cámara y la escala que se utilizará para los componentes cercanos a la cámara. Para que estas propiedades de cámara se apliquen a la malla en primera persona, establece la propiedad FirstPersonPrimitiveType de la malla en FirstPerson. 

FirstPersonMeshComponent->FirstPersonPrimitiveType = EFirstPersonPrimitiveType::FirstPerson;

Cómo establecer la visibilidad de la malla

Hasta ahora, tu personaje tiene una malla esquelética de primera y tercera persona que se solapan durante el juego. Sin embargo, la malla de primera persona debería ser invisible para otros jugadores y la malla de tercera persona debería ser invisible para ti, el jugador.

Para configurar la visibilidad de la malla y las sombras en primera y tercera persona, sigue estos pasos: 

1. En el constructor de clase del personaje, después de establecer el tipo primitivo de la malla de primera persona, establece el FirstPersonPrimitiveType del componente de malla de tercera persona en WorldSpaceRepresentation.  

   C++

   GetMesh()->FirstPersonPrimitiveType = EFirstPersonPrimitiveType::WorldSpaceRepresentation;
   

   Copy full snippet(1 line long)

   Este tipo primitivo es para los componentes que ven otros jugadores. Establece automáticamente la propiedad OwnerNoSee del componente en false y lo vuelve invisible para el jugador. Sin embargo, la malla sigue proyectando una sombra. 

2. En BeginPlay(), después de la comprobación del puntero global del motor, llama a SetOnlyOwnerSee() en FirstPersonMeshComponent y pasa true para que la malla de primera persona solo sea visible para el jugador propietario.   

   C++

   // Only the owning player sees the first-person mesh
   FirstPersonMeshComponent->SetOnlyOwnerSee(true);

   Copy full snippet(2 lines long)

Cómo adjuntar el componente de cámara

En el constructor del personaje, utiliza otra llamada a SetupAttachment() para adjuntar el componente de cámara a la malla de primera persona. En esta ocasión, vamos a añadir una sobrecarga opcional para especificar una posición exacta (un acople) en la malla a la que debería adjuntarse el componente.

La malla SKM_Manny_Simple utilizada en este tutorial tiene una colección de acoples (o huesos) predefinidos que se utilizan para la animación. Puedes hacer referencia a los acoples en el código utilizando una cadena FName. Lo mejor es colocar la cámara cerca de la cabeza del personaje, por lo que pasarás el nombre del acople de Cabeza a SetupAttachment para adjuntar la cámara a ese acople. Más adelante, tendrás que acercar la cámara a los ojos del personaje.

// Attach the camera component to the first-person Skeletal Mesh.
FirstPersonCameraComponent->SetupAttachment(FirstPersonMeshComponent, FName("head"));

Para obtener más información sobre los acoples y cómo se crean, consulta la sección Acoples de malla esquelética.

Cómo configurar la cámara

Cuando inicializaste el componente de cámara, lo adjuntaste al acople de la cabeza del personaje. Sin embargo, la cámara parece más precisa cuando se sitúa en los ojos del personaje. La cámara también apunta hacia abajo de forma predeterminada, por lo que debes rotarla por detrás de la cabeza del personaje.

Para mover y rotar la cámara en su posición, llama a SetRelativeLocationAndRotation(), pasa el FirstPersonCameraOffset y un nuevo FRotator establecido en (0.0f, 90.0f, -90.0f). 

// Position the camera slightly above the eyes and rotate it to behind the player's head
FirstPersonCameraComponent->SetRelativeLocationAndRotation(FirstPersonCameraOffset, FRotator(0.0f, 90.0f, -90.0f));

Para que la cámara rote con el personaje durante la partida, establece la propiedad bUsePawnControlRotation de FirstPersonCameraComponent en true. Esto hace que la cámara herede la rotación de su peón padre, de modo que cuando el personaje gire, la cámara lo siga. 

// Enable the pawn to control camera rotation.
FirstPersonCameraComponent->bUsePawnControlRotation = true;

Por último, añade el renderizado de la escala de primera persona y el campo de visión de primera persona a la cámara. Establece las propiedades bEnableFirstPersonFieldOfView y bEnableFirstPersonScale en true. A continuación, asigna el FOV predeterminado y los valores de escala que has declarado antes.  

// Enable first-person rendering and set default FOV and scale values
FirstPersonCameraComponent->bEnableFirstPersonFieldOfView = true;
FirstPersonCameraComponent->bEnableFirstPersonScale = true;
FirstPersonCameraComponent->FirstPersonFieldOfView = FirstPersonFieldOfView;
FirstPersonCameraComponent->FirstPersonScale = FirstPersonScale;

El constructor de tu personaje debería tener el siguiente aspecto:

// Sets default values
AAdventureCharacter::AAdventureCharacter()
{
	// Set this character to call Tick() every frame.  You can turn this off to improve performance if you don't need it
	PrimaryActorTick.bCanEverTick = true;

	// Create a first person camera component
	FirstPersonCameraComponent = CreateDefaultSubobject<UCameraComponent>(TEXT("FirstPersonCamera"));
	check(FirstPersonCameraComponent != nullptr);

Guarda el código y compílalo haciendo clic en Compilar en Visual Studio. 

Asignar mallas en Unreal Editor

Ya has configurar los controles de cámara, pero aún te queda un paso: utiliza el editor para añadir los recursos de malla esquelética a las variables que declaraste en el código. 

Para añadir una malla esquelética a un blueprint de personaje, sigue estos pasos:

1. En Unreal Editor, si aún no lo has hecho, abre tu blueprint de personaje.

2. En el panel Componen tes, verifica que el componente raíz BP_[NombreDelPersonaje] esté seleccionado.

3. En el panel Detalles, en la sección Malla, tu personaje tiene dos ranuras SkeletalMeshAsset en vez de una porque has creado FirstPersonMeshComponent en el código. Haz clic en la flecha del menú desplegable de cada propiedad y selecciona SKM_Manny_Simple para ambas mallas. 

   

   Cuando estableces el FirstPersonMeshComponent, tu cámara debería colocarse detrás de la cabeza del personaje.

4. Guarda el blueprint y haz clic en Compilar.

Si reproduces tu juego y miras hacia abajo, deberías ver la malla de primera persona de tu personaje. La malla rota a medida que mires a su alrededor, y tu cámara coincide con el movimiento. La malla de tercera persona está oculta durante el tiempo de ejecución y solo podrán verla los demás jugadores. Sin embargo, tu personaje sigue en una pose T estática, así que a continuación utiliza un blueprint de animación para añadir animaciones a tu personaje y terminar de darle vida.  

Añadir animaciones a tu personaje

En el código, puedes acceder a la lógica de animación a través de instancias de la clase UAnimInstance, que es un controlador que determina qué animaciones se mezclan y se reproducen en una malla esquelética en función del estado y otras variables. Los blueprints de animación también derivan de UAnimInstance, y puedes hacer referencia a ellos en C++ con el tipo UAnimBlueprint. 

La creación de una clase de instancia de animación queda fuera del alcance de este tutorial; en su lugar, añadirás el blueprint de animación precompilado de la plantilla de primera persona a tu personaje. Este blueprint incluye las animaciones y la lógica que necesita tu personaje para reproducir diferentes animaciones de movimiento e inactividad.

En Unreal Engine, las animaciones se establecen malla por malla, por lo que necesitarás animaciones independientes para las mallas de primera y tercera persona. Como la malla de tercera persona está oculta al empezar el juego, solo tienes que establecer animaciones en la malla de primera persona. 

Para añadir una propiedad de animación y un blueprint de animación a tu personaje, sigue los siguientes pasos:

1. En la parte superior del archivo .h de tu personaje, declara la clase UAnimBlueprint. Esta clase representa los blueprints de animación de tu proyecto.

   C++

   class UAnimBlueprint;
   class UInputMappingContext;
   class UInputAction;
   class UInputComponent;

   Copy full snippet(4 lines long)

2. A continuación, en la sección public, declara un nuevo puntero a UAnimBlueprint con el nombre FirstPersonDefaultAnim. Asígnale la macro UCLASS() con EditAnywhere y Category = Animation.

   C++

   // First Person animations
   UPROPERTY(EditAnywhere, Category = Animation)
   UAnimBlueprint* FirstPersonDefaultAnim;

   Copy full snippet(3 lines long)

3. En el archivo .cpp de tu personaje, en BeginPlay(), llama a FirstPersonMeshComponent->SetAnimInstanceClass(). Aunque no hayas definido una clase de instancia de animación en el código, puedes generar una clase a partir del blueprint de animación mediante GeneratedClass.

   C++

   // Only the owning player sees the first person mesh.
   FirstPersonMeshComponent->SetOnlyOwnerSee(true);
   
   // Set the animations on the first person mesh.
   FirstPersonMeshComponent->SetAnimInstanceClass(FirstPersonDefaultAnim->GeneratedClass);

   Copy full snippet(5 lines long)

4. Guarda tu código y compílalo desde Visual Studio.

5. En Unreal Editor, vuelve a abrir blueprint del personaje y selecciona el componente raíz BP_[CharacterName].

6. En el panel Detalles, en Animación, establece First Person Default Anim como ABP_Unarmed.

   

7. Guarda el blueprint y compílalo.

Pon a prueba tu personaje

Pulsa reproducir para probar el juego. Si miras hacia abajo, verás que la malla de primera persona se anima mientras te mueves. Intenta moverte y saltar para ver las distintas animaciones que controla este blueprint.   

Siguiente

En la siguiente sección, aprenderás a crear un objeto para que tu personaje lo recoja y lo utilice.

Administrar elementos y datos

Descubre cómo utilizar las estructuras de datos de elementos, los recursos de datos y las tablas de datos para definir elementos y almacenar y organizar los datos de elementos para aumentar su escalabilidad.

Código completo

A continuación encontrarás el código completo creado en esta sección:

// Copyright Epic Games, Inc. All Rights Reserved.

#pragma once

#include "CoreMinimal.h"
#include "Camera/CameraComponent.h"
#include "GameFramework/Character.h"
#include "EnhancedInputComponent.h"
#include "EnhancedInputSubsystems.h" 
#include "InputActionValue.h"

#include "AdventureCharacter.h"

// Sets default values
AAdventureCharacter::AAdventureCharacter()
{
	// Set this character to call Tick() every frame.  You can turn this off to improve performance if you don't need it
	PrimaryActorTick.bCanEverTick = true;

	// Create a first-person camera component
	FirstPersonCameraComponent = CreateDefaultSubobject<UCameraComponent>(TEXT("FirstPersonCamera"));