Photon Unity Networking基礎教程 2 Lobby UI

這部分將會集中于給Lobby創建用戶界面。這部分的內容非常基礎，并且跟網絡關系不大。

主要內容

• Play按鈕
• 玩家名字
• 連接進度

Play按鈕

目前我們的Lobby是把我們自動連接到一個房間，這是有益于早期測試，但我們想讓用戶選擇是否以及何時開始游戲。 因此，我們將簡單地提供一個Button。

1. 打開場景Launcher
2. 使用Unity菜單'GameObject/UI/Button'創建一個按鈕，命名為Play Button，注意他在場景中創建了Canvas和EventSystem游戲對象，省了我們的事了，nice:)
3. 編輯Play Button的Text值為“Play”
4. 選擇Play Button然后定位到按鈕組建的On Click()部分
5. 點擊小的加號“+”添加一條
6. 把Launcher對象從Hierachy面板中拖過來
7. 在下拉列表中選擇Launcher.connect()函數。我們現在把按鈕和Launcher腳本連起來了，當用戶點擊按鈕的時候，將會調用Launcher腳本的connect()函數
8. 打開Launcher腳本
9. 把Start()函數中的connect()函數刪除
10. 保存Launcher腳本和場景

現在點擊Play，你會發現需要點擊按鈕才能進行連接了。

玩家名字

典型游戲的另一個重要的最低要求是讓用戶輸入他們的名字，以便其他玩家知道他們正在和誰玩。 我們將實現這個簡單的任務，通過使用PlayerPrefs記住名字，以便當用戶打開游戲，我們可以知道名字是什么。 要為您的游戲創建一個偉大的用戶體驗的話，這是一個非常方便和相當重要的功能。

讓我們先創建一個腳本來管理和記住玩家的名字，然后創建相關的UI。

創建玩家名字輸入框

1. 創建一個新的C#腳本，命名為PlayerNameInputField

2. 下面是腳本的全部內容，編輯然后保存

    using UnityEngine;
    using UnityEngine.UI;
    using System.Collections;
     
    namespace Com.MyCompany.MyGame
    {
        /// <summary>
        /// Player name input field. Let the user input his name, will appear above the player in the game.
        /// </summary>
        [RequireComponent(typeof(InputField))]
        public class PlayerNameInputField : MonoBehaviour
        {
            #region Private Variables        
     
            // Store the PlayerPref Key to avoid typos
            static string playerNamePrefKey = "PlayerName";         
     
            #endregion         
     
            #region MonoBehaviour CallBacks         
     
            /// <summary>
            /// MonoBehaviour method called on GameObject by Unity during initialization phase.
            /// </summary>
            void Start () {         
     
                string defaultName = "";
                InputField _inputField = this.GetComponent<InputField>();
                if (_inputField!=null)
                {
                    if (PlayerPrefs.HasKey(playerNamePrefKey))
                    {
                        defaultName = PlayerPrefs.GetString(playerNamePrefKey);
                        _inputField.text = defaultName;
                    }
                }         
     
                PhotonNetwork.playerName =  defaultName;
            }         
     
            #endregion         
     
            #region Public Methods                 
            /// <summary>
            /// Sets the name of the player, and save it in the PlayerPrefs for future sessions.
            /// </summary>
            /// <param name="value">The name of the Player</param>
            public void SetPlayerName(string value)
            {
                // #Important
                PhotonNetwork.playerName = value + " "; // force a trailing space string in case value is an empty string, else playerName would not be updated.         
     
                PlayerPrefs.SetString(playerNamePrefKey,value);
            }         
     
            #endregion
        }
    }
   

下面分析一下這個腳本：

• RequireComponent(typeof(InputField))

我們首先保證這個腳本必須InputField組件，這可以方便快捷的保證使用該腳本沒有錯誤。

• PlayerPrefs.HasKey(), PlayerPrefs.GetString() and PlayerPrefs.SetString()

PlayerPrefs是一個簡單的配對條目的查找列表（像一個excel表有兩列），一個是鍵，一個是值。 Key是一個字符串，是完全任意的，你決定如何命名，你需要在整個開發過程中記住它。因此，有必要總是將PlayerPrefs鍵存儲在一個地方，一個方便的方法是使用Static變量聲明，因為它不會隨著時間的推移在游戲過程中改變，并且每次都是相同的。

所以，邏輯非常簡單。如果PlayerPrefs有一個給定的鍵，我們可以得到它，并當我們要用的時候直接賦值。在我們的案例中，我們在啟動時填充InputField時，在編輯過程中，我們把當前InputField的值設置給PlayerPref鍵，然后我們確定它被存儲在用戶設備上以供稍后檢索（下一次用戶打開此游戲）。

• PhotonNetwork.playerName

這是此腳本的要點，設置玩家在網絡上的名稱。 腳本在兩個地方使用它，一次是在Start()中檢查名稱是否存儲在PlayerPrefs中，一次是在公共方法SetPlayerName()中。 現在，沒地方調用這個方法，我們需要綁定InputField OnValueChange()來調用SetPlayerName()，這樣每次用戶編輯InputField時，我們都會記錄它。 我們可以做到這一點，只有當用戶按下播放，這取決于你，但是這需要些更多的腳本，所以為了清楚起見讓我們保持簡單。 這也意味著，不管用戶將做什么，輸入將被記住，這通常是期望的行為。

為玩家的名字創建UI

1. 確保你打開的是Launcher場景
2. 使用Unity菜單'GameObject/UI/InputField'創建InputField，命名為Name InputField
3. 把RectTransform中的PosY值設置為35，它會在PlayButton的上面
4. 定位到Name InputField的子對象PlaceHolder，設置它的文本值為"Enter your Name..."
5. 選擇Name InputField對象
6. 把我們剛才創建的PlayerNamerInputField腳本給它加上
7. 定位到InputField組件的On Value Change (String)部分
8. 點擊加號“+”添加一條
9. 把PlayerNamerInputField拖拽到框里
10. 下拉列表中選擇PlayerNameInputField.SetPlayerName()
11. 保存場景

好了，你可以點擊play運行，輸入你的名字，然后停止play，再次點擊play啟動，你剛才輸入的名字就會有了。

我們實現了功能，然而在用戶體驗方面，我們缺少連接進度的反饋，還缺少當連接期間和加入房間時出現問題時的反饋。

連接進度

我們在這里盡量保持簡單，隱藏名稱字段和play按鈕，并在連接期間將其替換為簡單的文本“正在連接...”，并在需要時將其切換回來。

為此，我們把播放按鈕和名稱字段做成一個組，以便我們只需要激活和停用該組。 后來更多的功能可以添加到組，它不會影響我們的邏輯。

1. 確保你打開的是Launcher場景
2. 使用unity菜單'GameObject/UI/Panel'創建UI面板，命名為Control Panel
3. 刪除Control Panel的Image和Canvas Renderer組件，我們不需要任何可視元素，我們只關心它的內容
4. 把Play Button 和 Name InputField拖拽到Control Panel對象上去
5. 使用unity菜單'GameObject/UI/Text'創建UI文字，命名為Progress Label，不用關心它影響了顯示，我們將在運行時激活和停用它們
6. 選擇Progress Label的Text組件
7. 設置對齊方式為center align和middle align
8. 設置文字為“Connecting...”
9. 設置顏色為白色或者其他和背景有區別
10. 保存場景

此時，為了測試，您可以簡單地啟用/禁用Control Panel和Progress Label，以查看各種連接階段的情況。 現在讓我們編輯腳本以控制這兩個GameObjects激活。

1. 編輯腳本Launcher

2. 在Public Properties區塊添加下面兩個屬性

    [Tooltip("The Ui Panel to let the user enter name, connect and play")]
    public GameObject controlPanel;
    [Tooltip("The UI Label to inform the user that the connection is in progress")]
    public GameObject progressLabel;
   

3. 把下面的代碼加入Start函數

    progressLabel.SetActive(false);
    controlPanel.SetActive(true);
   

4. 在Connect方法開頭添加下面的代碼

    progressLabel.SetActive(true);
    controlPanel.SetActive(false);
   

5. 在OnDisconnectedFromPhoton方法開頭添加下面的代碼

    progressLabel.SetActive(false);
    controlPanel.SetActive(true);
   

6. 保存Launcher腳本，等待unity編譯結束

7. 確保打開場景Launcher

8. 在Hierarchy中選中Launcher對象

9. 把Hierarchy中的Control Panel和Progress Label拖拽到對應的Launcher中的組件

10. 保存場景

現在，如果你運行場景。 您將看到只有控制面板，可見，一旦您單擊播放，將顯示Progres標簽。

到此為止，我們做好了Lobby部分。 為了進一步增加Lobby的功能，我們需要切換到游戲本身，并創建各種場景，以便我們可以在加入房間時最終加載正確的級別。 我們將在接下來的部分完成，然后，我們將完成Lobby系統。

原文

http://doc.photonengine.com/en-US/pun/current/tutorials/pun-basics-tutorial/lobby-ui