Mascota de Rive en la UI de Unity: instalación, uGUI y Data Binding

¿Rive funciona en Unity? ¿En qué plataformas?

Sí. La documentación de Rive para Unity dice que "el paquete es compatible con las versiones LTS de Unity desde 2021 en adelante (incluido Unity 6)" y que usa el Rive Renderer, que se mantiene actualizado con el runtime de C++ más reciente.

Rive mantiene una tabla de compatibilidad de funciones del runtime de Unity en la misma página; consúltala antes de diseñar en torno a funciones más nuevas.

¿Cómo instalo el paquete de Rive para Unity?

Hay dos opciones. El paquete del Unity Asset Store es la instalación más sencilla y solo incluye versiones estables: abre Window, Package Manager, elige My Assets, busca Rive e impórtalo. El paquete de GitHub agrega tags canary con funciones más nuevas. Usa Add package from git URL con el tag de la versión más reciente en lugar de 0.0.0:

https://github.com/rive-app/rive-unity.git?path=package#v0.0.0

o agrégalo a Packages/manifest.json:

"app.rive.rive-unity": "https://github.com/rive-app/rive-unity.git?path=package#v0.0.0"

Rive advierte que Unity puede fallar al actualizar el paquete con el Editor abierto; si ocurre, cierra Unity, cambia la versión en manifest.json y vuelve a abrirlo. Los componentes de UI también necesitan com.unity.ugui, que los proyectos nuevos suelen incluir.

¿Cómo muestro un personaje de Rive en un Canvas de uGUI?

Arrastra el .riv a la ventana Project; Unity lo importa como un Rive Asset. Luego arrástralo a la Hierarchy, lo que crea una configuración en screen space dentro de un Canvas de uGUI, o crea la configuración a mano desde el menú del clic derecho:

1. Rive, Rive Panel (Canvas) crea un panel ya configurado con el Rive Canvas Renderer. El panel debe estar dentro de un Canvas de uGUI, y el renderer va en el mismo GameObject que el panel.
2. Rive, Widgets, Rive Widget va dentro de ese panel. Asigna el Rive Asset, el artboard y la máquina de estados (state machine), por ejemplo CharacterViewModelMachine.

El Canvas Renderer ajusta el tamaño del panel según el Canvas de uGUI y gestiona el orden de renderizado y el raycasting, así que el personaje se superpone correctamente con tus botones y recibe la entrada del puntero para cualquier listener de Rive del archivo. Si no aparece nada, las preguntas frecuentes de Rive enumeran las causas habituales: el widget no está dentro de un Rive Panel o no hay ninguna cámara en la escena.

Para poner el personaje en un objeto 3D, como una pantalla dentro del mundo del juego, suelta el .riv sobre un GameObject con un MeshRenderer; Unity agrega un Rive Panel y un Rive Texture Renderer.

¿Cómo vinculo el estado de ánimo de la mascota al estado del juego?

Usa Data Binding. En el Inspector del Rive Widget, en Data, configura Data Binding Mode en Auto Bind Default, que vincula la instancia de view model predeterminada del artboard. Luego obtén las propiedades cuando el widget haya cargado:

using Rive;
using Rive.Components;
using UnityEngine;

public class MascotController : MonoBehaviour
{
    [SerializeField] private RiveWidget m_riveWidget;

    private ViewModelInstance m_vm;
    private ViewModelInstanceNumberProperty m_mood;

    private void OnEnable()  { m_riveWidget.OnWidgetStatusChanged += HandleStatus; }
    private void OnDisable() { m_riveWidget.OnWidgetStatusChanged -= HandleStatus; }

    private void HandleStatus()
    {
        if (m_riveWidget.Status != WidgetStatus.Loaded) return;
        // Data Binding Mode on the widget: Auto Bind Default
        m_vm = m_riveWidget.StateMachine.ViewModelInstance;
        m_mood = m_vm.GetNumberProperty("mood");
    }

    // Call from game code: SetMood(5) while loading, SetMood(0) when idle.
    public void SetMood(int mood)
    {
        if (m_mood != null) m_mood.Value = mood;
    }

    // One-shot reactions: "success", "error", "yes", "no", "enter", "exit".
    public void Fire(string trigger)
    {
        if (m_vm == null) return;
        var t = m_vm.GetTriggerProperty(trigger);
        if (t != null) t.Trigger();
    }
}

Llámalo desde donde cambie el estado del juego:

// Example wiring from a game manager
mascot.SetMood(5);            // loading the level
yield return LoadLevel();
mascot.SetMood(0);            // idle
...
if (playerWon) mascot.Fire("success"); else mascot.Fire("error");

• La documentación de Rive indica que un cambio de propiedad "no se aplicará a sus elementos vinculados hasta que la máquina de estados o el artboard avancen", algo que el widget hace en cada fotograma mientras se reproduce.
• Las propiedades numéricas reciben un float; los números enteros como 5 funcionan sin problema.
• Para reaccionar cuando algo ocurre dentro del archivo, suscríbete al OnValueChanged de una propiedad (o a OnTriggered en el caso de los triggers) y cancela la suscripción en OnDestroy.
• En Unity, Rive marca su API de bajo nivel para máquinas de estados como legacy y recomienda la API de componentes con Data Binding.

Mantén una lista escrita de los nombres de las propiedades junto al código; una propiedad renombrada en el archivo no devuelve nada en runtime. La guía de máquinas de estados explica cómo se suelen conectar los estados de ánimo y los triggers.

¿Cómo mantengo rápida la UI de Rive en móviles y WebGL?

Las buenas prácticas de Rive para Unity parten de un hecho: "un Rive Panel renderiza en una Render Texture de forma predeterminada", y cada widget bajo ese panel dibuja en la misma textura. A partir de ahí:

• Prefiere menos paneles, "sobre todo en móviles", y agrupa los widgets bajo un panel compartido.
• Construye bloques más grandes de UI en Rive en lugar de instanciar muchos botones pequeños de Rive en uGUI.
• Usa listas de Data Binding para los elementos repetidos en lugar de muchos widgets.
• Desactiva o destruye los widgets que no estés mostrando, para que dejen de avanzar y de renderizarse.
• Deja que las máquinas de estados se asienten. El runtime de Rive deja de avanzar una máquina de estados cuando nada va a cambiar, lo que ahorra trabajo mientras una mascota mantiene una pose quieta.

En WebGL, el renderizador de Rive usa una extensión de pixel local storage cuando el navegador la expone y, si no, recurre a MSAA en WebGL 2, donde Rive advierte que los modos de fusión avanzados tienen un mayor costo de rendimiento. Prueba las builds de WebGL en los navegadores que usan tus jugadores.

¿Existe un runtime de Rive para Unreal Engine?

Sí. Rive documenta un runtime de Unreal para Unreal Engine 5.7.3 o superior, con máquinas de estados, Data Binding con view models y observación de propiedades. Su lista de plataformas incluye DirectX 11 y 12, Vulkan en PC, macOS, PlayStation 5, Nintendo Switch y Switch 2, Xbox Series X y Steam Deck, con visionOS marcado como experimental. El soporte para móviles está "planificado, pero aún no disponible". Rive también marca ahí como obsoletos los inputs heredados de las máquinas de estados, así que los proyectos nuevos en Unreal deberían controlar los personajes mediante view models.

¿Puede un personaje de Charmotion funcionar en Unity?

Un .riv de Charmotion es un archivo de Rive estándar, así que se importa como cualquier otro. Tiene un view model Character en CharacterViewModelMachine: un número mood de 0 a 9 (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention) y triggers success, error, yes, no, enter y exit, que coinciden con el controlador de arriba. Charmotion incluye código web, React y SwiftUI, no C#, así que el script de esta página es la parte que agregas tú. El .riv está en todos los planes de pago (desde $20/mes).

Cómo agregar una mascota de marca hecha en Rive a la UI de Unity

1. Instala el paquete. Importa Rive desde la Asset Store o agrega la URL git de rive-unity con un tag de versión en el Package Manager.
2. Importa el archivo. Arrastra el .riv a la ventana Project para crear un Rive Asset.
3. Crea el panel. Agrega Rive, Rive Panel (Canvas) bajo tu Canvas de uGUI.
4. Agrega el widget. Agrega un Rive Widget bajo el panel y elige el asset, el artboard y la máquina de estados.
5. Vincula los datos. Configura Data Binding Mode en Auto Bind Default y obtén en C# las propiedades de mood y de los triggers una vez que el widget haya cargado.
6. Conecta los eventos del juego. Llama a SetMood y Fire desde la lógica de tu juego y prueba en los dispositivos de destino.

Preguntas frecuentes

¿Rive es compatible con UI Toolkit de Unity?

Todavía no. Las preguntas frecuentes de Rive para Unity responden "Todavía no, pero estamos trabajando en ello" y recomiendan uGUI mediante el Rive Canvas Renderer, o renderizar Rive sobre una malla. Si tus menús están en UI Toolkit, coloca el personaje en un pequeño canvas de uGUI superpuesto.

¿Por qué no se muestra mi widget de Rive en Unity?

Revisa las dos causas que señalan las preguntas frecuentes de Rive: el Rive Widget debe ser hijo de un Rive Panel y la escena necesita una cámara. En uGUI, confirma también que el panel esté bajo un Canvas y tenga el Rive Canvas Renderer en el mismo GameObject.

¿Rive para Unity funciona en consolas?

Hoy no. La descripción general de Rive para Unity incluye las consolas dentro del soporte planificado. El runtime independiente de Rive para Unreal sí incluye PlayStation 5, Nintendo Switch, Switch 2 y Xbox Series X, así que los proyectos de consola en Unreal ya tienen una opción.

Respuestas rápidas de esta guía

• ¿Rive funciona en Unity?
• ¿Rive tiene un runtime para Unreal Engine?

Fuentes

• Unity runtime overview, Rive
• Unity: Getting started, Rive
• Unity: Components, Rive
• Unity: Data binding, Rive
• Unity: Best practices, Rive
• Unity: FAQ, Rive
• Unity: State machines, Rive
• Rive Unity WebGL, rive-unity on GitHub
• Unreal Engine runtime, Rive