Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのDropDownの使い方【ひよこエッセンス】

Unity5.3.5f1 Personal(2016年7月)

f:id:hiyotama:20150504205926p:plain

ひよこエッセンスの時間です〜

今回はuGUIのドロップダウン機能を解説していきます〜

ドロップダウンを作る

とりあえずドロップダウンを作ってみます!
HierarchyからCreate > UI > DropDownを選択します〜

f:id:hiyotama:20160708230039p:plain

するとこんな感じにUIのGameObjectが生成されます〜

f:id:hiyotama:20160708230557p:plain

また、ゲーム画面にはドロップダウンが生成されています〜

f:id:hiyotama:20160708230650p:plain

Dropdownコンポーネント解説

Dropdownコンポーネントは、Dropdownと書かれたUIオブジェクトについています〜

f:id:hiyotama:20160709112921p:plain
HierarchyのDropdownをクリック

f:id:hiyotama:20160709231542p:plain
InspectorにDropdown(Script)というコンポーネントあり

Template
Templateは、ドロップダウンをクリックした時に生成されるDropdown Listというゲームオブジェクトの元になるオブジェクトです〜

Hierarchyで非アクティブだったオブジェクトですね!

f:id:hiyotama:20160709231942p:plain
ここらへん

試しにドロップダウンをクリックしてみると・・・

f:id:hiyotama:20160709232021p:plain
ドロップダウンをクリック!

下に選択するためのリストが出現します!この時Hierarchyを見てみると、Dropdown Listというオブジェクトが新たに生成されているのですが、その構成がTemplateとほぼ同一なのです!

f:id:hiyotama:20160709232226p:plain
Templateとかなり似てる・・・

つまりTemplateとはまさにその名前の通り、クリックした際に生成されるDropdown Listのテンプレートだったわけです!
イメージとしてはResourcesフォルダからPrefabを生成する感じですね〜

試しにItem CheckMarkの画像をひよこ画像に変えてみると・・・

f:id:hiyotama:20160709232614p:plain
こいつに変えてみる

f:id:hiyotama:20160709232735p:plain
Item Checkmarkを選択し、hiyoko画像をドラッグ&ドロップ!

f:id:hiyotama:20160709232841p:plain
チェックマークがひよこに!

Caption Text
Caption Textには子オブジェクトのLabelが入っており、ここにはドロップダウンで選択したTextが入力されます〜
デフォルトでは「Option A」が入ってるところ、試しにOption Cを選択すると・・・

f:id:hiyotama:20160709233443p:plain
Option Cを選択!

f:id:hiyotama:20160709233500p:plain
TextがOption Cに変更される!

f:id:hiyotama:20160709233520p:plain
LabelのTextも変更されている

CaptionImage
Caption Imageは恐らくCaption Textのバックグラウンド画像を扱うのだと思うのですが・・・
変更しようとするとDropdownオブジェクトについているImageが非アクティブ化したり変な挙動をするので、バックグラウンド画像を変更したい時はImageを直接変更したほうが良いと思います〜

f:id:hiyotama:20160709234821p:plain
こいつを直接いじろう

Item Text
Item Textには、Templateの最深部にあるItem Labelが設定されています〜
ドロップダウンをクリックした時に生成されるDropdonw Listの、テキストですね!
試しにItem LabelのFont Sizeを5に変更して、ドロップダウンをクリックすると・・・

f:id:hiyotama:20160709235102p:plain
Font Sizeを小さくすると

f:id:hiyotama:20160709235138p:plain
Dropdown ListのTextが小さくなる!

とはいえTemplateからDropdown Listが生成されるのだとすれば、DropdownコンポーネントのItem TextにTemplateのItem Labelを指定する意味ってあるのかしら?

試しにItem Textを空にしてみてもう1回ドロップダウンをクリックしてみると・・・

f:id:hiyotama:20160709235534p:plain

テキストは小さいままでした〜
Item Textを設定する意味は見た目を反映させるためではなく、別にあるのでしょう〜

Item Image
Item Imageは、選択肢に設定したImageコンポーネントを設定することができます〜が、Item Textと同様なんのためにあるのかは分かりません〜

ん〜・・・もしかしたらTemplateは常に非アクティブ状態で、Scriptから色々と設定するのが難しいから、設定しやすくするためにItem TextとItem Imageは存在するのかもしれませんね!(分かんないですけど!

f:id:hiyotama:20160710000845p:plain
TemplateのItem下にhiyokoのImageを追加した図

Value/Options
Optionsは今まで触ってきた選択肢そのもので、Valuesは現在選択している選択肢を表します!
デフォルトだと
0 : Option A
1 : Option B
2 : Option C
という感じです!

OptionsにはTextとSpriteを設定することができます!
もちろん+で追加、−で削除もできます!

f:id:hiyotama:20160710001626p:plain
2項目追加し、TextとSprite設定

Spriteを設定したんだけど反映されないな〜、なんでだろ・・・
Spriteに関しては、同一でよければ先ほどのようにTemplateの子オブジェクトとして、Imageオブジェクトを生成してしまうのがいいかもしれません〜
個別に設定したい場合は、う〜ん・・・どうすればいいんだろ・・・

OnValueChanged
Dropdown Listから選択肢を選択した時に、指定したScriptのメソッドを呼び出します〜

引数にInt32と書いているので、valueを渡せると思ったのですが、

using UnityEngine;
using System.Collections;

public class HiyokoColorChange : MonoBehaviour {

	SpriteRenderer _renderer;

	void Start(){
		_renderer = GetComponent<SpriteRenderer>();
	}

	public void ChangeColor(int value)
	{
		switch (value){
		case 0:
			_renderer.color = Color.red;
			break;
		case 1:
			_renderer.color = Color.blue;
			break;
		case 2:
			_renderer.color = Color.green;
			break;
		default:
			break;
		}
	}
}

HiyokoColorChange.cs

このようなScriptを適当なSpriteオブジェクトを作成して取り付け、

f:id:hiyotama:20160710005929p:plain

Dropdownの選択肢とOnValueMethodをこのように設定しましたが・・・

f:id:hiyotama:20160710010024p:plain

どれを選んでもhiyokoは赤色にしかならない、つまり引数が常に0のままです!
Inspectorビューで設定されている引数が0なので当たり前といえば当たり前なのですが、自動的にValueの値が送信されると思っていました〜

ご安心下さい!
かなりの力技ですが・・・解決する手はあります!

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

public class HiyokoColorChange : MonoBehaviour {

	SpriteRenderer _renderer;

	void Start(){
		_renderer = GetComponent<SpriteRenderer>();
	}

	public void ChangeColor(Dropdown dropdown)
	{
		switch (dropdown.value){
		case 0:
			_renderer.color = Color.red;
			break;
		case 1:
			_renderer.color = Color.blue;
			break;
		case 2:
			_renderer.color = Color.green;
			break;
		default:
			break;
		}
	}
		
}

HiyokoColorChange.cs

Scriptをこのように変更し、引数にDropdown自身を指定します〜

f:id:hiyotama:20160710010423p:plain
ドラッグ&ドロップ!

f:id:hiyotama:20160710010508p:plain

これで無事、指定した色に変更させることができるようになりました〜


かなり長い記事になってしまいましたが、これでだいぶドロップダウンが使いこなせるようになったかと思います〜

以上、ひよこエッセンスでした〜