एक्सपेरिमेंट के तौर पर उपलब्ध, YouTube Playables का Unity रैपर

इस रैपर की मदद से, Unity C# में YouTube Playables SDK को ऐक्सेस किया जा सकता है. रैपर में .jslib प्लग-इन और C# फ़ाइल होती है, ताकि डेवलपमेंट की प्रोसेस को तेज़ किया जा सके. एक सैंपल प्रोजेक्ट भी है, जिसमें दिखाया गया है कि इन्हें अपने प्रोजेक्ट में कैसे इस्तेमाल किया जा सकता है.

Unity पैकेज, हमारे Playables सैंपल रेपो से डाउनलोड किए जा सकते हैं.

इस्तेमाल

1. पुष्टि करें कि आपके Unity प्रोजेक्ट का प्लैटफ़ॉर्म, WebGL पर सेट हो. यह सेटिंग Build Settings में मौजूद है.
2. वेब के लिए अपना गेम बनाने के लिए, WebGLTemplate का इस्तेमाल करें. इसके अलावा, अपनी index.html फ़ाइल का इस्तेमाल करें सेक्शन में दिए गए निर्देशों का पालन करें. साथ ही, पुष्टि करें कि आपने अपनी index.html फ़ाइल में वेब एसडीके को सेटअप और चालू किया हो.
   • WebGLTemplate को पैकेज Google-WebGLTemplate-only.unitypackage या GoogleYTGameWrapper-with-sample.unitypackage में देखा जा सकता है. इस टेंप्लेट को सेट अप करने और इस्तेमाल करने के लिए, WebGL टेंप्लेट सेक्शन में दिया गया तरीका अपनाएं.
   • अपनी वेब और index.html फ़ाइल का इस्तेमाल करने के लिए, आपको अपनी index.html Unity क्रिएशन स्क्रिप्ट में दो लाइनें जोड़नी होंगी. इंटिग्रेशन के लिए, अपनी index.html फ़ाइल का इस्तेमाल करें सेक्शन देखें.
3. Unity में अपना प्रोजेक्ट खोलें. इसके बाद, दोनों में से किसी एक पैकेज को अपने प्रोजेक्ट में खोलें और इंपोर्ट करें.
   • GoogleYTGameWrapper.unitypackage: इसमें YouTube Playables SDK को कनेक्ट करने के लिए JS प्लगिन होता है. साथ ही, इसे अपने प्रॉडक्ट से कनेक्ट करने में मदद करने के लिए C# रैपर होता है.
   • GoogleYTGameWrapper-with-sample.unitypackage: इसमें GoogleYTGameWrapper पैकेज में मौजूद फ़ाइलों का कॉन्टेंट शामिल है. साथ ही, इसमें C# में YouTube Playables SDK का इस्तेमाल करने का तरीका बताने वाला एक सैंपल भी शामिल है.
4. अहम जानकारी: अपने मुख्य सीन में एक नया गेमऑब्जेक्ट बनाएं और उसका नाम YTGameWrapper रखें. इस गेम ऑब्जेक्ट का इस्तेमाल, JS ब्रिज से कम्यूनिकेट करने के लिए किया जाता है.
5. अहम जानकारी: इंपोर्ट किए गए YTGameWrapper.cs कोड को YTGameWrapper GameObject में स्क्रिप्ट कॉम्पोनेंट के तौर पर जोड़ें.

6. अगर आपके प्रोजेक्ट में कई सीन हैं, तो पक्का करें कि आपने YTGameWrapper.cs स्क्रिप्ट में DontDestroyOnLoad जोड़ा हो (ध्यान दें: स्क्रिप्ट के नए वर्शन में DontDestroyOnSceneChange टॉगल होता है, जो डिफ़ॉल्ट रूप से चालू होता है). इससे यह पक्का होगा कि स्क्रिप्ट और GameObject, आपके पूरे गेम में मौजूद रहे.

   GameObject.DontDestroyOnLoad(this.gameObject);
   

7. YTGameWrapper.cs कॉम्पोनेंट और YTGameWrapper GameObject का इस्तेमाल, YouTube Playables SDK से कनेक्ट करने के लिए किया जाता है. इनका इस्तेमाल करके, YouTube से कनेक्ट करें. ऑब्जेक्ट और कॉम्पोनेंट ढूंढने के लिए स्क्रिप्ट का इस्तेमाल करें या Unity Editor की मदद से, इन्हें अपने गेम कोड में मैन्युअल तरीके से जोड़ें.

8. पुष्टि करें कि आपने अपने प्रोजेक्ट के लिए, तकनीकी शर्तों का पालन किया हो.

अपनी index.html फ़ाइल का इस्तेमाल करना

अगर आपने दिए गए index.html उदाहरण का इस्तेमाल नहीं किया है, तो आपको अपनी index.html Unity क्रिएशन स्क्रिप्ट में कोड की दो लाइनें जोड़नी होंगी.

सबसे पहले, इस लाइन को उसी जगह पर जोड़ें जहां आपका प्रोजेक्ट, Unity कंटेनर, कैनवस वगैरह के लिए वैरिएबल सेट अप करता है.

    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");

    var unityGameInstance = null; // <-- Add this line >

    ...

दूसरा, createUnityInstance फ़ंक्शन में यह लाइन जोड़ें.

    createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
    }).then((unityInstance) => {

        unityGameInstance = unityInstance; // <-- Add this line >

    ...

उदाहरण

इस सेक्शन में, C# रैपर का इस्तेमाल करने के कुछ उदाहरण दिए गए हैं. यह उपलब्ध एपीआई की पूरी सूची नहीं है. उपलब्ध सभी एपीआई की पूरी सूची देखने के लिए, YouTube Playables SDK देखें.

sendScore

इस उदाहरण में, C# में sendScore(int points) को लागू करने का तरीका दिखाया गया है:

...
using YTGameSDK;
...

public YTGameWrapper ytGameWrapper;
public int battleScore = 0;

...

// Update the total score and send this to the YouTube Game Wrapper.
public void UpdateScores(int scoreAmt)
{
    battleScore += scoreAmt;
    // ytGameWrapper should be a reference to your YTGameWrapper component.
    ytGameWrapper.SendGameScore(battleScore);
}

onPause

यहां एक उदाहरण दिया गया है, जिसमें बताया गया है कि कोई गेम, YT Playables से मिलने वाले Pause इवेंट को कैसे सुन सकता है, ताकि ज़रूरत पड़ने पर वह अपने इंजन को रोक सके:

...
using YTGameSDK;
...

public YTGameWrapper ytGameWrapper;
public bool gameIsPaused = false;

...
void Start()
{
    // Sets the OnPause callback with the YT Playables SDK
    ytGameWrapper.SetOnPauseCallback(PauseTheGameCallback);
}

// Pause game callback, will pause the game when called.
public void PauseTheGameCallback()
{
    gameIsPaused = true;
}

saveData

यहां saveData को इस्तेमाल करने का तरीका बताया गया है. इसे YT Playables SDK को भेजा जा रहा है:

...
using YTGameSDK;
...

public YTGameWrapper ytGameWrapper;

...

// Saves the current score of the game and converts it to a JSON format.
public void SaveScore(int scoreAmt)
{
    SaveGameData("{\"BestScore\": \"" + scoreAmt.ToString() + "\"}");
}

public void SaveGameData(string saveString)
{
    if (string.IsNullOrEmpty(saveString)) return;

    // Sends save data to the YT Playables SDK
    ytGameWrapper.SendGameSaveData(saveString);
}

loadData

यहां loadData को इस्तेमाल करने का तरीका बताया गया है. इसे YT Playables SDK को भेजा जा रहा है:

...
using UnityEngine;
using YTGameSDK;
...

[Serializable]
public class LoadedScores
{
    public int BestScore;
    public float BestTime;
}

public YTGameWrapper ytGameWrapper;

...

void Start()
{
    ytGameWrapper.LoadGameSaveData(LoadSaveGameDataReturned);
}

public void LoadSaveGameDataReturned(string data)
{
    if (!string.IsNullOrEmpty(data))
    {
        LoadedScores loadedScores = JsonUtility.FromJson<LoadedScores>(data);
        Debug.Log("LoadSaveGameDataReturned > Score <" + loadedScores.BestScore.ToString()
                  +   "> Time <" + loadedScores.BestTime.ToString("0.00"));
    }
}

requestInterstitialAd

इस उदाहरण में, requestInterstitialAd का इस्तेमाल करने का तरीका बताया गया है. इससे पता चलता है कि अगर इंटरस्टीशियल विज्ञापन उपलब्ध है, तो उसे दिखाने का यह सही समय है. बेहतर नतीजों के लिए, गेमप्ले के दौरान ब्रेक में यह कॉल करें. उदाहरण के लिए, लेवल के आखिर में.

...
using YTGameSDK;
...

public YTGameWrapper ytGameWrapper;

...

// At the end of a round send a request to show an interstitial Ad, if one is
//  available an Ad will be shown and Pause Game Callback should be called.

// EXAMPLE: send and forget
public void RequestInterstitialAd()
{
    ytGameWrapper.RequestInterstitialAd();
}

// EXAMPLE: send and react to if an Ad was shown
public void RequestInterstitialAd()
{
    int status = ytGameWrapper.RequestInterstitialAd();
    if (status == 0)
    {
        // Ad request was successful, do some action.
    }
}

YouTube के उदाहरण वाले WebGL टेंप्लेट का इस्तेमाल करने का तरीका

अगर आपका Unity प्रोजेक्ट बहुत बड़ा नहीं है, तो आपकी बनाई गई .wasm और .data फ़ाइलें, फ़ाइल के साइज़ की तय सीमा के अंदर होनी चाहिए. अगर ऐसा है, तो इन फ़ाइलों को अपनी ओर से कंप्रेस न करें. ऐसा इसलिए, क्योंकि Playable फ़ाइलें सबमिट करने पर, ये अपने-आप कंप्रेस हो जाएंगी. अपने-आप कंप्रेस होने की इस प्रोसेस से यह भी पुष्टि हो जाएगी कि आपकी .wasm फ़ाइल, शुरुआती बंडल के साइज़ से जुड़ी ज़रूरी शर्तों को पूरा करती है. उदाहरण के लिए, ~25 एमआईबी की .wasm फ़ाइल को कंप्रेस करने पर, उसका साइज़ ~7 एमआईबी हो जाएगा.

अगर किसी वजह से आपकी फ़ाइलें, फ़ाइल के ज़्यादा से ज़्यादा साइज़ की सीमा से ज़्यादा हैं, तो ZIP फ़ॉर्मैट में कंप्रेस करके यह पक्का करें कि वे इस सीमा के अंदर हों. Playable compression इन फ़ाइलों को फिर से कंप्रेस नहीं करेगा.

ध्यान दें: फ़िलहाल, Unity के gzip या brotli कंप्रेशन का इस्तेमाल करके बनाए गए Unity प्रोजेक्ट के लिए, यह सुविधा उपलब्ध नहीं है. सभी प्रोजेक्ट बिना कंप्रेस किए जाने चाहिए. अगर कंप्रेस करने की ज़रूरत हो, तो शुरुआती बिल्ड के बाद ऐसा किया जाना चाहिए.

WebGL टेंप्लेट

1. शुरुआती सेटअप के लिए, ऊपर दिए गए Unity पैकेज के निर्देशों का पालन करें. पक्का करें कि आपने Google-WebGLTemplate-only.unitypackage या GoogleYTGameWrapper-with-sample.unitypackage का इस्तेमाल किया हो और WebGLTemplates/YTGameWrapperTemplate/ फ़ोल्डर में मौजूद सभी फ़ाइलें इंपोर्ट की हों.
   • ध्यान दें: अगर आपने अब तक YTGameWrapper.cs और UnityYTGameSDKLib.jslib इंपोर्ट नहीं किया है, तो आपको उन्हें भी इंपोर्ट करना चाहिए.
2. WebGL टेंप्लेट को YTGameWrapperTemplate का इस्तेमाल करने के लिए सेट करें. यह सेटिंग Edit -> Project settings -> Player -> WebGL टैब -> Resolution and Presentation सेक्शन में मौजूद है.
   • ध्यान दें: टेंप्लेट में कैनवस की डिफ़ॉल्ट चौड़ाई और ऊंचाई 100% पर सेट होती है. इसलिए, Unity की इन सेटिंग में कोई बदलाव नहीं होगा.
3. पक्का करें कि Compression Format को 'बंद है' पर सेट किया गया हो. यह सेटिंग Project settings -> Player -> WebGL टैब -> Publishing Settings सेक्शन में मौजूद है.
4. WebGL विंडो में WebGL के लिए बनाएं. इसके बाद, अपने प्रोजेक्ट की ज़रूरतों के हिसाब से चरण 7 या 5 पर जाएं.Build Settings
5. अगर कंप्रेस करने की सुविधा का इस्तेमाल किया गया है, तो सिर्फ़ पांचवां और छठा चरण पूरा करें: प्रोजेक्ट बनने के बाद, अपने बिल्ड फ़ोल्डर की लोकेशन पर जाएं और Build फ़ोल्डर खोलें. अपने उन प्रोजेक्ट .wasm या .data फ़ाइलों को ढूंढें जिन्हें कंप्रेस करने की ज़रूरत है, ताकि वे फ़ाइल के साइज़ की तय सीमा में आ सकें. इसके बाद, इन फ़ाइलों को ज़िप करें. पक्का करें कि आपने कंप्रेस की गई मूल .wasm/.data फ़ाइलें मिटा दी हों, क्योंकि आपको *.wasm.zip और *.data.zip फ़ाइलें सबमिट करनी होंगी.
   • ध्यान दें: अगर Mac का इस्तेमाल किया जा रहा है, तो फ़ाइल पर राइट क्लिक करके "* को कंप्रेस करें" को चुनें. पीसी पर, फ़ाइल पर राइट क्लिक करके "ज़िप फ़ाइल में कंप्रेस करें" को चुनें.
6. सिर्फ़ तब इस चरण को पूरा करें, जब आपने पांचवां चरण पूरा कर लिया हो: ज़िप की गई फ़ाइलों को लोड करने और उन्हें अनज़िप करने के लिए, YTGameWrapperTemplate से बनाई गई index.html फ़ाइल को अपडेट करें.
   • index.html फ़ाइलों के आखिर में, आपको Path 1 दिखेगा. इसके बाद, InitUnitySection(); लाइन को टिप्पणी के तौर पर मार्क करें.
   • index.html फ़ाइलों के आखिर में, आपको Path 2 दिखेगा. इसके बाद, loadResources(InitUnitySection); लाइन को टिप्पणी के तौर पर मार्क करें.
7. सर्टिफ़िकेशन के लिए अपना प्रोजेक्ट सबमिट करते समय, आपको यूनिटी से बनाई गई सभी फ़ाइलों को चौथे चरण में बताई गई जगह पर भेजना होगा. अगर आपने पांचवां और छठा चरण पूरा किया है, तो इन फ़ाइलों को भी शामिल करें.

यूनिवर्सल रेंडर पाइपलाइन (यूआरपी) का इस्तेमाल करने के लिए, दिए गए सैंपल को अपग्रेड करें

Unity के नए वर्शन में, सबसे नई टेक्नोलॉजी का इस्तेमाल किया जाता है. इनमें से एक है यूनिवर्सल रेंडर पाइपलाइन (यूआरपी). सैंपल को अपग्रेड करने के लिए, ताकि सब कुछ सही तरीके से रेंडर हो.

1. GoogleYTGameWrapper-with-sample.unitypackageपैकेज को किसी नए या मौजूदा प्रोजेक्ट में इंपोर्ट करके शुरू करें.
2. Render Pipeline Converter विंडो पर जाएं: Window -> Rendering -> Render Pipeline Converter.
3. Rendering Settings, Material Upgrade, और Readonly Material Converter को चुनें.
4. इसके बाद, Initialize and Convert को चुनें. इसके पूरा होने का इंतज़ार करें. इसके बाद, सैंपल URP के लिए तैयार हो जाएगा.

अपने यूनिटी प्रोजेक्ट में ऐसेट को अलग-अलग हिस्सों में बांटने का तरीका (लेज़ी लोडिंग)

Unity का इस्तेमाल करते समय, डेवलपर को जिन मुख्य समस्याओं का सामना करना पड़ता है उनमें से एक है, फ़ाइल के साइज़ से जुड़ी ज़रूरी शर्तों और बंडल के कुल साइज़ से जुड़ी ज़रूरी शर्तों का पालन करना.

ऐसेट को ज़रूरत के हिसाब से लोड करने की सुविधा, आपके प्रोजेक्ट के लिए एक बेहतरीन ऑप्टिमाइज़ेशन है. इसकी मदद से, ऐसेट, लेवल, और डेटा को ज़रूरत के हिसाब से लोड किया जा सकता है. अगर आपने ऐसा किया है, तो हमारी सर्टिफ़िकेशन टीम, फ़ाइल के साइज़ से जुड़ी पाबंदियों को हटा सकती है. ऐसा इसलिए, क्योंकि आपका पूरा गेम एक साथ लोड नहीं होगा. हालांकि, जब कोई उपयोगकर्ता आपके प्रॉडक्ट पर जाएगा, तब गेम लोड होगा.

ऐसेट को सही तरीके से लोड करने के लिए, Unity में उन्हें अलग-अलग हिस्सों में बांटने के कई तरीके हैं. इससे यह पुष्टि की जा सकती है कि आपके हर ऐसेट ग्रुप का साइज़, तय सीमा के अंदर है. साथ ही, यह भी पुष्टि की जा सकती है कि आपने कॉन्टेंट को समय के साथ लोड किया है. हमारा सुझाव है कि आप Addressables या AssetBundles में से किसी एक का इस्तेमाल करें.

ऐड्रेस किए जा सकने वाले ऑब्जेक्ट

Addressables की मदद से, उन अलग-अलग फ़ाइलों की पहचान की जा सकती है जिन्हें एक साथ लोड किया जाना चाहिए. साथ ही, Unity आपके लिए ज़्यादातर पैकेजिंग को मैनेज करेगा. Unity, फ़ाइल के साइज़ को मैनेज करने के लिए कुछ टूल भी उपलब्ध कराता है. इससे यह पक्का करने में मदद मिलती है कि आपकी ऐसेट डुप्लीकेट न हों.

Addressables का इस्तेमाल करने के लिए, आपको Unity में Package Manager के ज़रिए Addressables पैकेज इंपोर्ट करना होगा. इसके बाद, अपनी ऐसेट को Addressable Groups में टैग करना होगा. ज़्यादा जानकारी के लिए, Unity का दस्तावेज़ देखें.

ऐसेट बंडल

ऐसेट बंडल का इस्तेमाल करना फ़ायदेमंद होता है, क्योंकि इनकी मदद से प्रोजेक्ट को अलग-अलग हिस्सों में बांटा जा सकता है और ज़रूरत के हिसाब से एलिमेंट लोड किए जा सकते हैं. ये डीएलसी, लेवल पैक, नए किरदार वगैरह के लिए मददगार होते हैं. ऐसेट बंडल, खुद से मैनेज किए जाने वाले कॉन्टेंट को लोड करने और बंडल करने के लिए बेहतरीन होते हैं. इनका इस्तेमाल, ऐसेट को खास बंडल में टैग करके किया जा सकता है. इसके बाद, ज़रूरत के हिसाब से बंडल लोड किए जा सकते हैं. ज़्यादा जानकारी के लिए, Unity के ऐसेट बंडल से जुड़ा दस्तावेज़ पढ़ें.

YT Playables API का पूरा रेफ़रंस देखें.