Unreal Engine: Creando un Sistema de Teletransporte con Portales Dinámicos y FX

🚀 Introducción al Sistema de Teletransporte con Portales

El teletransporte es una mecánica fascinante que puede añadir una capa extra de complejidad y diversión a tus juegos. Desde la exploración rápida hasta la resolución de puzles, los portales ofrecen una gran versatilidad. En este tutorial, nos sumergiremos en cómo construir un sistema de teletransporte con portales dinámicos en Unreal Engine 5, completo con efectos visuales para una experiencia más pulida.

¿Qué aprenderemos en este tutorial?

• Configurar Actores de Portal utilizando Blueprints.
• Implementar la lógica de teletransporte entre portales.
• Crear efectos visuales (FX) para la activación y desactivación de portales.
• Manejar la persistencia y activación de portales en el mundo del juego.

🛠️ Configuración Inicial del Proyecto

Antes de sumergirnos en la lógica, necesitamos preparar nuestro proyecto en Unreal Engine 5.

1. Crear un Nuevo Proyecto

Si aún no tienes un proyecto, crea uno nuevo. Puedes elegir la plantilla 'Third Person' o 'First Person' para tener un personaje jugable base. Asegúrate de que sea un proyecto de Blueprint o C++ si planeas extenderlo con código.

2. Estructura de Carpetas

Una buena organización es clave. Crea las siguientes carpetas en Content:

• Portals
  • Blueprints
  • Materials
  • Meshes
  • FX

Esto nos ayudará a mantener nuestro proyecto limpio y fácil de navegar.

🚪 Creando el Actor Base del Portal

Comenzaremos creando un Blueprint de Actor que servirá como nuestro portal. Este será el fundamento de nuestro sistema.

1. Blueprint BP_PortalBase

1. En la carpeta Portals/Blueprints, haz clic derecho y selecciona Blueprint Class. Elige Actor como clase padre y nómbralo BP_PortalBase.
2. Abre BP_PortalBase.
3. Añade los siguientes componentes:
   • Static Mesh (nómbralo PortalFrame): Este será el marco visual de tu portal. Por ahora, puedes usar una forma básica como un Cube o un Cylinder y escalarlo para que parezca un marco de portal. Más adelante, lo reemplazaremos con un mesh personalizado.
   • Box Collision (nómbralo TeleportVolume): Este componente detectará cuando el jugador entra al portal. Escálalo para que cubra el área donde el jugador debe teletransportarse.
   • Scene Capture Component 2D (nómbralo PortalView): Este componente capturará la vista a través del portal y la renderizará en una textura. Deshabilita Primitive Render si está activo, ya que queremos que capture el mundo, no sus propios primitivos.

2. Configuración de TeleportVolume

Selecciona el componente TeleportVolume y en el panel de Details:

• Scroll hacia abajo hasta Collision.
• En Collision Presets, selecciona OverlapAllDynamic.
• Asegúrate de que Generate Overlap Events esté activado.
• En Events, haz clic en + junto a On Component Begin Overlap y On Component End Overlap.

3. Variables Necesarias

Vamos a añadir algunas variables para controlar el comportamiento del portal. En la pestaña Variables:

• TargetPortal (Type: BP_PortalBase Object Reference): Esta variable almacenará una referencia al portal de destino al que este portal teletransportará al jugador.
• PortalMaterial (Type: Material Instance Dynamic Object Reference): Almacenará la instancia de material dinámico que usaremos para mostrar la vista del portal.
• RenderTexture (Type: Texture Render Target 2D Object Reference): Referencia a la textura a la que PortalView renderizará la escena.
• bIsActive (Type: Boolean): Indica si el portal está activo y listo para teletransportar.

🎨 Creando Materiales y Render Targets

Para que nuestros portales muestren la vista del otro lado, necesitamos crear una Render Target y un material.

1. Texture Render Target 2D

1. En la carpeta Portals/FX, haz clic derecho y selecciona Materials & Textures -> Render Target.
2. Nómbralo RT_PortalView_A.
3. Crea otro y nómbralo RT_PortalView_B.

Cada portal necesitará su propio Render Target para capturar la vista de forma independiente.

2. Material del Portal (M_Portal) y su Instancia

1. En la carpeta Portals/Materials, haz clic derecho y selecciona Material y nómbralo M_Portal.
2. Abre M_Portal. Este material se aplicará a la 'pantalla' del portal.
   • Cambia el Blend Mode a Masked o Translucent (dependiendo de tu diseño).
   • Añade un nodo Texture Sample.
   • Promociona la entrada Texture a un parámetro (PortalRenderTexture).
   • Conecta la salida RGB del Texture Sample al Emissive Color del material.
   • Si usas Masked, conecta la salida Alpha o un Mask al Opacity Mask.
3. Guarda el material.

Ahora, crea una Material Instance de M_Portal en la misma carpeta y nómbrala MI_Portal_A. Crea otra, MI_Portal_B.

3. Asignación en BP_PortalBase

De vuelta en BP_PortalBase:

1. En el Construction Script:
   • Arrastra un nodo PortalFrame.
   • Arrastra un nodo Create Dynamic Material Instance.
   • Conecta la salida del Create Dynamic Material Instance a un Set Material del PortalFrame (Element Index 0).
   • Guarda la referencia del Material Instance Dynamic resultante en la variable PortalMaterial.
2. En el Event Graph de Event BeginPlay:
   • Conecta un nodo Set Render Target al PortalView componente, usando la variable RenderTexture.
   • Conecta un nodo Set Texture Parameter Value al PortalMaterial. Establece el Parameter Name a PortalRenderTexture (el nombre del parámetro que creamos en el material) y el Value a la variable RenderTexture.

🧠 Lógica de Teletransporte en Blueprint

Ahora vamos a implementar la lógica principal que hará que nuestros portales funcionen.

1. OnComponentBeginOverlap para TeleportVolume

En el Event Graph de BP_PortalBase:

1. Desde el evento On Component Begin Overlap de TeleportVolume:
   • Haz un Cast To tu personaje jugable (e.g., Cast To ThirdPersonCharacter).
   • Si el Cast es exitoso (usa la pin As Third Person Character), comprueba si el portal está activo con un Branch usando la variable bIsActive.
   • Si está activo y TargetPortal es válido (usa un IsValid node para TargetPortal), llama a la función TeleportPlayer (que crearemos en el siguiente paso).

2. Función TeleportPlayer

Crea una nueva función en BP_PortalBase llamada TeleportPlayer.

• Inputs:
  • PlayerToTeleport (Type: Actor Object Reference)

La lógica dentro de TeleportPlayer:

1. Desde TargetPortal, obtén su TeleportVolume.
2. Obtén la World Location y World Rotation del TeleportVolume del TargetPortal.
3. Para obtener la dirección correcta hacia la cual mira el jugador después de teletransportarse, podemos usar la Forward Vector del TeleportVolume del TargetPortal.
4. Calcula una New Location para el jugador: TargetPortal's TeleportVolume World Location + Forward Vector del TeleportVolume * un offset (e.g., 100 unidades) para evitar que el jugador colisione inmediatamente con el portal de destino.
5. Usa el nodo Set Actor Location and Rotation en PlayerToTeleport. Conecta la New Location y la World Rotation del TeleportVolume del TargetPortal.

3. Prevención de Teletransporte Recursivo

Para evitar que el jugador se teletransporte instantáneamente de regreso al portal de origen al aparecer en el portal de destino, necesitamos un pequeño retraso o un sistema de 'cooldown'.

1. Añade una variable bCanTeleport (Type: Boolean, por defecto True) a tu ThirdPersonCharacter Blueprint.
2. Cuando el Cast To ThirdPersonCharacter sea exitoso en BP_PortalBase, antes de llamar a TeleportPlayer:
   • Comprueba bCanTeleport en el personaje. Si es False, no hagas nada.
   • Si es True, establece bCanTeleport a False en el personaje.
3. En la función TeleportPlayer de BP_PortalBase, después de Set Actor Location and Rotation:
   • Usa un nodo Delay (e.g., 0.5 segundos).
   • Después del Delay, establece bCanTeleport a True en el personaje.

Esto evita que el personaje sea teletransportado de vuelta inmediatamente al entrar al volumen del portal de destino.

✨ Efectos Visuales para los Portales (FX)

Un sistema de portales no está completo sin efectos visuales que lo hagan sentir real y mágico.

1. Placeholder de Efectos (Partículas o Niagara)

Crearemos un componente para nuestros FX de portal. Puedes usar el sistema de partículas Cascade o Niagara.

1. En BP_PortalBase, añade un componente Particle System (o Niagara Component) y nómbralo PortalFX.
2. Crea un nuevo efecto de partículas básico en Portals/FX. Por ejemplo, un círculo que emita partículas hacia el centro o hacia afuera. Puedes usar una textura radial como base.
3. Asigna este sistema de partículas al componente PortalFX.

2. Control de Activación/Desactivación del FX

Queremos que los efectos se activen o desactiven según el estado del portal.

1. Añade una función en BP_PortalBase llamada SetPortalActive.
   • Inputs: Activate (Type: Boolean)
2. Dentro de SetPortalActive:
   • Establece la variable bIsActive al valor de Activate.
   • Si Activate es True, haz Activate System en PortalFX.
   • Si Activate es False, haz Deactivate System en PortalFX.
   • También puedes controlar la visibilidad del PortalFrame aquí si el portal debe aparecer/desaparecer.
3. En Event BeginPlay, llama a SetPortalActive con True para que el portal esté activo al inicio.

🌍 Colocando y Configurando Portales en el Nivel

Ahora es el momento de poner nuestros portales a prueba en el mundo del juego.

1. Arrastrar Instancias de BP_PortalBase

1. Arrastra dos instancias de BP_PortalBase desde el Content Browser a tu nivel. Nómbralos Portal_A y Portal_B.
2. Colócalos en lugares distintos pero accesibles.

2. Conexión de Portales

1. Selecciona Portal_A en tu nivel.
2. En el panel de Details, busca la variable TargetPortal. Usa el gotero para seleccionar Portal_B del nivel.
3. Asigna RenderTexture de Portal_A a RT_PortalView_A.
4. Selecciona Portal_B.
5. En Details, asigna TargetPortal a Portal_A.
6. Asigna RenderTexture de Portal_B a RT_PortalView_B.

3. Asignación de Materiales de Vista

Para que la vista de los portales se muestre correctamente, necesitamos asignar la Material Instance Dynamic correcta a cada PortalFrame.

1. Selecciona Portal_A.
2. En la sección Default de Details, busca el componente PortalFrame. En sus propiedades, busca el elemento Material y asigna MI_Portal_A.
3. Selecciona Portal_B.
4. En sus propiedades, busca el componente PortalFrame. En sus propiedades, busca el elemento Material y asigna MI_Portal_B.

🔄 Mejoras y Funcionalidades Adicionales

Nuestro sistema básico de portales ya funciona, pero hay muchas maneras de mejorarlo.

1. Animaciones de Apertura/Cierre

En lugar de que los portales simplemente aparezcan, puedes añadir animaciones para su apertura y cierre.

• Usa Timelines en Blueprint para animar la escala del PortalFrame o la intensidad del PortalFX.
• Integra estas Timelines en la función SetPortalActive.

2. Sonidos de Portal

Añade efectos de sonido para cuando un portal se abre, se cierra o cuando el jugador se teletransporta.

• Usa el nodo Play Sound 2D o Play Sound at Location en Blueprint.
• Conéctalos a los eventos relevantes (e.g., SetPortalActive, TeleportPlayer).

3. Portales Bidireccionales Automáticos

Para simplificar la configuración, puedes hacer que un portal, al asignarle un TargetPortal, automáticamente asigne a sí mismo como TargetPortal del otro portal.

• En BP_PortalBase, en el Construction Script o en un evento PostEditChangeProperty (solo para el editor), si TargetPortal es asignado y no nulo, llama a una función en TargetPortal para establecer su propio TargetPortal a Self.

4. Portales Activos Condicionalmente

Quizás los portales solo se activan después de resolver un puzle o encontrar un objeto.

• Crea una interfaz de Blueprint o un Event Dispatcher para comunicar cuándo un portal debe activarse.
• En el Event Graph de BP_PortalBase, llama a SetPortalActive cuando se cumplan las condiciones.

5. Optimización del Scene Capture Component 2D

Los Scene Capture Component 2D pueden ser costosos para el rendimiento. Considera:

• Desactivarlos cuando no estén en la vista del jugador o cuando el portal esté inactivo.
• Reducir la resolución del Render Target si el rendimiento es una preocupación.

📝 Resumen y Próximos Pasos

¡Felicidades! Has construido un sistema de teletransporte con portales dinámicos en Unreal Engine 5. Hemos cubierto desde la configuración básica del Actor hasta la implementación de la lógica de teletransporte y la integración de efectos visuales.

Puntos Clave Cubiertos:

• Creación de BP_PortalBase con Static Mesh, Box Collision y Scene Capture Component 2D.
• Manejo de Render Targets y Material Instances para las vistas del portal.
• Lógica de On Overlap y teletransporte con prevención de bucles.
• Integración de sistemas de partículas para FX.
• Colocación y conexión de portales en el nivel.

¿Qué puedes hacer a continuación?

• Mejorar los FX: Experimenta con sistemas de partículas más complejos o efectos de post-proceso para la vista del portal.
• Sonidos Dinámicos: Añade sonidos posicionales que cambien según la distancia al portal o la vista a través de él.
• Portales Interactivos: Permite al jugador activar/desactivar portales mediante interacción o con objetos específicos.
• Puzles con Portales: Diseña puzles que requieran el uso inteligente de los portales para ser resueltos.

El desarrollo de juegos es un viaje continuo de aprendizaje y experimentación. ¡No tengas miedo de probar nuevas ideas y llevar tu sistema de portales al siguiente nivel!