UniRxを使って手軽にRPGのメニュー画面っぽいものを作ってみる

#はじめに
この記事はUnity #2 Advent Calendar 2017、12月14日の記事です。

今日は私の誕生日です。祝え

#出来上がるもの

#準備
Unityで新規プロジェクトを作成し、AssetStoreからUniRxをインポートしてください。
無料なので気軽にー

#画面を用意する
こんな感じの画面を作ります。
右ビューは項目の数だけ作っておきます。

#ボタンの設定をする
見出し以外の各テキストにはButtonコンポーネントを付け、
選択時の枠、ハイライト/押下時のみ枠が表示されるようにしておきます。

また、ボタンのナビゲーションをこんな感じに設定しておきます。

#画面の表示タイプを示す列挙体を用意する
ここまで出来たらあとはスクリプトです。
まず、見出しの通りに列挙体を用意します。ついでにUniRx的に小細工をしておくといろいろ捗ります。

ViewType.cs

using UniRx;

public enum ViewType{
	Menu,
	ViewA,
	ViewB,
	ViewC
}

[System.Serializable]
public class ViewTypeReactiveProperty : ReactiveProperty<ViewType>
{
	public ViewTypeReactiveProperty ()
	{
	}
}

#if UNITY_EDITOR
[UnityEditor.CustomPropertyDrawer(typeof(ViewTypeReactiveProperty))]
public class ViewTypeReactivePropertyDrawer : InspectorDisplayDrawer
{}
#endif

次に、状態管理＆メニュー表示用のスクリプトと、各画面制御用のスクリプトを用意します。
ボタンのバインドとかはUniRxでやってます。

MenuViewScript.cs

using UnityEngine;
using UnityEngine.UI;
using UniRx;
using UnityEngine.EventSystems;

public class MenuViewScript : MonoBehaviour {
	public ViewTypeReactiveProperty m_viewType;

	[SerializeField]private Button m_btnA;
	[SerializeField]private Button m_btnB;
	[SerializeField]private Button m_btnC;

	void Start()
	{
		m_viewType.Subscribe (type => {
			if(type == ViewType.Menu)
			{
				EventSystem.current.SetSelectedGameObject(m_btnA.gameObject);
			}
		}).AddTo (this);

		m_btnA.OnClickAsObservable ().Subscribe (_ => {
			m_viewType.Value = ViewType.ViewA;
		}).AddTo (this);
		m_btnB.OnClickAsObservable ().Subscribe (_ => {
			m_viewType.Value = ViewType.ViewB;
		}).AddTo (this);
		m_btnC.OnClickAsObservable ().Subscribe (_ => {
			m_viewType.Value = ViewType.ViewC;
		}).AddTo (this);
	}
}

SubViewScript.cs

using UnityEngine;
using UnityEngine.UI;
using UniRx;
using UnityEngine.EventSystems;

public class SubViewScript : MonoBehaviour {
	[SerializeField]private ViewType m_targetType;

	[SerializeField]private MenuViewScript m_mainScript;
	[SerializeField]private Button m_backBtn;
	void Start () {
		m_mainScript.m_viewType.Subscribe (type => {
			if(type == m_targetType)
			{
				this.gameObject.SetActive (true);
				EventSystem.current.SetSelectedGameObject(m_backBtn.gameObject);
			}else{
				this.gameObject.SetActive (false);
			}
		}).AddTo (this);

		m_backBtn.OnClickAsObservable ().Subscribe (_ => {
			m_mainScript.m_viewType.Value = ViewType.Menu;
		}).AddTo (this);
	}
}

#Inspectorで設定する

ちなみに先ほどの小細工のおかげで、ここのViewTypeをいじることでメニューを変更できます。

(ViewB/ViewCはほぼ同じため割愛)

#ゲームを実行する
どーん！

#この書き方の利点
ViewTypeに項目を追加するだけで、簡単に画面数を増やすことができます。
また、各機能がほぼ独立しているため、変更が容易です。

#あとがき
ちょっと時間がないので書き逃げ気味ですが、ReactivePropertyだけでもいろいろと使えますし、
かなりシンプルにいろいろなことができます。
(ちなみにこのサンプルプロジェクト作るのに10分くらい)
試しに触ってみるといいかもです。

明日はsakuo_sundayさんの「unityとarduinoで何かします。」です。