【Unity9】GUIを改善して、Network Managerを見やすくする！【UNET20】 - Unity(C#)初心者・入門者向けチュートリアルひよこのたまご

Unity5.1.1p3 Personal(2015年7月)

今のままだとGUIがデフォルトのものなのでちょっとかっこ悪いですし、必要ない機能もたくさん表示されていて分かりにくいです〜

ですので、必要な機能のみが表示されるように改善していきます〜

UNET Part 20 - UI & Custom Net Manager - YouTube

【目標】GUIを改善して、Network Managerを見やすくする！

①スクリプト作成

まずはNetworkManager_Customという名前のスクリプトを作成し、MenuシーンにあるNetworkManagerオブジェクトに取り付けます〜

using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;
using System.Collections;

//NetworkManagerクラスを継承する(NetworkBehaviourではないので注意)
public class NetworkManager_Custom : NetworkManager {

	
	//ButtonStartHostボタンを押した時に実行
	//IPポートを設定し、ホストとして接続
	public void StartupHost()
	{
		SetPort();
		NetworkManager.singleton.StartHost();
	}
	
	//ButtonJoinGameボタンを押した時に実行
	//IPアドレスとポートを設定し、クライアントとして接続
	public void JoinGame()
	{
		SetIPAddress();
		SetPort();
		NetworkManager.singleton.StartClient();
	}
	
	void SetIPAddress()
	{
		//Input Fieldに記入されたIPアドレスを取得し、接続する
		string ipAddress = GameObject.Find("InputFieldIPAddress").transform.FindChild("Text").GetComponent<Text>().text;
		NetworkManager.singleton.networkAddress = ipAddress;
	}
	
	//ポートの設定
	void SetPort ()
	{
		NetworkManager.singleton.networkPort = 7777;
	}
}

NetworkManager_Custom.cs

これから作っていくButtonStartHostボタンとButtonJoinGameボタンを押した時に実行されます〜
先に進みます〜

②NetworkManagerコンポーネントの設定

続いてNetworkManagerコンポーネントをRemove Componentにて取り除きます〜

f:id:hiyotama:20150724104750p:plain

取り除くと言っても、先ほど作成したスクリプトでNetwork Managerを継承しているので実際にはNetworkManagerは生きています〜

f:id:hiyotama:20150724104926p:plain
NetworkManagerはちゃんと継承されている

続いてNetworkManagerの設定を行います〜
Offline SceneにMenu、Online SceneにMain、Player PrefabにPlayer、Player Spawn MethodにRound Robin、Registered Spawnable PrefabsにZombie、Advanced Configurationにチェックを入れ、Channel #0にUnreliable、Channel #1にReliable Sequenced、Ping Timeoutを900に変更します〜

f:id:hiyotama:20150724105526p:plain

③MenuシーンのGUI作成

続いてGUIを作成していきます〜HierarchyビューからCreate > UI > Panelを選択します〜

続いてCanvasのCanvas Scalerの設定をします〜
UI Scale ModeをScale With Screen Sizeに、Xを1920、Yを1080に、Matchを0.5に変更します〜

f:id:hiyotama:20150724110945p:plain
Canvas Scaler設定

Canvas Scalerについては以下の記事でも解説しています〜

<a href="http://hiyotama.hatenablog.com/entry/2015/06/30/090000">【Unity開発】uGUIのCanvas Scalerの使い方【ひよこエッセンス】 - Unity5(C#)初心者・入門者向けチュートリアルひよこのたまご</a>hiyotama.hatenablog.com

続いてPanelのRect Transformを変更していきます〜
Anchor Presetsをcenter middleに変更し、Widthを600、Heightを500に変更します〜

f:id:hiyotama:20150724111415p:plain

f:id:hiyotama:20150724111421p:plain
こんな感じ

続いてPanelに、子オブジェクトを自動的にレイアウトしてくれるGrid Layout Groupコンポーネントを付けます〜
Add ComponentからLayout > Grid Layout Groupを選択し、以下のように設定して下さい〜

f:id:hiyotama:20150724111909p:plain

続いてPanelの子オブジェクトとしてButtonを2つ、Input Fieldを1つ作成します〜
1つ目のButtonの名前は「ButtonStartHost」、2つ目のButtonの名前は「ButtonJoinGame」、Input Fieldは「InputFieldIPAddress」に変更します〜

次にButtonの子オブジェクトであるTextのInspectorビューのBest Fitと、Input Fieldの子オブジェクトであるPlaceholderとTextのInspectorビューのBest Fitをチェックして下さい〜

f:id:hiyotama:20150724112324p:plain

ButtonStartHostのTextに「Start Host」、ButtonJoinGameのTextに「Join Game」、InputFieldIPAddressのTextに「localhost」と入力します〜

f:id:hiyotama:20150724113056p:plain

④MainシーンのGUI作成

続いてMainシーンのGUIを作成していきます〜
まずはCanvas Scalerですが、Menuシーンと全く同じです〜

f:id:hiyotama:20150724110945p:plain

Latency TextはRect TransformのHeightを50に変更します〜
Health TextもHeightを50に変更します〜
Respawn ButtonはWidthを300、Heightを60に変更し、TextをBest Fitに変えます〜

続いてPanelを新規作成し、Anchor Presetsをtop right、Widthを500、Heightを150、PivotをX,Y共に1に変更します〜

f:id:hiyotama:20150724114230p:plain

続いてPanelの子オブジェクトにButtonを作成し、名前を「ButtonDisconnect」にします〜
Anchor Presetsはmiddle center、Widthは300、Heightは60、Textは「Disconnect」とし、Best Fitにチェックを入れます〜

f:id:hiyotama:20150724114515p:plain
こんな感じ

ちょっと長くなってきたので、今回はここまでです〜

ありがとうございました〜