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

概要

ショートカットキー連載企画は一旦中断して、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をそれぞれのボタンにアタッチしている。

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

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

Iconの作成
スクリーンショット 2016-01-17 16.24.28

・Characterの子ObjectはUISpriteだけ。好きなSpriteをセットする。

・全て設定しておく。

CharaPanelの作成

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

・次、CharaPanelはUI Panelを設置しただけ。

カードの作成

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

・Cardという空のGameObjectの中に、CharaとFrameを配置しているだけ。サイズと描画順序を合わせる。

・キャラクタの画像を変えたものを複製。

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

・Card0〜4は最初表示しないよう、インスペクター上でチェックを外しておく。

・DockにアタッチしておいたDockManagerのCardsにCard0~4を全てD&Dしておく。

再生

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

再生したら動画みたいに動くと思います。

まとめ

・今回は素材に合わせて、アイコンとカードという形でコードを書いたけど、パズドラ風のホーム画面も同じ要領で作れると思います。

・需要があれば、uGUIでも作ってみようかなぁ。ほとんど使ったことないので、できるかわかりませんが。

改善点、わからないところがあれば、ご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA