Unity UI में Rive मैस्कॉट: इंस्टॉल, uGUI और Data Binding
Charmotion टीम द्वारा · अपडेट:

Rive का Unity 2021 LTS और उसके बाद के versions के लिए official Unity रनटाइम है, जिसमें Unity 6 भी शामिल है। इसे Asset Store या git URL से install करें, .riv को Project window में drag करें, और Rive Panel, Rive Widget और Rive Canvas Renderer के साथ uGUI में दिखाएँ। इसके मूड को C# से data binding के ज़रिए चलाएँ।
मुख्य बातें
- सपोर्ट: Unity 2021 LTS और नए versions, WebGL, Metal (Mac, iOS), D3D11, D3D12, OpenGL और Vulkan पर; consoles को planned के रूप में लिस्ट किया गया है।
- Rive Widget का Rive Panel के अंदर होना ज़रूरी है; Rive Canvas Renderer पैनल को uGUI Canvas के अंदर दिखाता है।
- UI Toolkit अभी सपोर्टेड नहीं है; uGUI इस्तेमाल करें या Rive Texture Renderer से मेश पर render करें।
- Data Binding Mode को Auto Bind Default पर सेट करें, फिर
StateMachine.ViewModelInstanceसे number और trigger properties पढ़ें। - हर Rive Panel अपने अलग Render Texture पर render होता है, इसलिए कम पैनल इस्तेमाल करें, खासकर मोबाइल पर।
क्या Rive, Unity में काम करता है, और किन प्लेटफ़ॉर्म पर?
हाँ। Rive के Unity docs कहते हैं कि "यह package 2021 और उसके बाद के Unity LTS versions (Unity 6 सहित) को सपोर्ट करता है" और यह Rive Renderer इस्तेमाल करता है, जिसे नवीनतम C++ रनटाइम के साथ अपडेट रखा जाता है।
| एरिया | Rive के docs में स्थिति |
|---|---|
| Graphics backends | WebGL, Mac और iOS पर Metal, D3D11, D3D12, Windows और Android पर OpenGL, Windows, Android और Ubuntu 24.04+ (x86_64) पर Vulkan |
| Consoles | Planned |
| uGUI | Rive Canvas Renderer के ज़रिए सपोर्टेड |
| UI Toolkit | "अभी नहीं, लेकिन हम इस पर काम कर रहे हैं" |
| Sprite Renderer | ठीक से काम नहीं करता; इसकी जगह Rive Texture Renderer से quad पर render करें |
Rive उसी पेज पर Unity रनटाइम के लिए feature support table रखता है; नए features पर आधारित डिज़ाइन बनाने से पहले उसे चेक करें।
Rive Unity package कैसे install करें?
इसके दो तरीके हैं। Unity Asset Store package install करना आसान है और इसमें सिर्फ़ stable releases आते हैं: Window, Package Manager खोलें, My Assets चुनें, Rive ढूँढें और import करें। GitHub package में नए features वाले canary tags भी मिलते हैं। Add package from git URL इस्तेमाल करें और 0.0.0 की जगह latest release tag डालें:
https://github.com/rive-app/rive-unity.git?path=package#v0.0.0
या इसे Packages/manifest.json में जोड़ें:
"app.rive.rive-unity": "https://github.com/rive-app/rive-unity.git?path=package#v0.0.0"
Rive बताता है कि Editor खुला रहते हुए package upgrade करने पर Unity crash हो सकता है; ऐसा हो तो Unity बंद करें, manifest.json में version बदलें और फिर से खोलें। UI components के लिए com.unity.ugui भी चाहिए, जो नए projects में आमतौर पर पहले से होता है।
uGUI Canvas में Rive कैरेक्टर कैसे दिखाएँ?
.riv को Project window में drag करें; Unity इसे Rive Asset के रूप में import करता है। फिर या तो इसे Hierarchy में drag करें, जिससे uGUI Canvas के अंदर screen-space setup बन जाता है, या right-click menu से इसे खुद बनाएँ:
- Rive, Rive Panel (Canvas) एक ऐसा पैनल बनाता है जो Rive Canvas Renderer के साथ पहले से सेट होता है। पैनल का uGUI Canvas के अंदर होना ज़रूरी है, और renderer पैनल वाले उसी GameObject पर रहता है।
- Rive, Widgets, Rive Widget उस पैनल के अंदर जाता है। इसमें Rive Asset, आर्टबोर्ड और स्टेट मशीन (जैसे
CharacterViewModelMachine) assign करें।
Canvas Renderer, uGUI Canvas के हिसाब से पैनल का साइज़ तय करता है और render order और raycasting संभालता है, ताकि कैरेक्टर आपके buttons के साथ सही layer में रहे और फ़ाइल के किसी भी Rive listener के लिए pointer इनपुट पाए। अगर कुछ न दिखे, तो Rive का FAQ आम कारण बताता है: widget किसी Rive Panel के अंदर नहीं है, या scene में कोई camera नहीं है।
अगर कैरेक्टर को किसी 3D object पर रखना है, जैसे game world के अंदर एक screen, तो .riv को MeshRenderer वाले GameObject पर drop करें; Unity एक Rive Panel और एक Rive Texture Renderer जोड़ देता है।
मैस्कॉट के मूड को game state से कैसे bind करें?
Data binding इस्तेमाल करें। Rive Widget के Inspector में Data के नीचे Data Binding Mode को Auto Bind Default पर सेट करें, जो आर्टबोर्ड के default view model instance को bind करता है। फिर widget लोड होने के बाद properties लें:
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();
}
}
जहाँ भी game state बदलती है, वहाँ से इसे call करें:
// 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");
- Rive के docs में लिखा है कि property में किया गया बदलाव "तब तक उससे bound elements पर लागू नहीं होगा जब तक स्टेट मशीन या आर्टबोर्ड advance नहीं होता", और चलते समय widget यह हर फ़्रेम पर करता है।
- Number properties
floatलेती हैं; 5 जैसी पूर्ण संख्याएँ भी ठीक हैं। - फ़ाइल के अंदर कुछ होने पर प्रतिक्रिया देने के लिए किसी property के
OnValueChanged(ट्रिगर के लिएOnTriggered) को subscribe करें औरOnDestroyमें unsubscribe करें। - Rive, Unity में अपने low-level स्टेट मशीन API को legacy मानता है और data binding के साथ component API इस्तेमाल करने की सलाह देता है।
Code के साथ property names की एक लिखित सूची रखें; फ़ाइल में किसी property का नाम बदल जाए तो runtime पर कुछ नहीं मिलता। स्टेट मशीन गाइड बताती है कि मूड और ट्रिगर आमतौर पर कैसे जोड़े जाते हैं।
मोबाइल और WebGL पर Rive UI को तेज़ कैसे रखें?
Rive की Unity best practices एक तथ्य से शुरू होती हैं: "डिफ़ॉल्ट रूप से एक Rive Panel एक Render Texture में render करता है", और उस panel के नीचे का हर widget उसी texture में draw होता है। इससे ये बातें निकलती हैं:
- कम panels रखें, "खासकर मोबाइल पर", और widgets को एक साझा panel के नीचे group करें।
- uGUI में कई छोटे Rive buttons instance करने के बजाय UI के बड़े हिस्से Rive में बनाएँ।
- दोहराए जाने वाले items के लिए कई widgets के बजाय data binding lists इस्तेमाल करें।
- जो widgets नहीं दिखा रहे, उन्हें disable या destroy करें, ताकि वे advance और render होना बंद कर दें।
- स्टेट मशीन को settle होने दें। जब कुछ नहीं बदलने वाला होता, तब Rive का रनटाइम स्टेट मशीन को advance करना रोक देता है, जिससे मैस्कॉट के स्थिर pose में रहने के दौरान काम बचता है।
WebGL पर, ब्राउज़र pixel local storage extension उपलब्ध कराए तो Rive का renderer उसे इस्तेमाल करता है, वरना WebGL 2 पर MSAA पर fallback करता है, जहाँ Rive के अनुसार advanced blend modes का परफ़ॉर्मेंस पर ज़्यादा असर पड़ता है। WebGL builds को उन ब्राउज़रों में टेस्ट करें जो आपके players इस्तेमाल करते हैं।
क्या Unreal Engine के लिए Rive रनटाइम है?
हाँ। Rive ने Unreal Engine 5.7.3 और उससे ऊपर के लिए एक Unreal रनटाइम document किया है, जिसमें स्टेट मशीन, view model data binding और property observation हैं। इसकी platform सूची में DirectX 11 और 12, PC Vulkan, macOS, PlayStation 5, Nintendo Switch और Switch 2, Xbox Series X और Steam Deck शामिल हैं, और visionOS को experimental बताया गया है। मोबाइल सपोर्ट "planned है, लेकिन अभी उपलब्ध नहीं"। Rive वहाँ legacy स्टेट मशीन इनपुट को deprecated भी बताता है, इसलिए नए Unreal काम में कैरेक्टर को view models के ज़रिए चलाना चाहिए।
क्या Charmotion कैरेक्टर Unity में चल सकता है?
Charmotion की .riv एक स्टैंडर्ड Rive फ़ाइल है, इसलिए यह किसी भी दूसरी फ़ाइल की तरह इम्पोर्ट होती है। इसमें CharacterViewModelMachine पर एक Character व्यू मॉडल है: 0 से 9 तक एक mood नंबर (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention) और success, error, yes, no, enter और exit ट्रिगर, जो ऊपर के कंट्रोलर से मेल खाते हैं। Charmotion वेब, React और SwiftUI कोड देता है, C# नहीं, इसलिए इस पेज की स्क्रिप्ट वह हिस्सा है जो आप जोड़ते हैं। .riv हर पेड प्लान पर है ($20/माह से)।

Unity UI में Rive मैस्कॉट कैसे जोड़ें
- पैकेज install करें. Asset Store से Rive import करें या Package Manager में release tag के साथ rive-unity git URL जोड़ें।
- फ़ाइल import करें. Rive Asset बनाने के लिए .riv को Project window में drag करें।
- Panel बनाएँ. अपने uGUI Canvas के नीचे Rive, Rive Panel (Canvas) जोड़ें।
- Widget जोड़ें. Panel के नीचे एक Rive Widget जोड़ें और asset, आर्टबोर्ड और स्टेट मशीन चुनें।
- Data bind करें. Data Binding Mode को Auto Bind Default पर सेट करें और widget load होने के बाद C# में मूड और trigger properties लें।
- Game events जोड़ें. अपने game logic से SetMood और Fire कॉल करें और target devices पर टेस्ट करें।
अक्सर पूछे जाने वाले सवाल
क्या Rive, Unity के UI Toolkit को सपोर्ट करता है?
अभी नहीं। Rive की Unity FAQ का जवाब है "अभी नहीं, लेकिन हम इस पर काम कर रहे हैं", और यह Rive Canvas Renderer के ज़रिए uGUI या Rive को mesh पर render करने की सलाह देती है। अगर आपके menus UI Toolkit में हैं, तो कैरेक्टर को ऊपर रखे एक छोटे uGUI canvas में रखें।
मेरा Rive widget Unity में क्यों नहीं दिख रहा?
Rive की FAQ में बताए दो कारण जाँचें: Rive Widget किसी Rive Panel का child होना चाहिए, और scene में camera होना चाहिए। uGUI के लिए यह भी पक्का करें कि panel किसी Canvas के नीचे है और उसी GameObject पर Rive Canvas Renderer लगा है।
क्या Unity के लिए Rive consoles पर चल सकता है?
अभी नहीं। Rive के Unity overview में consoles को planned support में रखा गया है। Rive का अलग Unreal रनटाइम PlayStation 5, Nintendo Switch, Switch 2 और Xbox Series X को सूची में रखता है, इसलिए Unreal वाले console projects के पास अभी एक विकल्प है।
इस गाइड से झटपट जवाब
स्रोत
- 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