WisdomSoft - for your serial experiences.

スライダー

最小値と最大値の範囲から値を選択するスライダーを紹介します。

範囲の値を取る

ある一定範囲から値を選択する入力にはスライダーを用いることができます。スライダーはバーの上のつまみをスライド出せ、最小値から最大値の範囲から値を選択します。スライダーには、垂直方向と水平方向の 2 種類があります。例えば、色や音量設定など、指定範囲の数値を調整するような処理に応用できます。

垂直スライダーの描画には VerticalSlider() メソッドを使います。

GUI クラス VerticalSlider() メソッド
public static float VerticalSlider(
	Rect position, float value, float topValue, float bottomValue
)
public static float VerticalSlider(
	Rect position, float value, float topValue, float bottomValue,
	GUIStyle slider, GUIStyle thumb
)

position パラメータには垂直スライダーの位置とサイズを表す範囲を指定します。value パラメータにはつまみの位置を表す現在の値、topValue パラメータにはバーの最上部が対応する値、bottomValue パラメータにはバーの最下部が対応する値を指定します。slider パラメータはバーの GUI スタイル、thmb パラメータにはつまみの GUI スタイルを指定します。このメソッドは新しい選択された値を結果として返します。

同様に、水平スライダーを描画するには HorizontalSlider() メソッドを使います。

GUI クラス HorizontalSlider() メソッド
public static float HorizontalSlider(
	Rect position, float value, float leftValue, float rightValue
)
public static float HorizontalSlider(
	Rect position, float value, float leftValue, float rightValue,
	GUIStyle slider, GUIStyle thumb
)

position パラメータには水平スライダーの位置とサイズを表す範囲を指定します。value パラメータにはつまみの位置を表す現在の値、leftValue パラメータにはバーの左端が対応する値、rightValue パラメータにはバーの右端が対応する値を指定します。slider パラメータはバーの GUI スタイル、thmb パラメータにはつまみの GUI スタイルを指定します。このメソッドは新しい選択された値を結果として返します。

コード1
using UnityEngine;

public class Test : MonoBehaviour 
{
	void OnGUI()
	{
		Rect rect1 = new Rect(10, 10, 30, 200);
		GUI.VerticalSlider(rect1, 50, 0, 100);

		Rect rect2 = new Rect(40, 10, 400, 30);
		GUI.HorizontalSlider(rect2, 50, 0, 100);
	}
}
実行結果
コード1 実行結果

コード1は垂直スライダーと水平スライダーを表示するスクリプトです。それぞれ、バーの最小値に 0、最大値に 100 を指定し、現在の値を 50 としているため、つまみはバーの中心に表示されます。このプログラムでは、スライダーの値を 50 で固定しているため、つまみを動かすことはできません。ユーザーがつまみを動かすには、メソッドが返した値を次の OnGUI() メソッドで設定します。

コード2
using UnityEngine;

public class Test : MonoBehaviour 
{
	private float value = 0;
	void OnGUI()
	{
		Rect rect1 = new Rect(10, 10, 400, 30);
		value = GUI.HorizontalSlider(rect1, value, 0, 100);

		Rect rect2 = new Rect(10, 40, 400, 30);
		GUI.Label(rect2, "Value=" + value);
	}
}
実行結果
コード2 実行結果

コード2は HorizontalSlider() メソッドが返した値を value 変数に保存し、HorizontalSlider() メソッドの第2パラメータに value 変数を渡しています。これによって、ユーザーが操作した値が次のフレームの描画に反映され、つまみが正しく移動します。