在上一篇公眾號文章《》中,我們為大家梳理了《火拼24》項目開發的全流程大綱,將項目從最初構思到最終產品上線的一系列步驟清晰呈現。
選擇 24 點這個基礎且經典的數學玩法,是因為我們的初衷是要向開發者展示,如何借助 Unity Online Services(UOS)的能力,將一個基礎的單機游戲原型,打造成一個可以上線,并且適合長線運營的完整的聯網游戲。玩法本身并不是我們想展示的重點,因為我們知道開發者最不缺的,就是超酷的創意!開發者可以使用 Unity 實現游戲創意的從 0 到 1,而 UOS 則能讓您的游戲充滿生命力,陪伴您的游戲從 1 走到一萬、十萬、百萬。
而今天,我們將正式開啟《火拼24》系列教程的第一節內容!
接下來,就讓我們進入本節教程的重點:配置項目環境并集成 Passport Login 來實現用戶登錄。這一步,是開啟整個項目之旅的關鍵鑰匙。它不僅能讓我們的應用擁有一個簡潔美觀的啟動界面,還能搭建起用戶與應用的橋梁,實現安全便捷的登錄功能,為后續游戲的開發和運營奠定堅實的基礎。
教程視頻
項目工程獲取與學習指引
1. 初始項目工程下載
倉庫地址:
https://cnb.cool/unity/uos/Rush24Tutorial/-/tree/lesson1-start
分支名稱:lesson1-start 分支
分支說明:請先下載 lesson1-start分支的項目工程,該分支已完成單機闖關的基礎功能,是本節學習的起點。
倉庫地址:
https://cnb.cool/unity/uos/Rush24Tutorial/-/tree/lesson1-end
分支名稱:lesson1-end 分支
分支說明:lesson1-end 分支包含本節所有功能的完整實現代碼,建議在學習完成后參考或用于調試對照。
教程學習大綱
1. 下載項目工程,安裝 UOS Launcher
2. 綁定 UOS App 并安裝 Passport Login SDK
3. 使用 PassportUI 實現用戶登錄
教程操作步驟
1. 下載項目工程,安裝 UOS Launcher
1.1 下載并打開項目工程
請先通過上面提供的 git 倉庫鏈接,下載初始狀態(lesson1-start 分支)的項目工程。
然后通過 Unity Hub,打開剛剛下載好的項目工程。在教程中,我們是使用Unity 2022.3.42 f1c1版本來打開項目工程的,該教程同樣適用于團結引擎,請大家自行選擇想要使用的版本來開始你的學習。
1.2 UOS Launcher 安裝
在 Unity Editor 菜單欄中打開「Window -> Package Manager」,點擊左上角的「+」,選擇「Add package from git URL」;
然后輸入UOS Launcher 的 git 地址,點擊「Add」等待安裝完成。
https://cnb.cool/unity/uos/UOSLauncher.git
請注意:該步驟要求當前環境已安裝 git,如果還沒安裝過 git 的話,請先前往安裝 git ,然后再通過 git 安裝 UOS Launcher。
2. 綁定 UOS App 并安裝 Passport Login SDK
2.1 UOS App 的信息綁定
溫馨提示:大家可以參考之前的的公眾號文章教程,來為你當前的項目綁定你創建好的 UOS App。
點擊菜單欄「UOS -> Open Launcher」,就可以打開 UOS 的 App 信息配置窗口了。點擊 Launcher 面板的「LinkApp」按鈕,在彈出窗口中選擇「By Unity project」,在「Select organization」這里選擇一個自己的項目組織,然后在「Select project 」選項這里,我們選擇「Create a new project 」,自行設置修改項目名字「Project name」。
教程中,我們就先選擇綁定創建好的 Rush24 應用了。
2.2 開啟 Passport 服務并安裝 SDK
在 UOS Launcher 的下拉服務窗口列表中,找到「Passport Login」,點擊「Enable」開啟服務。
然后點擊「Install SDK」,安裝 Passport Login SDK。
2.3 導入 PassportUI 資源
在彈出的窗口中,點擊「導入」按鈕,來導入 PassportUI 資源。
3. 使用 PassportUI 實現用戶登錄
登錄功能模塊的 UI 界面和腳本,我們使用的是 UOS 的 Passport 服務為用戶提供的示例模板,在之前點擊導入「PassportUI」資源的時候已經導入過了,可以直接在項目中使用,也可以根據自己喜歡的 UI 風格,進行自定義調整界面。
3.1 創建登錄控制的腳本
在 Login 腳本文件夾下,創建一個新的腳本 LoginController.cs,來實現 Passport 用戶登錄的功能。
在場景中創建一個空對象,命名為 LoginController,然后將剛才創建的腳本 LoginController.cs 掛載在當前空對象上。
在初始闖關狀態時,我們是默認就會加載游戲的數據。但是,在這里我們會修改為先使用 Passport 實現登錄功能后,再加載游戲的數據。所以,先將場景中的 LoadGameData 對象設置為隱藏狀態,后面代碼中會根據需要再激活的。
打開 LoginController.cs 腳本,添加代碼。在 Start 方法中添加判斷的代碼,如果用戶沒有為當前項目綁定 UOS App 的話,給一個錯誤提示信息:
using UnityEngine;
using Unity.UOS.Common;
using Logger = TwentyFour.Scripts.Utilities.Logger;
namespace Unity.UOS.TwentyFour
{
public class LoginController : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
if (string.IsNullOrEmpty(Settings.AppID))
{
Logger.LogError("Empty App Info! Please open the menu in editor: UOS -> Open Launcher, and enter UOS App info. For more tutorial, open the menu in editor: Tutorial -> Show Tutorial.");
}
}
}
}
3.2 初始化 PassportUI
在調用 Passport SDK 進行 UI 初始化的方法 Init 時,需要先傳入配置 _config 和回調函數 _callback。
_config 是 Passport Login SDK 進行初始化時的相關配置:來設置是否自動旋轉屏幕方向、是否通過自行調用 Login 函數啟動登錄面板,以及設置 UI 風格主題是深色還是淺色等等。
_callback 是 Passport Login SDK 的回調函數:Passport 中已經封裝注冊好了,在用戶拒絕協議、完成登錄、完成所有流程、用戶登出這幾個狀態下的回調事件。
可以在「Passport登錄」的文檔手冊上直接復制示例代碼:
https://uos.unity.cn/doc/passport/login#createScript
復制過來代碼后,修改為如下:
在 _config 中,會通過宏定義區分下,如果使用的是團結引擎或者 Unity 的話,在 WebGL 場景下分別為 UnityContainerId 賦值。主要作用是可以根據編譯環境,自動切換 WebGL 場景下的容器 ID,方便代碼在不同平臺下的兼容和維護。
在 _callback 中,如果用戶拒絕了協議,就退出游戲。也是使用宏定義區分下,是否在 Unity 編輯器中時,退出游戲的代碼的不同處理。
using System.Collections;
using System.Collections.Generic;
using Unity.Passport.Runtime.UI;
using Unity.UOS.Common;
using UnityEngine;
using Logger = TwentyFour.Scripts.Utilities.Logger;
namespace Unity.UOS.TwentyFour
{
public class LoginController : MonoBehaviour
{
// sdk 配置(Config 是 SDK 初始化時的配置)
private readonly PassportUIConfig _config = new()
{
AutoRotation = true, // 是否開啟自動旋轉,默認值為 false。
InvokeLoginManually = false, // 是否通過自行調用 Login 函數啟動登錄面板,默認值為 false。
Theme = PassportUITheme.Dark, // 風格主題配置。
#if TUANJIE_1_0_OR_NEWER
UnityContainerId = "tuanjie-container" // WebGL 場景下 Tuanjie 實例容器 Id。
#else
UnityContainerId = "unity-container" // WebGL 場景下 Unity 實例容器 Id。
#endif
};
// sdk 回調
private void _callback(PassportEvent e)
{
// event: 不同情況下的回調事件,詳情可以參考下面的回調類型。
switch (e)
{
case PassportEvent.RejectedTos:
Debug.Log("用戶拒絕了協議");
//Quit game if TOS rejected
#if UNITY_EDITOR
UnityEditor.EditorApplication.isPlaying = false;
#else
Application.Quit();
#endif
break;
case PassportEvent.LoggedIn:
Debug.Log("完成登錄");
break;
case PassportEvent.Completed:
Debug.Log("完成所有流程");
break;
case PassportEvent.LoggedOut:
Debug.Log("用戶登出");
break;
}
}
//......
}
}
然后在 LoginController.cs 腳本中添加登錄的代碼:
定義變量 coverPageHintText,用于在登錄過程中顯示提示信息。
啟動協程 InitLogin,開始初始化登錄過程。
設置 coverPageHintText 的文本為“正在...感應身份...”,向用戶顯示登錄中的狀態。
然后讓協程暫停一幀,確保 UI 有時間更新顯示后,調用 Login() 方法,正式開始登錄流程。
在 Login 方法中,會先初始化 Passport SDK,然后調用 PassportUI.Init 方法來異步初始化 Passport UI 組件。
using System.Collections;
using System.Collections.Generic;
using Unity.Passport.Runtime;
using Unity.Passport.Runtime.UI;
using Unity.UOS.Common;
using UnityEngine;
using UnityEngine.UI;
using Logger = TwentyFour.Scripts.Utilities.Logger;
namespace Unity.UOS.TwentyFour
{
public class LoginController : MonoBehaviour
{
public Text coverPageHintText;
//......
// Start is called before the first frame update
void Start()
{
if (string.IsNullOrEmpty(Settings.AppID))
{
Logger.LogError("Empty App Info! Please open the menu in editor: UOS -> Open Launcher, and enter UOS App info. For more tutorial, open the menu in editor: Tutorial -> Show Tutorial.");
}
StartCoroutine(InitLogin());
}
IEnumerator InitLogin()
{
coverPageHintText.text = "正在...感應身份...";
yield return null;
//Init Passport Login UI
Login();
}
private async void Login()
{
await PassportSDK.Initialize();
await PassportUI.Init(_config, _callback);
}
}
}
回到場景中,為 Inspector 面板上的 coverPageHintText 變量賦值:
3.3 運行測試 PassportUI 登錄的效果
此時運行游戲后,彈出的輸入框中可以輸入你的手機號:
輸入收到的短信驗證碼:
然后會需要進行實名身份認證:
所以當用戶短信驗證和實名認證通過后,會自動進入 PassportEvent.Completed 狀態。會在 Console 控制臺看到輸出的日志信息:“完成所有流程”。
點擊 Passport Login 旁邊的「Developer Portal」按鈕,可以進入 UOS 網頁端的 Passport 模塊來查看信息。
在 Passport 的「用戶管理」頁面,可以看到已創建的用戶。
3.4 激活加載關卡數據的游戲對象
用戶登錄后,我們加載游戲數據進入闖關環節。所以需要先激活場景中的加載關卡數據的游戲對象 LoadGameData。
找到 LoginController.cs 腳本,定義加載數據的變量 loadGameData;
添加 GotoLoadingPage 方法,來激活場景中的 LoadGameData 游戲對象;
然后在 _callback 回調方法的 PassportEvent.Completed 狀態下,調用方法 GotoLoadingPage。
namespace Unity.UOS.TwentyFour
{
public class LoginController : MonoBehaviour
{
public GameObject loadGameData;
// sdk 回調
private void _callback(PassportEvent e)
{
// event: 不同情況下的回調事件,詳情可以參考下面的回調類型。
switch (e)
{
//......
case PassportEvent.Completed:
Debug.Log("完成所有流程");
GotoLoadingPage();
break;
}
}
//......
void GotoLoadingPage()
{
loadGameData.SetActive(true);
}
}
}
在場景中,為 Inspector 面板上的 loadGameData 變量賦值:
此時也可以運行游戲進行測試下,看到登錄成功后可以進行游戲闖關了。
3.5 修改 Passport 登錄配置
在「登錄配置」模塊,點擊選中「模擬短信驗證」,這樣驗證碼直接輸入「111111」即可;取消選中「實名認證」,則暫時不再驗證用戶的身份信息。根據需要也可以自定義配置下用戶協議:
然后我們再次點擊運行項目,是會看到在彈出的窗口中詢問是否接受協議的。點擊「接受以上協議」后,會直接進入游戲主頁面進行闖關的。
3.6 實現登出 Passport 賬戶
但是如果我們修改了 Passport 的登錄配置后,想要重新驗證下效果的話,可以選擇先登出賬號,然后再重新登錄。
登出按鈕為:
找到 MainScene 場景中的 UI 對象 PlayerInfoPanel 下的按鈕 Button_LogOut,可以看到它身上已經綁定好的事件:點擊按鈕時會激活 Popup_Logout 面板。
在 Login 文件夾下,創建實現賬戶登出的腳本 LogoutController.cs。
腳本 LogoutController.cs 中代碼如下:
PassportLogin SDK 是 UOS 提供的身份認證服務,用于管理用戶登錄狀態(如設備登錄、第三方賬號關聯等)。
通過 PassportLoginSDK 集成的 Logout() 方法,主動終止當前用戶的登錄會話。這一步會清除本地存儲的用戶憑證(如Token)、重置身份狀態,并通知 Passport 服務端用戶已登出。
using UnityEngine;
using Unity.Passport.Runtime;
using TwentyFour.Scripts.Gameplay.HomePage;
namespace TwentyFour.Scripts.Features.Player
{
public class LogoutController : MonoBehaviour
{
public void Logout()
{
PassportLoginSDK.Identity.Logout();
GameRouter.LoadStartScene();
}
}
}
接著會調用 GameRouter.cs 腳本中的加載初始場景的方法 LoadStartScene:
public static class GameRouter
{
public static void LoadStartScene()
{
SceneManager.LoadScene(StartScene);
}
}
然后找到 Popup_Logout 面板下的確認退出的按鈕子對象 Button_OK,將 LogoutController.cs 腳本掛載到它身上。
同時,為 Button_OK 按鈕選擇綁定 LogoutController.cs 腳本中的 Logout 方法。
修改為以上設置后,記得將 PlayerInfoPanel 和 Popup_Logout 面板都恢復為默認的隱藏狀態。
然后我們再次點擊運行項目,退出賬號重新登錄時,在輸入手機號的驗證碼頁面,大家就可以使用 111111 了,也不再需要進行實名認證了。
下節教程預告
教程主題——《火拼24》系列教程一(下):創建角色
《火拼24》下一篇教程:即將上線!會在現有功能的基礎上,帶大家完整實現「角色創建-服務端管理」流程,并添加了角色昵稱的敏感詞校驗機制,幫你從源頭規范游戲身份信息。
記得鎖定更新,別錯過每一步關鍵指南!
學習福利與兌換指南
我們為大家精心準備了一份學習福利喲——參與《火拼24》學習項目,在學習過程中所使用的云資源將全部免費!
那么,如何獲取這份福利呢?以下是兌換流程:
關注「UOS游戲云服務」公眾號,然后在公眾號內發送消息「24點教程」,你將會收到《火拼24》教程專屬兌換碼:
接下來,打開 UOS App 網頁端,進入「設置」頁面,在頁面右上角找到并點擊「兌換福利」按鈕。
在彈出的窗口中,輸入你之前收到的《火拼24》教程專屬兌換碼,再點擊「兌換福利」按鈕就可以啦!
兌換成功后,在「概覽」頁面,你就能看到《火拼24》學習項目的相關說明,請大家仔細閱讀哦!
寄語
是時候開啟你的開發實踐之旅了!
立即下載 《火拼24》第一節教程的分支代碼,跟隨教程搭建 Launcher 的啟動界面,集成 Passport Login 安全登錄系統!從經典 24 點玩法到完整聯網游戲,每一步實踐都是成長的勛章。
立即行動,解鎖游戲開發的第一塊基石——讓《火拼24》成為你技術進階的實戰平臺,見證從功能模塊到完整產品的系統性蛻變!
Unity Online Services (UOS) 是一個專為游戲開發者設計的一站式游戲云服務平臺,提供覆蓋游戲全生命周期的開發、運營和推廣支持。
了解更多 UOS 相關信息:
官網:https://uos.unity.cn
技術交流 QQ 群:823878269
Unity 官方微信
第一時間了解Unity引擎動向,學習進階開發技能
每一個“點贊”、“在看”,都是我們前進的動力
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.