Unity Wrapper ของฟีเจอร์เล่นเกมของ YouTube รุ่นทดลอง

Wrapper นี้ช่วยให้คุณเข้าถึง YouTube Playables SDK ใน Unity C# ได้ Wrapper มีปลั๊กอิน .jslib และไฟล์ C# เพื่อช่วยเร่งความเร็วในการพัฒนา นอกจากนี้ยังมีโปรเจ็กต์ตัวอย่างที่แสดงวิธีใช้ฟีเจอร์เหล่านี้ในโปรเจ็กต์ของคุณด้วย

คุณดาวน์โหลดแพ็กเกจ Unity ได้จากที่เก็บตัวอย่างของฟีเจอร์เล่นเกม

การใช้งาน

  1. ตรวจสอบว่าตั้งค่าแพลตฟอร์มโปรเจ็กต์ Unity เป็น WebGL การตั้งค่านี้จะอยู่ใน Build Settings
  2. ใช้ WebGLTemplate เพื่อสร้างเกมสำหรับเว็บ หรือทำตามส่วนใช้ไฟล์ index.html ของคุณเองและตรวจสอบว่าคุณได้ตั้งค่าและเริ่มต้นใช้งาน Web SDK ในไฟล์ index.html แล้ว
    • WebGLTemplate จะอยู่ในแพ็กเกจ Google-WebGLTemplate-only.unitypackage หรือ GoogleYTGameWrapper-with-sample.unitypackage หากต้องการตั้งค่าและใช้เทมเพลตนี้ ให้ทำตามขั้นตอนในส่วนเทมเพลต WebGL
    • หากต้องการใช้ไฟล์ Web และ index.html ของคุณเอง คุณจะต้องเพิ่ม 2 บรรทัดลงในสคริปต์การสร้าง index.html Unity ดูส่วนใช้ไฟล์ index.html ของคุณเองสำหรับการผสานรวม
  3. เปิดโปรเจ็กต์ใน Unity จากนั้นเปิดและนำเข้าแพ็กเกจใดแพ็กเกจหนึ่งลงในโปรเจ็กต์
    • GoogleYTGameWrapper.unitypackage: มีปลั๊กอิน JS สำหรับเชื่อมต่อ SDK ของ YouTube Playables และ Wrapper C# เพื่อช่วยเชื่อมต่อกับ ผลิตภัณฑ์ของคุณ
    • GoogleYTGameWrapper-with-sample.unitypackage: มีไฟล์และเนื้อหาเดียวกันกับที่พบในแพ็กเกจ GoogleYTGameWrapper และตัวอย่างที่แสดงวิธีใช้ YouTube Playables SDK ใน C#
  4. สำคัญ: ในฉากหลัก ให้สร้าง Gameobject ใหม่และตั้งชื่อเป็น YTGameWrapper ออบเจ็กต์เกมนี้ใช้เพื่อสื่อสารกับ JS Bridge
  5. สำคัญ: เพิ่มโค้ด YTGameWrapper.cs ที่นำเข้าเป็นคอมโพเนนต์สคริปต์ ไปยัง GameObject YTGameWrapper
  6. หากโปรเจ็กต์มีหลายฉาก ให้ตรวจสอบว่าได้เพิ่ม DontDestroyOnLoad ลงในสคริปต์ YTGameWrapper.cs แล้ว (หมายเหตุ: สคริปต์เวอร์ชันใหม่มีปุ่มเปิด/ปิด DontDestroyOnSceneChange ซึ่งเปิดอยู่โดยค่าเริ่มต้น) ซึ่งจะช่วยให้มั่นใจได้ว่าสคริปต์และ GameObject จะคงอยู่ตลอดทั้งเกม

    GameObject.DontDestroyOnLoad(this.gameObject);
    
  7. คอมโพเนนต์ YTGameWrapper.cs และ GameObject YTGameWrapper ใช้เพื่อเชื่อมต่อกับ YouTube Playables SDK ใช้ข้อมูลเหล่านี้เพื่อเชื่อมต่อกับ YouTube ไม่ว่าจะใช้สคริปต์เพื่อค้นหาออบเจ็กต์และคอมโพเนนต์ หรือเพิ่มด้วยตนเอง ลงในโค้ดเกมผ่าน Unity Editor

  8. ตรวจสอบว่าคุณปฏิบัติตามข้อกำหนดทางเทคนิคสำหรับโปรเจ็กต์

ใช้ไฟล์ index.html ของคุณเอง

หากไม่ได้ใช้index.htmlตัวอย่างที่ให้ไว้ คุณจะต้องเพิ่มโค้ด 2 บรรทัดลงในindex.htmlสคริปต์การสร้าง Unity

ก่อนอื่น ให้เพิ่มบรรทัดนี้ในตำแหน่งเดียวกับที่โปรเจ็กต์ตั้งค่าตัวแปรสำหรับ คอนเทนเนอร์ Unity, Canvas ฯลฯ

    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 >

    ...

ตัวอย่าง

ส่วนนี้มีตัวอย่างวิธีใช้ Wrapper C# แต่ไม่ใช่รายการ API ทั้งหมดที่พร้อมใช้งาน ดูรายการ API ทั้งหมดที่พร้อมใช้งานได้ที่ YouTube Playables SDK

sendScore

ตัวอย่างนี้แสดงการติดตั้งใช้งาน sendScore(int points) ใน C#

...
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

นี่คือตัวอย่างวิธีที่เกมสามารถฟังเหตุการณ์ Pause ที่มาจาก YT Playables เพื่อหยุดชั่วคราวเมื่อจำเป็น

...
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.
    }
}

วิธีใช้เทมเพลต WebGL ตัวอย่างของ YouTube

เว้นแต่ว่าคุณจะมีโปรเจ็กต์ Unity ที่มีขนาดใหญ่มาก ไฟล์ .wasm และ .data ที่คุณสร้าง ควรมีขนาดไม่เกินขีดจำกัดขนาดไฟล์ของเรา หากเป็นกรณีนี้ คุณไม่ควรบีบอัดไฟล์เหล่านี้เพิ่มเติม เนื่องจากระบบจะบีบอัดไฟล์ที่เล่นได้โดยอัตโนมัติเมื่อคุณส่ง การบีบอัดอัตโนมัตินี้จะช่วยยืนยันว่าไฟล์ .wasm มีขนาดตรงตามข้อกำหนดขนาดของแพ็กเกจเริ่มต้นด้วย ตัวอย่างเช่น ไฟล์ .wasm ขนาดประมาณ 25 MiB จะบีบอัดเป็นขนาดประมาณ 7 MiB

หากไฟล์มีขนาดเกินขีดจำกัดขนาดไฟล์สูงสุด คุณควรใช้การบีบอัด ZIP เพื่อให้แน่ใจว่าไฟล์มีขนาดไม่เกินขีดจำกัดนี้ การบีบอัดที่เล่นได้ จะไม่บีบอัดไฟล์เหล่านี้อีก

เทมเพลต 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
    • หมายเหตุ: ระบบจะตั้งค่าความกว้างและความสูงของ Canvas เริ่มต้นเป็น 100% ในเทมเพลต ดังนั้น การตั้งค่า Unity เหล่านี้จะไม่ปรับเปลี่ยนสิ่งใด
  3. ตรวจสอบว่าได้ตั้งค่า Compression Format เป็น "ปิดใช้" การตั้งค่านี้อยู่ใน Project settings -> Player -> แท็บ WebGL -> ส่วน Publishing Settings
  4. สร้างสำหรับ WebGL ในหน้าต่าง Build Settings จากนั้นไปที่ขั้นตอนที่ 7 หรือ 5 ตามความต้องการของโปรเจ็กต์
  5. ทำตามขั้นตอนที่ 5 และ 6 เท่านั้นหากใช้การบีบอัด: หลังจากสร้างโปรเจ็กต์แล้ว ให้ไปที่ตำแหน่งโฟลเดอร์บิลด์แล้วเปิดโฟลเดอร์ Build ค้นหาไฟล์โปรเจ็กต์ .wasm หรือ .data ที่ต้องบีบอัดให้มีขนาดตามขีดจำกัดขนาดไฟล์แต่ละรายการ แล้วบีบอัดไฟล์เหล่านั้น อย่าลืมลบไฟล์ .wasm/.data ต้นฉบับที่บีบอัดแล้ว เนื่องจากคุณจะต้องส่งไฟล์ *.wasm.zip และ *.data.zip แทน
    • หมายเหตุ: หากใช้ Mac ให้คลิกขวาที่ไฟล์แล้วเลือก "บีบอัด *" ส่วนใน PC ให้คลิกขวาที่ไฟล์แล้วเลือก "บีบอัดเป็น ไฟล์ ZIP"
  6. ทำตามขั้นตอนนี้เฉพาะในกรณีที่คุณทำขั้นตอนที่ 5: อัปเดตไฟล์ index.html ที่สร้างจาก YTGameWrapperTemplate เพื่อโหลดไฟล์ที่ซิปและขยายไฟล์
    • ที่ส่วนท้ายของindex.html คุณจะเห็นPath 1และ ให้แสดงความคิดเห็นในบรรทัดต่อไปนี้ InitUnitySection();
    • ที่ส่วนท้ายของindex.html คุณจะเห็นPath 2และ ให้แสดงความคิดเห็นในบรรทัดต่อไปนี้ loadResources(InitUnitySection);
  7. เมื่อส่งโปรเจ็กต์เพื่อรับการรับรอง คุณจะต้องส่งไฟล์ทั้งหมด ที่สร้างจาก Unity ไปยังตำแหน่งบิลด์จากขั้นตอนที่ 4 หากทำตามขั้นตอนที่ 5 + 6 แล้ว ให้รวมไฟล์เหล่านี้ด้วย

อัปเกรดตัวอย่างที่ให้ไว้เพื่อใช้ Universal Render Pipeline (URP)

ความก้าวหน้าล่าสุดอย่างหนึ่งใน Unity เวอร์ชันใหม่คือการใช้ Universal Render Pipeline (URP) หากต้องการอัปเกรดตัวอย่างเพื่อให้ทุกอย่างแสดงผล อย่างถูกต้อง

  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 หรือ Asset Bundles

Addressables

Addressables ช่วยให้คุณระบุไฟล์ต่างๆ ที่ควรโหลด พร้อมกันได้ และ Unity จะจัดการการแพ็กเกจส่วนใหญ่ให้คุณ Unity ยังมีเครื่องมือบางอย่างในการจัดการขนาดไฟล์และช่วยให้คุณไม่ทำซ้ำชิ้นงาน

หากต้องการใช้ Addressables คุณจะต้องนำเข้าแพ็กเกจ Addressables ผ่าน Package Manager ใน Unity จากนั้นจึงติดแท็กชิ้นงานลงใน Addressable Groups ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบของ Unity

Asset Bundle

Asset Bundle มีประโยชน์เนื่องจากคุณสามารถแยกโปรเจ็กต์และโหลดองค์ประกอบได้ทันที ซึ่งจะเป็นประโยชน์สำหรับ DLC, ชุดเลเวล, ตัวละครใหม่ และอื่นๆ Asset Bundle เหมาะสำหรับการโหลดและการจัดกลุ่มเนื้อหาที่จัดการด้วยตนเอง โดยคุณสามารถใช้ฟีเจอร์นี้ได้ด้วยการติดแท็กชิ้นงานลงในแพ็กเกจที่เฉพาะเจาะจง จากนั้นโหลดแพ็กเกจตามที่ต้องการ ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบเกี่ยวกับ Asset Bundle ของ Unity

ดูข้อมูลอ้างอิงเกี่ยวกับ YT Playables API ฉบับเต็ม