[UNET]UNITY連線小遊戲(一){聊天功能}

網路遊戲有很多為了相隔兩地的玩家可以溝通的功能,其中聊天對話框就是最常見的一種方式,本系列就來看看如何透過繼承使用UNET的CALSS來實作區網交換資訊,以達到聊天或者其他連線功能。

場景準備

一般來說,這類型的遊戲如果不是有連線大廳模式的,都是一端當作主機開啟連接阜,讓其他玩家連到自己的遊戲內,因此我們要先準備兩個場景一個負責離線狀態,另個負責連線狀態的畫面。
animation-20181017001
立刻到Build Settings把兩個場景加入,這個動作非常重要,如果沒有放入的話會無法給UNET取用。
animation-20181017002

Offline場景的編輯

UI設計

離線的場景職責是建立連線場景,或是給連線的人輸入IP位置和加入遊戲用的,所以一定會有介面的設計,這邊先簡略的用UGUI處理兩個按鈕一個輸入框來表示,且統一放入一個面板元件(Panel)下。(Canvas的Scaler介面先調好Scale With Screen Size然後設定好解析度1920*1080,方便之後排版規劃)
animation-20181018001
UI的使用方式,可以去察看UI相關文章,但整體製作出效果如下。
animation-20181018002

SCRIPT程式

為了方便至作連線功能,我們繼承UNET內建的NetworkManager來幫助我們完成介面的操作,透過上面UI設計得知有兩個主要功能StartupHost()和JoinGame(),所以在建立腳本NetworkUI時,除了要using UnityEngine.UI之外還有Networking也要順便增加上去,並且繼承NetworkManager。

using UnityEngine.UI;
using UnityEngine.Networking;
public class NetworkUI : NetworkManager
{
    public Text textIP;
    public void StartupHost()
    {
        NetworkManager.singleton.networkPort = 7777;
        NetworkManager.singleton.StartHost();
    }
    public void JoinGame()
    {
        NetworkManager.singleton.networkPort = 7777;
        NetworkManager.singleton.networkAddress = textIP.text;
        NetworkManager.singleton.StartClient();
    }
}

除了用NetworkManager.singleton.networkPort 設定連接Port外,開啟遊戲用NetworkManager.singleton.StartHost();
加入遊戲則是NetworkManager.singleton.StartClient();
只是加入遊戲還要先透過UI上的Text取得IP輸入資訊,這部份稍後設定。

整合

把寫好的程式放到場景上的UI物件上(一般是Canvas),依照下圖把兩個場景拖入,關閉自動創建角色物件,單然還有輸入IP的文字元件。animation-20181018003
以及兩個按鈕要執行的功能,從Canvas拉下來給按鈕對應的兩個點擊事件。
animation-20181020001
animation-20181020002
如果想要輸入框有預設值localhost,就在InputField中打上。
animation-20181020003
輸入框的文字元件位置如圖,接下來就是Online的部份了。
animation-20181018004
 

Online場景的編輯

UI設計

這部分面板分為兩個區域,左邊的聊天對話框和右邊的遊完區,因此加入兩個Panel劃分區域。(創建Canvas後Canvas Scaler先調好Scale With Screen Size然後設定好解析度1920*1080,方便之後排版規劃)animation-20181020004
大小尺寸的設定如下,ChatPanel靠左對齊寬800;GamePanel靠右對齊寬1080(看螢幕高一樣,正方形區域)。
animation-20181020005
接下來專注在本篇重點ChatPanel上,建立一個InputField和Button在Panel中,尺寸是80高分別靠左右對齊,輸入框600寬按鈕200寬填滿面板寬度800animation-20181020006
顯示聊天紀錄的部份我們用UI元件裡的Scroll View製作,透過設定底部對齊上移80,寬800高1000填滿剩下的區域,因為不需要橫軸向,因此關閉Scroll Rect裡的Horizontal選項和ScrollBar設定參數如下。
animation-20181020007
animation-20181020008
設定後的外觀已經接近我們的需求,接下來要在Viewport下的Content製作顯示文字的區域。
animation-20181020009
文字區塊的設計概念是,他會依照內容的變化尺寸變大,因此要在Content動手腳,掛上兩個Layout控件如下。
animation-20181020010
蝦入後設定如下,Padding的上下左右間距10讓UI內文字有點呼吸空間,Size的Fitter直列的要設定Preferred。
animation-20181020011
接著看Text部分,由於上層物件Content兩個Layout的因素尺寸跟定位已被限制,我們可以改的只剩下字型尺寸顏色。
animation-20181020012
設定完後的樣貌如下,接著就可以開始撰寫腳本。
animation-20181020013
 

SCRIPT程式

撰寫ChatSystem加到ChatPanel上,除了要using UnityEngine; UnityEngine.UI; 之外,還有網路通訊要用的另外兩個UnityEngine.Networking; UnityEngine.Networking.NetworkSystem;也要加入。
還有三個UI元件的宣告Text、InputField、ScrollRect隨後就將對應的元件依序放入,在Content下顯示訊息的Text,輸入訊息的InputField和送出按鈕,如下圖。
animation-20181021001
方法部分除了Start()要寫入判斷用戶是否為主機端以外,還有三個主要功能SendMsg()送出訊息按鈕用的,所有Client端接收訊息用的Recall(NetworkMessage netMsg)和主機統一接收在發送的ServerRecall(NetworkMessage netMsg),其中ServerRecall和Recall在Start()中要分別指定給伺服器或用戶的RegisterHandler。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Networking;
using UnityEngine.Networking.NetworkSystem;
using System;
public class ChatSystem : MonoBehaviour {
    public Text msgTxt;
    public InputField inputTxt;
    public ScrollRect scrollRect;
    void Start()
    {
        //判斷是否是SERVER
        if (NetworkServer.active)
        {
            //註冊SERVER用的接口
            NetworkServer.RegisterHandler(100, ServerRecall);
        }
        //註冊用戶端接口(接收訊息用的)
        NetworkManager.singleton.client.RegisterHandler(100, Recall);
    }
    //用戶UI的送出按鈕執行
    public void SendMsg()
    {
        StringMessage sm = new StringMessage();
        sm.value = inputTxt.text;//取得輸入框UI的文字,轉成網路格式
        NetworkManager.singleton.client.Send(100,sm);//透過網管送出
    }
    void ScrollDown()
    {
        scrollRect.verticalScrollbar.value = 0f;//卷軸拉到底
    }
    private void Recall(NetworkMessage netMsg)
    {
        string getMsg = netMsg.ReadMessage<StringMessage>().value;//接收到的網路訊息轉成一般字串
        msgTxt.text += "\n" + getMsg;//刷新UI
        Invoke("ScrollDown", 0.1f);//延遲一個時間執行方法功能(為了卷軸)
    }
    private void ServerRecall(NetworkMessage netMsg)
    {
        StringMessage getMsg = new StringMessage();//創建一個網路訊息格式
        getMsg.value = netMsg.conn.connectionId.ToString()+ ":" + netMsg.ReadMessage<StringMessage>().value;//讀取從用戶傳來的訊息
        NetworkServer.SendToAll(100, getMsg);//傳送給每個人
    }
}

輸出執行,開兩個視窗互相連接打字就會看到結果。
animation-20181021002
下一篇就可以針對Game遊戲區來製作了。

在〈[UNET]UNITY連線小遊戲(一){聊天功能}〉中有 1 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *