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

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

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

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


スポンサーリンク

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


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

今回はuGUIのSliderについてです〜


uGUIのSliderまとめ

Sliderは難易度設定や音量調整などの値を設定するのによく使われる、下の画像のようなGUIです〜


f:id:hiyotama:20150702095240p:plain
Slider

①Sliderを使う

まずはこのSliderを作ってみましょう〜HierarchyビューからCreate > UI > Sliderを選択します〜


f:id:hiyotama:20150702095437p:plain
Slider作成


今回は左から易・中・難の3つのレベルをSliderで設定してみましょう〜


f:id:hiyotama:20150702102943p:plain
3レベルをSliderで選択


まずはSliderのInspectorビューのMin Valueを1に、Max Valueを3に変更し、Whole Numbersをtrueにします〜


f:id:hiyotama:20150702110556p:plain
Inspectorビュー編集


続いてSliderScriptという名前のスクリプトを作成します〜


>>|cs|
using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class SliderScript : MonoBehaviour {

private Slider slider;
private float level;

void Start () {
slider = GetComponent();
slider.value = 1;
level = slider.value;
}

void Update ()
{
if (slider.value != level) {
level = slider.value;
if (slider.value == 1) {
Debug.Log ("難易度が易になりました");
} else if (slider.value == 2) {
Debug.Log ("難易度が中になりました");
} else if (slider.value == 3) {
Debug.Log ("難易度が難になりました");
}
}
}
}
|

SliderScript.cs


Sliderの値はslider.valueで取得できます〜
取得した値をlevelという変数に保存しておき、異なる値になった時にDebug.Logにてコンソールにテキストを表示しています〜


f:id:hiyotama:20150702111009p:plain
Sliderを動かすとコンソールにテキスト出力

②Slider説明

それではSliderのInspectorビューをひとつずつ見ていきましょう〜


Interactable〜Navigationについては、以下エッセンスの②Input Field解説と内容が同じなので割愛します〜

hiyotama.hatenablog.com


Fill Rectでは、Sliderのフィル部分のグラフィックを設定します〜デフォルトでは、Sliderの子オブジェクトであるFill Area > Fillが指定されています〜

f:id:hiyotama:20150702114255p:plain

f:id:hiyotama:20150702114419p:plain
フィル部分


Handle Rectでは、Sliderのハンドル部分のグラフィックを設定します〜デフォルトでは、Sliderの子オブジェクトであるHandle Slide Area > Handleが指定されています〜

f:id:hiyotama:20150702114557p:plain

f:id:hiyotama:20150702114632p:plain
ハンドル部分


Directionでは、Sliderの向きを設定します〜


f:id:hiyotama:20150702114949p:plain
Left To Right

f:id:hiyotama:20150702115007p:plain
Right To Left

f:id:hiyotama:20150702115025p:plain
Bottom To Top

f:id:hiyotama:20150702115040p:plain
Top To Bottom


続いてMin ValueMax Valueです〜こちらは、Sliderの最小値と最大値を設定しています〜
先ほどの難易度の例だと1〜3の値を設定しました〜


Sliderの値は通常float型ですが、Whole Numbersをtrueにすると整数のみとなります〜


Valueには、現在のSliderの値が表示されます〜
先ほどのスクリプトではslider.valueで値を取得していました〜


最後はOn Value Changeです〜こちらは、Sliderの値が変わる度にスクリプトのメソッドを呼び出すことができます〜

先ほどのSliderScriptにメソッドを追加しましょう〜

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

public class SliderScript : MonoBehaviour {
	
	private Slider slider;
	private float level;

	void Start () {
		slider = GetComponent<Slider>();
		slider.value = 1;
		level = slider.value;
	}
	
	void Update ()
	{
		if (slider.value != level) {
			level = slider.value;
			if (slider.value == 1) {
				Debug.Log ("難易度が易になりました");
			} else if (slider.value == 2) {
				Debug.Log ("難易度が中になりました");
			} else if (slider.value == 3) {
				Debug.Log ("難易度が難になりました");
			}
		}
	}
//********** 開始 **********//
	public void MoveSlider(){
		Debug.Log("Moving");
	}
//********** 終了 **********//
}

SliderScript.cs


publicなメソッドMoveSliderを追加しました〜


続いてOnValueChangedのプラスボタンを押し、オブジェクトはSliderを、メソッドはSliderScript > MoveSliderを選択します〜


f:id:hiyotama:20150702121056p:plain
プラスボタン

f:id:hiyotama:20150702121227p:plain
オブジェクトはSlider、メソッドはSliderScript > MoveSlider


f:id:hiyotama:20150702121347p:plain
値が変わるとメソッドが呼び出される


以上Sliderの解説でした〜とりあえず①Sliderを使うの内容を使えばなんとかなる感じです〜


以上ひよこエッセンス、今回はuGUIのSliderの使い方でした〜

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