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

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

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

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.1.1f1 Personal(2015年7月)
f:id:hiyotama:20150624205139p:plain


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


今回はuGUIのToggleについて書いていきます〜


uGUIのToggleまとめ

①Toggle解説

Toggleはいわゆるチェックボックスです〜まずは作ってみましょう!


HierarchyビューからCreate > UI > Toggleを選択します〜


f:id:hiyotama:20150703165901p:plain


すると画面にToggleが表れます〜


f:id:hiyotama:20150703165942p:plain
Toggle出現


それではInspectorビューを見ていきましょう〜


f:id:hiyotama:20150703170049p:plain
ToggleのInspectorビュー


Interactable〜Navigationは以下エッセンスと同内容なので割愛します〜


hiyotama.hatenablog.com


まずはIs Onです〜Toggleにチェックが入っているとこちらにもチェックが入り、trueを表します〜


スクリプト上で値を取得する場合は、isOnを使います〜以下ソースです〜

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

public class ToggleScript : MonoBehaviour {

	Toggle toggle;
	
	void Start () {
		toggle = GetComponent<Toggle>();
	}
	
	void Update () {
		Debug.Log(toggle.isOn);
	}
}

ToggleScript.cs


続いてToggle Transitionです〜これはToggleのチェックマークのアニメーションを変更できます〜
Noneだと単純な切り替え、Fadeだとフェードイン、フェードアウトのアニメーションとなるようですが、正直あんまり違いは分かりません〜


続いてGraphicですが、ここではチェックマークの画像を指定できます〜デフォルトでは子オブジェクトのBackground > Checkmarkが指定されています〜


f:id:hiyotama:20150703171041p:plain


続いてGroupです〜こちらは別途Toggle Groupというコンポーネントを付けて、同一Toggle Groupが指定されたToggleの中では1つしかチェックを付けられない、という機能です〜


試しにToggleをもうひとつ作成し、


f:id:hiyotama:20150703172404p:plain


最初に作成したToggleに、Add Component > UI >Toggle GroupでToggle Groupコンポーネントをつけて、


f:id:hiyotama:20150703172524p:plain


両ToggleのGroupに作成したToggle Groupを指定して下さい〜すると、


f:id:hiyotama:20150703172730p:plain
片方にチェックを入れると片方が消える


グループ内ではチェックを入れられるToggleは1つに限定されます〜


ちなみに通常はグループ内で必ず1つはtrueでなければならないのですが、Toggle GroupコンポーネントにあるAllow Switch Offをtrueにすると、全てのToggleをfalseにすることができます〜


f:id:hiyotama:20150703173010p:plain
Allow Switch Off = trueで全てのチェックを外せる


最後にOn Value Changedですが、Toggleの値が変更された時に指定したメソッドを呼び出すことができます〜先ほどのスクリプトに加筆して確認してみましょう〜

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

public class ToggleScript : MonoBehaviour {

	Toggle toggle;
	
	void Start () {
		toggle = GetComponent<Toggle>();
	}
	
	void Update () {
//		Debug.Log(toggle.isOn);
	}
	
	public void ChangeToggle ()
	{
		Debug.Log("Toggleが変更されました");
	}
}

ToggleScript.cs


今回追加したChangeToggleメソッドは外部から呼び出すので、publicにしておいて下さい〜


スクリプトの変更が完了したら、On Value Changedのプラスボタンで新しいイベントを追加し、オブジェクトにToggleを、メソッドにToggleScriptのChangeToggleを指定しましょう〜


f:id:hiyotama:20150703173553p:plain


これでToggleの値を変更する度に、ChangeToggleメソッドが呼び出されるようになりました〜


f:id:hiyotama:20150703173739p:plain
値が変わる度にメソッド呼び出し


以上、ひよこエッセンスのToggleのまとめでした〜

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