अपने कैरेक्टर की एक PNG, JPEG या WebP इमेज अपलोड करें। आपको एक .riv मिलती है जो पहले से रिग, कीफ़्रेम और वायर की हुई होती है: 10 लूप के लिए एक मूड नंबर, 6 वन-शॉट के लिए ट्रिगर और एक लॉन्च इंट्रो, जो वेब, iOS, Android, Flutter और React Native के लिए तैयार है।
यह वही असली .riv है जो हमारा इंजन डिलीवर करता है, और यह आपके ब्राउज़र में चल रहा है। यह वही स्टेट मशीन है जिसे आप अपने ऐप से एक नंबर इनपुट और हर वन-शॉट के लिए एक ट्रिगर से चलाते हैं।
PNG से Rive एनिमेशन के लिए बेस्ट टूल्स कौन से हैं?
मुख्य विकल्प हैं: Rive एडिटर (PNG इम्पोर्ट करें, मेश और बोन्स जोड़ें, स्टेट मशीन खुद बनाएँ), पेड प्लान में Rive का एडिटर के अंदर वाला AI Agent, Charmotion जैसा जनरेटर जो एक इमेज से 17 एनिमेशन वाली .riv देता है, और कस्टम काम के लिए Contra के ज़रिए हायर किए गए Rive Experts।
CharacterViewModelMachine को Character व्यू मॉडल (Data Binding) चलाता है: नंबर mood और हर रिएक्शन के लिए एक ट्रिगर। Rive के नए Apple रनटाइम के लिए यह ज़रूरी है और हर जगह इसी की सलाह दी जाती है।
CharacterStateMachine वही ग्राफ़ है, लेकिन पारंपरिक इनपुट के साथ, उन रनटाइम और कोड के लिए जो अब भी इनका इस्तेमाल करते हैं।
LaunchStateMachine इंट्रो को एक बार चलाता है और idle पर रुक जाता है।
वन-शॉट (ट्रिगर): success · error · yes · no · enter · exit। हर एक बार चलता है, फिर मौजूदा मूड पर लौट आता है।
लॉन्च: 2.6 सेकंड का इंट्रो जो idle पर खत्म होता है।
फ़्लैट आर्टवर्क को वेक्टर हिस्सों में ट्रेस किया जाता है (हमारी डेमो .riv फ़ाइलें 36-41 KB की हैं); 3D या बारीक आर्ट के पिक्सेल वैसे ही रहते हैं, इसलिए उसकी फ़ाइल बड़ी होती है (हमारे 3D लोगो डेमो के लिए लगभग 1.0 MB)।
इसे अपने ऐप में डालें
import { Rive } from "@rive-app/canvas";
const r = new Rive({
src: "/mascot.riv",
canvas: document.querySelector("canvas"),
stateMachine: "CharacterViewModelMachine",
autoBind: true, // binds the Character view model
autoplay: true,
onLoad: () => {
const vm = r.viewModelInstance;
vm.number("mood").value = 5; // loading
vm.trigger("success").trigger(); // plays once, back to mood
},
});
वेब और React स्निपेट Data Binding का इस्तेमाल करते हैं; हर Apple रनटाइम के लिए एक SwiftUI फ़ाइल भी शामिल है।
खुद बनाना चाहते हैं?
आप यही काम Rive एडिटर में हाथ से भी कर सकते हैं: PNG इम्पोर्ट करें, मेश और बोन्स जोड़ें, हर स्टेट को कीफ़्रेम करें और स्टेट मशीन वायर करें। हमारी स्टेप-बाय-स्टेप PNG से Rive गाइड में यह सब बताया गया है। Charmotion तब काम आता है जब आप वे दिन अपने प्रोडक्ट पर लगाना चाहें।
असली आउटपुट
डिलीवर की गई फ़ाइलें, ठीक वैसी ही जैसी आप डाउनलोड करेंगे।
MP4 हर सेट
1080 × 1080, 60 fps पर। यहाँ: Gummo का हाथ हिलाना (wave), डिलीवर किए गए सेट से।
ट्रांसपेरेंट WebM और MOV हर सेट
अल्फ़ा चैनल शामिल है, इसलिए पीछे का चेकरबोर्ड दिखता है। MOV, Apple ऐप और एडिटर के लिए अल्फ़ा के साथ HEVC है।
GIF हर सेट
डॉक्स, ईमेल और चैट के लिए हल्के प्रीव्यू। Kiko का “thinking” लूप।
9:16 लॉन्च वीडियो हर सेट
स्टोरीज़ और स्प्लैश स्क्रीन के लिए 1080 × 1920। Sizzle का लॉन्च इंट्रो।
kiko.riv · 150 KB
CharacterStateMachine
नंबर इनपुट mood 0-9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention ट्रिगर: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, एक बार चलता है
Rive स्टेट मशीन हर सेट
17 वीडियो की जगह एक छोटी-सी फ़ाइल। इसी से इस पेज के ऊपर वाला डेमो चलता है।
क्या मुझे एडिट करने लायक Rive फ़ाइल मिलती है या सिर्फ़ रनटाइम .riv?
आपको एक्सपोर्ट की गई .riv मिलती है जिसे Rive रनटाइम चलाते हैं, सभी स्टेट मशीन और Character व्यू मॉडल के साथ। एनिमेशन में खुद बदलाव करना सेट का हिस्सा नहीं है।
डिलीवर की गई फ़ाइल कौन-से Rive रनटाइम चला सकते हैं?
वेब (canvas और WebGL), React, iOS (नए और पुराने Apple रनटाइम), Android, Flutter और React Native। Data Binding सपोर्ट करने वाले रनटाइम के साथ CharacterViewModelMachine और इनपुट-आधारित कोड के साथ CharacterStateMachine इस्तेमाल करें।
क्या मैं कई PNG को एक .riv में बदल सकता हूँ?
हर सेट एक इमेज से बना एक कैरेक्टर है। Starter में हर महीने 3 सेट और All in one में 10 शामिल हैं; हर सेट की अपनी .riv होती है।
अगर मेरी PNG में बैकग्राउंड हो तो?
सादा बैकग्राउंड अपने आप हटा दिया जाता है। भरे हुए बैकग्राउंड, फ़ोटो और साइड व्यू ठीक से एनिमेट नहीं होते, इसलिए अपनी इमेज जाँचने के लिए पहले फ़्री प्रीव्यू आज़माएँ।
लाइव Rive फ़ाइल
