[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。

除了用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。

輸出執行,開兩個視窗互相連接打字就會看到結果。

animation-20181021002

下一篇就可以針對Game遊戲區來製作了。

Leave a Reply