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

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

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

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という名前のスクリプトを作り、作成したSlider自身に取り付けます!

using UnityEngine;
using UnityEngine.UI;


public class SliderScript : MonoBehaviour
{
	private Slider slider;


	void Start()
	{
		slider = GetComponent<Slider>();
		slider.value = 1;
	}


	public void OnValueChanged(float 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で取得できます!
Sliderではvalueが変わったタイミングで任意のメソッドを実行させることができます!
InspectorビューのSlider一番下にOn Value Changed(Single)という箇所があるので、Object欄に作成したSliderを登録し、Action欄にSliderScriptが出てくるので、Dynamic float欄のOnValueChangedメソッドを選択します!

f:id:hiyotama:20220307200333p:plain

以上の設定でSliderを動かし値が変わったタイミングでOnValueChangedメソッドを実行してくれます!

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;


public class SliderScript : MonoBehaviour
{
	private Slider slider;


	void Start()
	{
		slider = GetComponent<Slider>();
	}


	public void SomeMethod(float value)
	{
		Debug.Log("value: " + value);
	}
}

SliderScript.cs

publicなメソッドSomeMethodを呼び出してみます!
OnValueChangedのプラスボタンを押し、オブジェクトはSliderを、メソッドはSliderScript > SomeMethodを選択します!

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

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

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


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


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

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