Unreal Engine: Creando Interactividad con el Sistema de Interacciones Basado en Componentes

🚀 Introducción al Sistema de Interacciones en Unreal Engine

En el desarrollo de videojuegos, la interactividad es clave para la inmersión y la jugabilidad. Un sistema de interacción bien diseñado permite a los jugadores manipular el entorno, recoger objetos, hablar con personajes, abrir puertas y mucho más. En Unreal Engine, podemos lograr esto de muchas maneras, pero una de las más robustas y escalables es a través de un enfoque basado en componentes y interfaces.

Este tutorial te enseñará a construir un sistema de interacción genérico que puedes reutilizar en una multitud de proyectos. Nos centraremos en la creación de un Componente de Interacción que detectará objetos interactuables y un Componente Interactuable que definirá cómo un objeto responde a la interacción. ¡Prepárate para llevar la interactividad de tus juegos al siguiente nivel! 🎮

¿Por qué un Sistema Basado en Componentes?

La arquitectura basada en componentes es fundamental en Unreal Engine. Nos permite:

• Modularidad: Añadir o quitar funcionalidades de un actor sin modificar su clase base.
• Reusabilidad: Compartir la lógica de interacción entre múltiples actores, desde una palanca hasta un cofre, simplemente añadiendo el componente.
• Flexibilidad: Extender fácilmente el sistema para nuevos tipos de interacciones sin refactorizar el código existente.
• Mantenibilidad: Aislar la lógica de interacción en un componente facilita la depuración y actualización.

🛠️ Configuración Inicial: Las Interfaces de Interacción

Las interfaces son el corazón de nuestro sistema. Nos permitirán definir un 'contrato' de cómo deben interactuar los objetos, sin preocuparnos por su implementación específica. Cualquier actor que implemente una interfaz debe proporcionar una implementación para todas sus funciones.

1. Creación de la Interfaz IInteractuable

Primero, necesitamos una interfaz que todos los objetos interactuables implementarán. Esta interfaz definirá las funciones que se llamarán cuando un jugador intente interactuar con ellos.

1. En el Content Browser, haz clic derecho y selecciona Blueprints > Blueprint Interface.
2. Nombra la interfaz BPI_Interactuable.
3. Abre BPI_Interactuable. En la sección Functions (lado izquierdo), añade las siguientes funciones:
   • OnInteractionHoverBegin (Sin entradas/salidas): Se llamará cuando el jugador empiece a 'apuntar' a un objeto interactuable.
   • OnInteractionHoverEnd (Sin entradas/salidas): Se llamará cuando el jugador deje de 'apuntar' a un objeto interactuable.
   • OnInteract (Input: InteractorActor de tipo Actor Object Reference): Se llamará cuando el jugador interactúe con el objeto. El InteractorActor será el actor que inició la interacción (ej. el jugador).

2. Creación de la Interfaz IInteractionDetector

Aunque no es estrictamente necesario para la funcionalidad básica, una interfaz para el detector de interacción puede ser útil para futuras extensiones o para comunicar el estado del detector. Por ahora, la crearemos simple.

1. Crea otra Blueprint Interface y nómbrala BPI_InteractionDetector.
2. Añade una función:
   • SetCurrentInteractable (Input: InteractableActor de tipo Actor Object Reference): Para indicar qué actor interactuable está siendo actualmente apuntado por el detector.

💡 Creando el Componente de Interacción (Interaction Detector Component)

Este componente será responsable de detectar objetos BPI_Interactuable en el mundo y llamar a sus funciones de interfaz correspondientes. Lo añadiremos al Player Character o a cualquier actor que necesite interactuar con el entorno.

1. Creación del Blueprint del Componente

1. En el Content Browser, haz clic derecho y selecciona Blueprint Class.
2. En el diálogo Pick Parent Class, busca ActorComponent y selecciónalo.
3. Nombra el componente BPC_InteractionDetector.

2. Configuración del BPC_InteractionDetector

Abre BPC_InteractionDetector. Necesitaremos algunas variables y lógica para la detección.

Variables Necesarias:

• InteractionRange (Float, por defecto: 250.0): La distancia máxima a la que se puede detectar un objeto interactuable.
• TraceChannel (Enum: ECollisionChannel, por defecto: Visibility): El canal de colisión que usará el line trace para detectar objetos.
• CurrentInteractable (Actor Object Reference): Almacena el actor BPI_Interactuable que está siendo actualmente apuntado.
• bDebugTrace (Boolean, por defecto: true): Para visualizar el line trace durante el desarrollo.

Lógica del Event Tick:

En el Event Tick de este componente, implementaremos la lógica principal de detección:

1. Realizar un Line Trace By Channel desde la posición de la cámara (o un punto de origen relevante en el Owner Actor) hacia adelante, a la distancia de InteractionRange.
   • Start: GetWorldLocation del Owner Actor (o una Socket Location específica).
   • End: Start + (GetForwardVector del Owner Actor * InteractionRange).
   • Trace Channel: TraceChannel (nuestra variable).
   • Draw Debug Type: For Duration (si bDebugTrace es true).
2. Manejo de la Detección:
   • Si el Line Trace golpea un objeto:
     • Obtener el Hit Actor.
     • Comprobar si el Hit Actor implementa la interfaz BPI_Interactuable (Does Implement Interface node).
     • Si sí implementa la interfaz:
       • Guardar el Hit Actor en CurrentInteractable.
       • Si CurrentInteractable es diferente al PreviousInteractable (un variable temporal para el frame anterior):
         • Llamar OnInteractionHoverEnd en PreviousInteractable (si no es nulo).
         • Llamar OnInteractionHoverBegin en CurrentInteractable.
         • Actualizar PreviousInteractable a CurrentInteractable.
       • Actualizar CurrentInteractable.
     • Si no implementa la interfaz:
       • Si CurrentInteractable no es nulo, llamar OnInteractionHoverEnd en CurrentInteractable.
       • Setear CurrentInteractable a None.
       • Actualizar PreviousInteractable a None.
   • Si el Line Trace NO golpea nada:
     • Si CurrentInteractable no es nulo, llamar OnInteractionHoverEnd en CurrentInteractable.
     • Setear CurrentInteractable a None.
     • Actualizar PreviousInteractable a None.

3. Función de Interacción (RequestInteract)

Crearemos una función pública que pueda ser llamada por el jugador (ej. al presionar un botón de interacción).

1. Añade una Custom Event o Function llamada RequestInteract.
2. En esta función:
   • Comprueba si CurrentInteractable es válido (Is Valid?).
   • Si es válido, llama a la función OnInteract del BPI_Interactuable en CurrentInteractable, pasando GetOwner como InteractorActor.

🎯 Creando un Objeto Interactuable de Ejemplo

Ahora que tenemos nuestro detector, vamos a crear un objeto simple que pueda ser interactuado.

1. Creación del Blueprint Interactuable

1. Crea un nuevo Blueprint Class basado en Actor. Nómbralo BP_Door.
2. Abre BP_Door.
3. En la sección Class Settings (barra de herramientas superior), busca Interfaces y añade BPI_Interactuable.
   • Verás que ahora aparecen las funciones OnInteractionHoverBegin, OnInteractionHoverEnd y OnInteract en la sección Interfaces del My Blueprint panel. Haz doble clic en cada una para implementar su evento.

2. Implementación de la Lógica de Interacción en BP_Door

Vamos a hacer que la puerta cambie de color cuando el jugador la apunte y se abra cuando interactúe.

a) Añadir Componentes Visuales

1. Añade un Static Mesh Component (ej. un cubo escalado para parecer una puerta).
2. Crea un Material simple (M_Door_Base) con un color base. Y otro Material (M_Door_Hover) con un color diferente (ej. verde brillante). Asigna M_Door_Base al Static Mesh de la puerta.

b) Implementar OnInteractionHoverBegin

1. En el evento OnInteractionHoverBegin (desde la interfaz):
   • Arrastra el Static Mesh de la puerta y usa Set Material.
   • Conecta el Material M_Door_Hover.

c) Implementar OnInteractionHoverEnd

1. En el evento OnInteractionHoverEnd:
   • Arrastra el Static Mesh de la puerta y usa Set Material.
   • Conecta el Material M_Door_Base.

d) Implementar OnInteract

1. En el evento OnInteract:
   • Añade un nodo Print String para ver un mensaje (ej. "Puerta abierta por: " + InteractorActor.GetName).
   • Para simular abrir la puerta, podrías usar un Timeline para rotar o mover el Static Mesh. Para este ejemplo, simplemente la 'destruiremos' o la moveremos fuera de la vista.
   • Una manera sencilla es usar un FlipFlop para alternar entre abrir y cerrar (rotar o mover) la puerta. Si es el primer interact (A), abrir; si es el segundo (B), cerrar. O simplemente Destroy Actor para una interacción de un solo uso.
   • Ejemplo de apertura simple (rotación):
     • Desde el evento OnInteract, añade un Timeline.
     • Dentro del Timeline, crea una pista Float de 0 a 1 en 1 segundo.
     • Usa Set Relative Rotation en el Static Mesh de la puerta, interpolando desde su rotación actual a una rotación abierta (ej. Z +90 grados) usando un Lerp (Rotator) y el valor del Timeline como Alpha.

BEGIN OBJECT_BP_DOOR
  EVENT OnInteract (InteractorActor)
    SET PlayTimeline = true
    PlayTimeline (Direction: Forward)

  TIMELINE OpenCloseDoor (Update)
    LERP Rotator A(RelativeRotation), B(0,0,90), Alpha(TimelineOutputFloat)
    SET Relative Rotation (StaticMeshComponent, LerpResult)

  TIMELINE OpenCloseDoor (Finished)
    // Opcional: acciones al finalizar la apertura/cierre
END OBJECT_BP_DOOR

🚶 Integrando el Detector en el Personaje del Jugador

Ahora necesitamos que nuestro Player Character use el BPC_InteractionDetector.

1. Añadir el Componente al Player Character

1. Abre tu Player Character Blueprint (ej. BP_ThirdPersonCharacter o BP_FirstPersonCharacter).
2. En la ventana Components, haz clic en Add y busca BPC_InteractionDetector. Añádelo.

2. Configurar la Lógica de Entrada

1. En el Event Graph de tu Player Character, busca un Input Action para la interacción (ej. E key o un botón del gamepad).
2. Desde el evento Input Action, arrastra el BPC_InteractionDetector y llama a la función RequestInteract.

3. Pruebas y Ajustes

• Coloca varias instancias de BP_Door en tu nivel.
• Juega el nivel y acércate a las puertas. Deberías ver cómo cambian de color (hover effect).
• Presiona tu botón de interacción (E por defecto si usaste el ThirdPersonTemplate). La puerta debería reaccionar (rotar/abrirse).
• Ajusta InteractionRange y TraceChannel en tu BPC_InteractionDetector según sea necesario.

✨ Mejoras y Extensiones del Sistema

Este sistema es solo el comienzo. Aquí hay algunas ideas para llevarlo más allá:

1. Componente Base de Interacción (BPC_InteractableBase)

Para facilitar la creación de nuevos objetos interactuables, puedes crear un Actor Component base llamado BPC_InteractableBase.

1. Crea un Blueprint Class de tipo ActorComponent, nómbralo BPC_InteractableBase.
2. En sus Class Settings, añade la interfaz BPI_Interactuable.
3. Aquí puedes implementar la lógica común para todos los interactuables, como el cambio de material al hacer hover.
   • Haz que el BPC_InteractableBase tenga una variable InteractableMesh (Static Mesh Component Reference) que apunte al mesh que debe cambiar de color.
   • Implementa OnInteractionHoverBegin y OnInteractionHoverEnd en este componente para cambiar el material de InteractableMesh.
4. Ahora, en lugar de implementar la interfaz BPI_Interactuable directamente en BP_Door, puedes añadir el BPC_InteractableBase a BP_Door y vincular su InteractableMesh al Static Mesh de la puerta. BP_Door solo necesitará implementar OnInteract con su lógica específica.

2. Múltiples Tipos de Interacción

Actualmente, solo tenemos un OnInteract. Podrías extender la interfaz BPI_Interactuable para incluir:

• OnUse
• OnExamine
• OnPickup

Esto requeriría que el BPC_InteractionDetector tuviera diferentes RequestUse, RequestExamine, etc., y quizás un sistema de Input más sofisticado.

3. Feedback Visual y Sonoro

• Widgets UMG: Muestra un pequeño widget en pantalla (ej. "Presiona E para Interactuar") cuando CurrentInteractable sea válido.
• Sonidos: Reproduce un sonido al hacer hover y otro al interactuar.
• Partículas: Genera efectos de partículas al interactuar.

4. Interacciones Contextuales

Algunos objetos pueden tener diferentes interacciones dependiendo del estado del jugador o del propio objeto (ej. una puerta cerrada vs. una abierta).

• Puedes añadir una variable EInteractionType (Enum) a tu BPC_InteractableBase que defina el tipo de interacción (abrir, cerrar, recoger, usar, etc.).
• El OnInteract podría entonces ramificarse (Switch on EInteractionType) para realizar la acción correcta.

{
  "EInteractionType": [
    "None",
    "Open",
    "Close",
    "Pickup",
    "Use",
    "Talk",
    "Examine"
  ]
}

5. Interacciones Multijugador

Para juegos multijugador, la lógica de interacción debe ser replicada. Esto implica:

• El RequestInteract debe ser una función Server (Run on Server).
• La lógica de OnInteract en el objeto interactuable también podría necesitar ser ejecutada en el Server y replicar cualquier cambio a los clientes (ej. si la puerta se abre, todos los clientes deben verla abierta).

✅ Conclusión

Has construido un sistema de interacción robusto y flexible en Unreal Engine utilizando interfaces y componentes. Esta arquitectura te permitirá crear una gran variedad de elementos interactivos en tus juegos de una manera organizada y eficiente. Recuerda que la clave es la modularidad y la reutilización. Experimenta con diferentes tipos de interacciones y expande el sistema para adaptarlo a las necesidades específicas de tu proyecto.

¡Felicidades, tu juego es ahora mucho más interactivo! 🎉