最近のスマホアプリっぽいメニュー切り替えを実装する【Unity開発】【NGUI】

time 2016/01/17

folder GUI NGUI Unity 全般

概要

ショートカットキー連載企画は一旦中断して、GUI関連の記事を書いてみた。

最近のスマホゲーム(パズドラやFFレコードキーパーなど)でよくある、画面下でホームメニュー(ダンジョン、装備、設定等)を切り替えるやつをUnity+NGUIで実装してみた。

今回作ったのはこんなやつ↓

そもそもメニューじゃなくなってるけど、

アイコン画像をダンジョン、装備、ガチャのようなボタン

カード部分をメニュー画面

に変更すればいい感じのホーム画面が作れるはず。

スクリーンショット 2016-01-17 15.26.57

動画はこちら。

画像素材は以下フリーコンテンツを利用しています。

素材が素敵すぎるので、Unity上に配置しただけで楽しい&かっこいい＆ワクワク。

タイトル：[ジュエルセイバーFREE]
URL：[http://www.jewel-s.jp/]

環境

Unity version 5.3.0f4

NGUI (有料Asset)

準備

・適当にプロジェクトを作成。

・ジュエルセイバーFREE様からダウンロードした好きな画像をUnityにドラッグアンドドロップする。

・NGUIのAtlas MakerでAtlasを作成しておく。

・今回自前で準備したスクリプトは以下の2つ。

なるべくインスペクタ上で設定できるように、手間が少なくなるように書いたつもり。

・DockManager.cs

・ButtonProperty.cs

DockManager.cs

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class DockManager : MonoBehaviour
{
	/// <summary>
	/// キャラクタのアイコンに設定されたボタン
	/// inspecter上で追加
	/// </summary>
	public GameObject[] CharaIcons;
	private List<UIButton> CharaButtons;
	/// <summary>
	/// CardのGameObject
	/// inspecter上で追加
	/// </summary>
	public GameObject[] Cards;

	/// <summary>
	/// indexで指定されたキャラクタを表示
	/// </summary>
	/// <param name="index">Index.</param>
	public void GoToChara (int index)
	{
		setDockButton (CharaButtons [index]);
		setCard (Cards [index]);
	}

	void Start ()
	{
		//初期化 ButtonPropertyのIndexはインスペクター上で設定しても良い。
		CharaButtons = new List<UIButton> ();
		for (int i = 0; i < CharaIcons.Length; i++) {
			ButtonProperty bp = CharaIcons [i].GetComponent<ButtonProperty> ();
			bp.Index = i;
			CharaButtons.Add (CharaIcons [i].GetComponent<UIButton> ());
		}
	}

	/// <summary>
	/// フォーカスされているアイコンは選択不可、それ以外は選択可に変更
	/// </summary>
	/// <param name="focusButton">Focus button.</param>
	private void setDockButton (UIButton focusButton)
	{
		foreach (UIButton button in CharaButtons) {
			button.isEnabled = true;
		}
		focusButton.isEnabled = false;
	}

	/// <summary>
	/// フォーカスされたカードのみ表示
	/// </summary>
	/// <param name="focusCard">Focus card.</param>
	private void setCard (GameObject focusCard)
	{
		foreach (GameObject card in Cards) {
			card.SetActive (false);
		}
		focusCard.SetActive (true);
	}
}

・外部から使用する時はGotoCharaを呼ぶ。

ButtonProperty.cs

using UnityEngine;
using System.Collections;

public class ButtonProperty : MonoBehaviour {

	public int Index;

}

・ゲーム画面下部に設置したアイコンのいずれかが押された時に、OnClickでDockManager.GotoChara(int index)に通知する。

・OnClickで引数も一緒に送りたかったので、ButtonProperty.csを作成した。

・それぞれのキャラクタアイコンにアタッチする。

・それぞれのボタンは自分が何番目のボタンかをindexで覚えておく。

手順(インスペクター上での設定)

・シーンに配置するオブジェクトはこんな感じ

スクリーンショット 2016-01-17 15.58.49

・NGUI>Create>PanelでUIRoot, Camera, Panelがシーン上に作成する。

UIRootの設定

スクリーンショット 2016-01-17 16.04.33

・ここの設定をいつも迷うんだけど、スマホで縦型のアプリにしたい時はConstrained On Mobilesに設定してる。

・Content Widthを1080, Content Heightを1920にしてFullHD(アスペクト16:9)にしてるけど、ここの設定は正しいんだろうか。。お優しい方教えてください。

Cameraの設定

スクリーンショット 2016-01-17 16.07.37

・次はカメラの設定、特に設定してないけど、Clipping PlanesのNearを-10に変更した。

・UI CameraのEventTypeは3DUIのままだけど、この場合はButtonにAttachするRigidbody, Colliderも3Dにする必要あり。ボタンが効かない時は、EventTypeが3Dなのに、ButtonにアタッチしたのはRigidbody2D, Collider2Dになってるとかがあり得るかも。

Dockオブジェクトの作成

スクリーンショット 2016-01-17 16.12.06

・次はDock。さっき作ったDockManager.csをアタッチ。CharaIcons, Cardsの配列にそれぞれ、CharaIcon 0~4, Card 0~4を追加。CharaIconとCard0の中身は後述。

アイコンの作成

スクリーンショット 2016-01-17 16.14.50

・Character0にUIButton, Rigidboy, Box Collider, ButtonPropertyをアタッチ。

・ここがポイント

OnclickのNotifyにDockをDrag&Drop
MethodでGotoCharaを選択
Arg0に自身のオブジェクトをDrag&Drop(写真で言えば、Character0のUIButton>OnClick>Arg0にCharacter0をD&D)
Indexを選択

・何をしたいかというと、ボタンがクリックされた時に何番目のボタンがクリックされたかをDockに通知したいので、ButtonProperty.csをそれぞれのボタンにアタッチしている。

・こうしておけば、インスペクター上で引数として渡せるようになる。これは知らなかった。

・その他のボタンも同じ要領で設定。