एक्सपेरिमेंट के तौर पर उपलब्ध, 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. अगर आपके प्रोजेक्ट में कई सीन हैं, तो पक्का करें कि आपने DontDestroyOnLoad को YTGameWrapper.cs स्क्रिप्ट में जोड़ दिया हो. ध्यान दें: स्क्रिप्ट के नए वर्शन में 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.
    }
}

requestRewardedAd

requestRewardedAd का इस्तेमाल करने का तरीका यहां बताया गया है. इसका इस्तेमाल तब किया जाता है, जब किसी उपयोगकर्ता ने आपके गेम में इनाम पाने के बदले इनाम वाला विज्ञापन देखने का विकल्प चुना हो. अगर कोई विज्ञापन उपलब्ध है, तो उसे उपयोगकर्ता को दिखाया जाएगा.

...
using YTGameSDK;
...

public YTGameWrapper ytGameWrapper;

...

public void RequestRewardedAd()
{
    // Register callback for Rewarded Ads. If an Ad is available one will be
    //  shown. Pause Game Callback should be called. Any ID is fine as long as
    //  its identifyable for your game.
    ytGameWrapper.RequestRewardedAd("my-reward-ad-id-123", (rewardEarned) => {
        if (rewardEarned) {
            // Rewarded Ad is earned, reward the user.
        } else {
            // Rewarded Ad not earned, take the appropriate action
        }
    });
}

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

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

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

WebGL टेंप्लेट

  1. शुरुआती सेटअप के लिए, ऊपर दिए गए Unity पैकेज के निर्देशों का पालन करें. Google-WebGLTemplate-only.unitypackage या GoogleYTGameWrapper-with-sample.unitypackage का इस्तेमाल करें. साथ ही, WebGLTemplates/YTGameWrapperTemplate/ फ़ोल्डर में मौजूद सभी फ़ाइलें इंपोर्ट करें.
    • ध्यान दें: अगर आपने अब तक YTGameWrapper.cs और UnityYTGameSDKLib.jslib इंपोर्ट नहीं किए हैं, तो आपको उन्हें भी इंपोर्ट करना चाहिए.
  2. YTGameWrapperTemplate का इस्तेमाल करने के लिए, WebGL टेंप्लेट सेट करें. यह सेटिंग Edit -> Project settings -> Player -> WebGL टैब -> Resolution and Presentation सेक्शन में मौजूद है.
    • ध्यान दें: टेंप्लेट में, कैनवस की डिफ़ॉल्ट चौड़ाई और ऊंचाई 100% पर सेट होती है. इसलिए, Unity की इन सेटिंग से कुछ भी अडजस्ट नहीं होगा.
  3. पक्का करें कि Compression Format को बंद पर सेट किया गया हो. यह सेटिंग, Project settings -> Player -> WebGL टैब -> Publishing Settings सेक्शन में होती है.
  4. Build Settings विंडो में WebGL के लिए बनाएं. इसके बाद, अपने प्रोजेक्ट की ज़रूरतों के हिसाब से सातवें या पांचवें चरण पर जाएं.
  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 से बनाई गई सभी फ़ाइलें, चौथे चरण में बताई गई जगह पर भेजनी होंगी. अगर पांचवें और छठे चरण में बताई गई फ़ाइलें भी शामिल की गई हैं, तो उन्हें भी शामिल करें.

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

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 का इस्तेमाल करते समय, डेवलपर को जिन मुख्य समस्याओं का सामना करना पड़ता है उनमें से एक है, फ़ाइल के साइज़ से जुड़ी ज़रूरी शर्तों और बंडल के कुल साइज़ से जुड़ी ज़रूरी शर्तों को पूरा करना.

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

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

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

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

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

ऐसेट बंडल

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

YT Playables API के बारे में पूरी जानकारी देखें.