Aprende a crear juegos 3D impulsados por IA en 2 horas o menos, sin necesidad de programar.

El proceso general del fragmento de código (que puede usarse como un prompt para generar código):

1. Lógica de movimiento del jugador y generación de UI

  1. GameLogic representa el componente central de gestión del juego. Recibe todos los eventos dentro del juego y los distribuye a los subsistemas apropiados, reduciendo efectivamente el acoplamiento del código.
  2. Cuando el jugador se acerca a un marco que contiene un BoxCollider, su componente Transponder adjunto detecta automáticamente la interacción y pasa el evento de acercamiento del jugador al componente GameLogic. En respuesta, UIFactory instancia un panel de UI para la entrada del usuario.
  3. Este panel de UI incluye el componente InputDialog, que escucha la entrada del teclado del jugador. Cuando el jugador presiona Enter por primera vez, el cuadro de entrada se activa y captura el enfoque del teclado. Después de que el jugador termina de escribir y presiona Enter nuevamente, la entrada se envía como un evento a GameLogic.
  4. Cuando el jugador se aleja del marco que contiene el BoxCollider, el panel de UI se destruye inmediatamente.

2. Generación de modelos y mapeo de esqueletos (proporcionado por TripoSDK)

  1. Después de que el componente GameLogic recibe la entrada del prompt del jugador, pasa el prompt al componente TripoClient (Nota: se debe proporcionar una TripoAPIKey válida de antemano).
  2. El TripoClient llama al componente TripoAPI para enviar el prompt al servidor de Tripo. Durante este proceso, TripoAPI ensambla la solicitud, la envía y comienza a sondear el servidor a intervalos regulares para verificar si hay actualizaciones. Una vez exitoso, el jugador recibe un TaskID para el modelo generado del servidor de Tripo. Este TaskID se utiliza luego para solicitar la generación del esqueleto.
  3. Una vez completado el proceso de Rigging, TripoAPI devuelve la URL de descarga del modelo a TripoClient. TripoClient luego carga y analiza el modelo en formato GLB a través del plugin glTFfast.
  4. A continuación, el componente RuntimeHumanoidAvatarBuilder se monta en el modelo. Este componente mapea el esqueleto del modelo GLB al sistema Humanoid Avatar de Unity, lo que permite el retargeting de la animación.
  5. Finalmente, TripoClient instancia el modelo en la escena. En este punto, los desarrolladores pueden usar los recursos de animación humanoide existentes para controlar el modelo recién generado.

3. Transferencia de control

  1. El componente GameLogic escucha la entrada del teclado del jugador para alternar dinámicamente el control entre el jugador y el modelo generado. Específicamente, ajusta la prioridad de la cámara y reasigna el objetivo de control del ThirdPersonController.
  2. Cuando el jugador presiona la tecla F, el control se transfiere del personaje del jugador al modelo, permitiendo al jugador operarlo. Presionar la tecla F nuevamente devuelve el control al jugador.
  3. Dependiendo del modelo generado, su tamaño puede variar; desde extremadamente grande hasta extremadamente pequeño, lo que permite interacciones de juego únicas y permite al jugador atravesar diferentes obstáculos.
  4. Además, la apariencia del modelo se puede intercambiar fácilmente, lo que soporta eficazmente un sistema de personalización de personajes y skins de bajo costo dentro del juego.

Lógica general del código:

Objeto de juego principal (Main GameObject)

Pasos específicos de implementación:

Versión de Unity: 2022.3.55

Ruta del código fuente y las escenas: Assets-LowPoly Environment Pack - Demo - Demo1

1. Configuración del proyecto e importación de recursos:

  1. Crear un nuevo proyecto

    1. Abre Unity y haz clic en New Project.
    2. Selecciona la plantilla URP (Universal Render Pipeline).
    3. Nombra el proyecto TripoRuntimeTutorial y haz clic en crear.

  2. Importar paquetes de recursos necesarios

Abre tu navegador y ve a la Unity Asset Store. Busca y descarga los siguientes paquetes gratuitos (también disponibles en los archivos del proyecto proporcionados):

Añade a Mis Recursos, y en las ventanas emergentes posteriores, haz clic en "Open in Unity" y descarga.

Después de descargar cada paquete, ve a Unity > Assets (en la parte superior del menú de Unity) > Import Package > Custom Package, e impórtalos uno por uno. Haz clic en Import en cada aviso.

  1. Convertir materiales a URP

Algunos materiales importados pueden aparecer rosados (indicando un problema con el shader). Para convertir:

  • Filtra o selecciona todos los modelos rosados y extraños en la escena.
  • Luego navega a Editor > Rendering > Materials, y conviértelos a materiales compatibles con URP.
  1. Instalar la dependencia glTFast (para cargar modelos GLB)

Opción 1: Instalar vía Git (requiere un entorno Git local)

  • Ve a Window > Package Manager, haz clic en el botón con el signo + > Add package from Git URL.
  • Introduce la URL: https://github.com/atteneder/glTFast.git, luego haz clic en Add y espera a que se importe el plugin glTFast.

Opción 2: Descargar desde el sitio web oficial de Tripo, que también incluye el plugin glTFast.

  • Visita la página principal de Tripo y ve a la sección de Recursos.
  • Descarga el Unity Plugin, que ya incluye la dependencia glTFast.
  • Sigue el video tutorial incluido en el paquete para obtener las instrucciones de instalación.
  1. Abrir la escena Demo
  • En la ventana del proyecto de Unity, navega a: Assets > LowPoly Environment Pack > Demo > Demo1
  • Haz doble clic en Demo1 para abrirla.

Para configurar tu entorno personalizado:

  • Arrastra activos como tanques, rocas o árboles de Assets > carpeta ithappy a la escena.
  • Ahora puedes mover al jugador libremente dentro del entorno.
  1. Añadir prefabs relacionados con el jugador

Navega a: Assets > StarterAsset > ThirdPersonController > Prefabs

Arrastra los siguientes tres prefabs al panel Hierarchy:

  • MainCamera
  • PlayerFollowCamera
  • PlayerArmature
  1. Configurar parámetros de la cámara
  • Selecciona PlayerFollowCamera en la escena.
  • En el panel de propiedades (Inspector), localiza el componente CinemachineVirtualCamera.
  • Configura tanto Follow como Look At a PlayerCameraRoot (Nota: se puede encontrar bajo los componentes hijos de PlayerArmature).

La configuración anterior utiliza el script de controlador de tercera persona proporcionado por Unity. En este punto, haz clic en el botón Play en la barra de herramientas de Unity, puedes usar las teclas WASD para controlar el movimiento del personaje. ¡El personaje y la cámara deberían moverse y ajustarse en consecuencia!

Mostrar el Panel de Prompts al acercarse el jugador

Cuando el jugador se acerca a un objeto específico, debe aparecer un panel de entrada de UI. Cuando el jugador se aleja, el panel debe desaparecer.

  1. Creación de Área de Disparo (Trigger Area)
  • En el directorio Assets > ithappy > Military FREE > Perfab, selecciona un modelo (por ejemplo, un tanque).
  • Haz clic derecho en el modelo y elige Create Empty Child, luego renómbralo a Trigger.
  • Selecciona el objeto Trigger, ve al Inspector, haz clic en Add Component y añade un Box Collider.
  • Marca la opción Is Trigger.
  • Haz clic en Edit Collider y ajusta sus manejadores en la vista de escena para escalar el collider al doble del tamaño del modelo, cubriendo su área circundante.
  1. Crear el script de evento de activación
  • En el panel Project, haz clic derecho en la carpeta Assets > Create > C# Script, nómbralo Transponder y abre el script con Cursor.
  • Este script debe detectar cuando un jugador entra o sale del collider; se envía un mensaje a nuestro componente GameLogic. Selecciona el modelo en Cursor e introduce nuestro prompt de referencia:

Por favor, genera un script C# de Unity llamado Transponder que active OnPlayerEnter cuando un GameObject con la etiqueta "player" entra en el collider, y OnPlayerExit cuando el jugador sale.

  • Guarda el script y arrastra el componente Transponder al objeto Trigger en la escena.
  1. Gestión de la lógica del juego

Haz clic derecho en la escena > Create Empty, renómbralo GameLogicManager (sirve como contenedor de lógica).

  • Bajo GameLogicManager, crea otro hijo vacío y nómbralo GameManager.
  • Crea un nuevo script llamado GameManager, que manejará la lógica central de la escena.

Citamos el componente Transponder y luego escuchamos los eventos cuando los jugadores entran o salen. Las palabras del prompt de referencia son las siguientes:

Por favor, genera un script C# de Unity llamado GameManager que escuche.

  • Eventos OnPlayerEnter y OnPlayerExit de una instancia de Transponder.
  • En OnPlayerEnter, instancia un prefab de prompt de UI usando el script UIFactory.
  • En OnPlayerExit, destruye este prefab de UI.

Después de guardar el script, arrastra el script GameManager al objeto GameManager y arrastra el componente Transponder al campo Transponder. Esto completa la escucha de eventos de entrada y salida del jugador.

  1. Crear Prefab de Panel de UI

En la jerarquía, haz clic derecho > UI > Panel, para crear un nuevo panel.

  • Añade 2 componentes hijos bajo el panel:

    • Text (para mostrar instrucciones del prompt)
    • InputField (para recibir la entrada del jugador)

  • Ajusta el diseño y el posicionamiento usando la vista de juego como previsualización.

  • Una vez terminado, arrastra todo el objeto Panel a la carpeta Assets para crear un prefab.

    • Nómbralo InputDialogPrefab.

Nota: Si estás usando TextMeshPro, asegúrate de asignar una fuente compatible con el chino, como NotoSansSC SDF, para evitar caracteres cuadrados en el texto.

  1. Crear el script InputDialog: Manejar la lógica de entrada
  • Crea un script C# de Unity llamado InputDialog.

Prompt de referencia:

  • Por favor, genera un script C# de Unity llamado InputDialog para gestionar un cuadro de diálogo de UI basado en TMP.
  • Debe contener un TMP_Text para el prompt y un TMP_InputField para la entrada.
  • Al presionar la tecla Enter por primera vez: activa el cuadro de entrada y desactiva el controlador de movimiento del jugador (por ejemplo, ThirdPersonController).
  • Al presionar la tecla Enter por segunda vez: envía la entrada, vuelve a habilitar el movimiento y destruye el cuadro de diálogo.
  • Mantén el enfoque de entrada hasta que se introduzca una entrada válida.

Monta el componente InputDialog en el InputDialogPrefab. Arrastra los objetos Text e InputField correspondientes a sus respectivos campos en el componente (Dependencies).

  1. Crear el script UIFactory: Instanciar panel de UI

Crea un nuevo script C# llamado UIFactory.

Prompt de referencia:

  • Por favor, genera un script C# de Unity llamado UIFactory que siga el patrón de fábrica para instanciar cuadros de diálogo de UI.
  • Dado un prefab de UI, una posición y una rotación, instancia el prefab en la transformación dada y devuelve su componente InputDialog.

Este componente actúa como intermediario para desacoplar la lógica de creación de UI del manejo de eventos del juego.

  1. Dependencias de componentes asociados

Vuelve a verificar que todas las dependencias de los componentes estén asignadas correctamente.

  • El objeto PlayerArmature en la escena debe tener la etiqueta (Tag) configurada como "Player".

En el objeto GameManager, asigna:

  • El campo Transponder con el script Transponder del objeto Trigger.
  • El campo UIFactory con el componente UIFactory en el objeto GameLogicManager.

Pruebas: Haz clic en Play en Unity.

  • Acércate al objeto con el trigger: debería aparecer el panel de entrada.
  • Cuando te alejes, el panel debería desaparecer automáticamente.

Nota: Nuestro archivo fuente tiene una posición fija para la generación del panel. Modifica este valor de acuerdo con las propiedades de Transform del Trigger que seleccionaste. Alternativamente, puedes configurar el Canvas > RenderMode del prefab de UI en ScreenSpace - Overlay, para que la UI se renderice en el espacio de la pantalla y no entre en el espacio del mundo.

Enviar el prompt a TripoAPI

En esta etapa, aún no podemos enviar prompts al servidor de Tripo en tiempo real. Sin embargo, el código necesario para el envío de prompts, las solicitudes de red, la generación de modelos, el rigging de esqueletos, el mapeo, el adaptador y el retargeting de animación ya está listo. Estos scripts se integrarán completamente en el plugin Tripo para Unity en futuras actualizaciones. (Nota: ¡Asegúrate de que exista un sistema UIEvent en tu escena antes de continuar; de lo contrario, la UI no responderá!)

  1. Importar script del plugin Tripo

En el panel Project de Unity (normalmente a la izquierda), localiza los archivos fuente TripoClient.cs, TripoAPI.cs y RuntimeHumanoidAvatarBuilder.cs de tu carpeta de descarga.

  • Arrástralos a la carpeta Assets/Scripts.

Aquí está lo que hace cada script:

  • TripoClient.cs y TripoAPI.cs: Gestionan el envío de prompts y la comunicación de red con el servidor de Tripo.
  • RuntimeHumanoidAvatarBuilder.cs: Mapea el esqueleto del modelo al rig humanoide de Unity usando el plugin GLTFast.

TripoClient.cs y TripoAPI.cs representan versiones ligeras del plugin Tripo For Unity pero con funcionalidad de rigging. Continuaremos actualizando y simplificando este proceso en futuras versiones.

  1. Crear el componente Tripo Client
  • Crea un componente vacío como hijo debajo de GameLogicManager y nómbralo TripoClient.
  • Arrastra TripoClient.cs y TripoAPI.cs a este nuevo objeto para adjuntar los scripts.
  • En el Inspector, localiza el campo API Key en el componente TripoClient. Pega tu clave API de Tripo (puedes registrar una cuenta en el sitio web oficial de Tripo y recibir 600 puntos gratis al mes).
  1. Lógica de entrada de prompt y callback

Dado que hemos actualizado el sistema de entrada del jugador, necesitamos actualizar la lógica de transmisión del prompt en GameManager. Por defecto, el script GameManager ya debería estar escuchando los eventos OnPlayerEnter y OnPlayerExit. Si estás trabajando con código generado por IA o encadenando lógica a través de múltiples componentes, es útil pegar el código generado previamente como contexto.

El script que proporcionamos ya ha definido la función de callback cuando GameManager emite una llamada de instancia a UIFactory. Definitivamente, hay otras soluciones, pero en este caso, el prompt que se puede usar para completar esta parte de la lógica se puede ver de la siguiente manera.

Comportamiento actualizado: En el script GameManager

  • Cuando se activa OnPlayerEnter, UIFactory instancia un cuadro de diálogo de entrada (prefab InputDialog).
  • Cuando se activa OnPlayerExit, el cuadro de diálogo de entrada se destruye.

Una vez que el jugador termine de introducir un prompt, se pasará al script TripoClient con un ejemplo de llamada de tripoClient.TextToModel(prompt, pos);. Modifica los scripts asociados.

Modificar GameManager.cs:

  • Abre el script GameManager.cs.
  • Encuentra el método OnPromptConfirmed (este maneja la confirmación de entrada del prompt).
  • Completa el código interno y asegúrate de que el campo tripoClient esté asignado correctamente en el componente GameManager.
  1. Crear un contenedor de modelos
  • En la jerarquía de la escena, crea un componente vacío como hijo y nómbralo ModelContainer.
  • Úsalo como el nodo padre para todos los modelos generados dinámicamente.

Prueba tu configuración

  1. Pulsa el botón Play en Unity.
  2. Introduce un prompt en el panel.
  3. Deberías ver el prompt subido con éxito al servidor de Tripo.
  4. El progreso de la generación aparecerá en la Consola de Unity y también en el campo "Input/Progress" del componente Tripo API.

Ahora estás listo para generar tu propio modelo de IA en Unity. ¡Disfruta construyendo!

Retargeting de Animación

Una vez que el modelo ha sido generado, el siguiente paso es mapear los recursos de animación existentes al esqueleto de tu modelo. Asegúrate de que el script RuntimeHumanoidAvatarBuilder se haya añadido a tu proyecto. Este script maneja el mapeo del esqueleto GLB humanoide al Avatar de Unity, y el script TripoClient lo montará automáticamente al modelo generado.

Primero, organicemos la estructura y las dependencias del proyecto. Antes de que el juego comience, excepto por los objetos ambientales, los GameObjects personalizados deben estar en el siguiente estado. Expande cada componente de script y asegúrate de que todos los campos estén asignados correctamente. Si encuentras algún problema, compáralos con los archivos fuente para verificar si hay una asignación incorrecta de componentes.

De lo contrario, en nuestra demo, el modelo es un mech de combate, por lo que su propiedad Transform > Scale se amplía diez veces. Esto también se aplica a sus propiedades relacionadas con el Controller.

  1. Añadir componente de control de modelo

Selecciona el componente ModelContainer y añade secuencialmente los siguientes componentes (todos proporcionados por el paquete Starter Assets):

  • Character Controller
  • Player Input
  • Third Person Controller

En el componente Third Person Controller, establece el campo Camera en la MainCamera de la escena.

  1. Configurar la cámara para el movimiento del modelo

Crea un componente vacío como hijo, nómbralo ModelCamera, y añádele un componente CinemachineFreeLook (necesitas importar el plugin Cinemachine, que está incluido en el paquete Starter Assets).

Luego, crea un componente como hijo bajo ModelContainer, nómbralo CameraRoot, y ajusta su coordenada Y a 5 (altura de la cintura del modelo). Asigna los campos Follow y LookAt de ModelCamera a CameraRoot. Ahora la cámara seguirá el movimiento del modelo.

  1. Habilitar el movimiento del personaje:

En este punto, el transformador debería reproducir su animación de inactividad, pero aún no puede ser controlado.

Esos componentes: CharacterController, PlayerInput, ThirdPersonController, BasicRigidBody y StarterAssetsInputs, son proporcionados por StarterAssets de Unity y manejan la entrada del jugador. El componente Animator controla la animación, y el Avatar generado por RuntimeHumanoidAvatarBuilder también se asignará automáticamente al campo Avatar del Animator.

Para probar:

  • Deshabilita el componente PlayerArmature y su cámara.
  • Arrastra un modelo GLB generado por Tripo (con rigging) a la escena como un componente hijo de ModelContainer.
  • Añade el componente RuntimeHumanoidAvatarBuilder al nuevo modelo.

Ahora, durante el tiempo de ejecución, el transformador puede ser controlado. El último paso es implementar la lógica para el cambio de control.

  1. Implementar el cambio de control

Actualiza la siguiente lógica en la función Update de tu script GameLogic:

  • isLoad indica si el modelo ha sido generado. Si es falso, salta el proceso.
  • isInModel indica si el jugador está controlando actualmente el transformador o al jugador.

Al entrar en el transformador:

  • Deshabilita al jugador y la cámara del jugador.
  • El plugin Cinemachine cambiará automáticamente la vista de la cámara a nuestra ModelCamera recién creada.
  • Reinicia el ModelContainer para que la lógica de movimiento sea efectiva en el transformador.

Al salir del transformador:

  • Mantén el transformador en su lugar.
  • Muestra el personaje del jugador en la posición actual del transformador.
  • Al mismo tiempo, cambia el control y la cámara de nuevo al jugador.

Una vez completada la lógica anterior, al presionar la tecla F, el jugador puede entrar y controlar el transformador. Al presionar la tecla F nuevamente, el control vuelve al jugador, mientras el transformador permanece en su lugar, pero el jugador reaparece exactamente en la ubicación del transformador.

Retoques finales

En este punto, la demo está funcionalmente completa. Si quieres pulir la experiencia, puedes:

  • Mostrar un prompt de UI (por ejemplo, "Presiona F para controlar el modelo") cuando el jugador se acerca al transformador.
  • Soportar la selección de uno de varios transformadores cuando se generan varios.

¡Felicitaciones!

¡Gracias por tu arduo trabajo! Ahora has completado toda la demo. Puedes generar y controlar libremente los modelos de transformadores usando tus propias ideas y activos.

¿Necesitas ayuda?

Si encuentras alguna dificultad o tienes comentarios para TripoGame, ¡no dudes en contactarnos a nuestro correo electrónico oficial! tripogame@vastai3d.com. ¡Nos encantaría saber de ti!

Consejos:

  1. Este tutorial está diseñado para demostrar cómo se puede usar la API de Tripo en el juego en tiempo real. El diseño del juego en sí es solo una referencia. Esperamos abordar de manera proactiva los posibles problemas que los desarrolladores puedan encontrar.

  2. Actualmente, la demo solo admite la generación de modelos humanoides debido a los requisitos de rigging. Si la animación aparece anormalmente debido a la inestabilidad de los pesos del esqueleto generados por IA, usa la Avatar Mask para bloquear la animación de las partes del cuerpo problemáticas. Por ejemplo, el archivo fuente ya deshabilita la animación de las manos en el NoArmPerson Controller.

  3. Para una generación más rápida, puedes usar TripoV2/TripoV1Turbo. Simplemente reemplaza el número de versión del modelo "v2.5-20250123" en el script TripoAPI por

    • v2.0-20240919
    • Turbo-v1.0-20250506.

  4. Los modelos FBX y GLB tienen diferentes orientaciones, lo que puede provocar problemas de dependencia al importarlos. Si necesitas importar FBX, utiliza plugins como TriLib para cargar el modelo y manejar las adaptaciones correspondientes.

Advancing 3D generation to new heights

moving at the speed of creativity, achieving the depths of imagination.