UnityのGUIでSlider(スライダー)を表示させる方法【初心者向け】

UnityのGUIで【Slider(スライダー)】を表示させる方法を初心者向けに解説した記事です。スライダーには、横向きのHorizontalSliderと縦向きのVerticalSliderがありますので、それぞれ紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

UnityのGUIでSlider(スライダー)を表示させる方法を初心者向けに解説した記事です。

 

Unityでは、様々な入出力を処理するGUIを簡単に作成できます。

今回は、スライダー式のGUIを2種類紹介します。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

20160620

 

田島メンター!!GUIでスライダーを表示させたいんですが、どのようにしたらいいんでしょうか~?

 

20163020-2

 

スライダーは水平方向と垂直方向の二種類のものが作成できるよ。横と縦のスライダーだね。

 

20160620

 

なるほど、ではまずは水平方向の方を付けてみたいです!

 

20163020-2

 

水平方向のスライダーにはHorizontalSliderを使うんだ。早速やってみよう。

 

Sliderとは

Slider(スライダー)とは、ある一定の範囲の数値を変化させるのに利用するGUIです。iPhoneアプリのUIパーツにもスライダーが用意されています。

Unityのスライダーには下記2つの種類があります。

  • HorizontalSlider
  • VerticalSlider

それぞれ紹介していきます。

 

 

HorizontalSliderを表示させる

HorizontalSliderは、値を一定の範囲内で操作できるスライダーです。

スライダーの向きは水平(横)になります。

 

では早速、作成してみましょう。

 

スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。

Javascriptの場合は以下のように記述します。

// Javascript
public var hSliderValue : float = 0.0;
function OnGUI () {
// スライダー(水平)を表示する
hSliderValue = GUI.HorizontalSlider(Rect(20, 20, 100, 30), hSliderValue, 0.0, 10.0);
// ラベルにhSliderValueの値を表示する
GUI.Label(Rect(20, 50, 100, 20), “value: ” + hSliderValue);
}

 

C#の場合は以下のように記述します。

//C#
public class TestHorizontalSlider : MonoBehaviour {
public float hSliderValue = 0.0F;
void OnGUI () {
// スライダー(水平)を表示する
hSliderValue = GUI.HorizontalSlider(new Rect(20, 20, 100, 30), hSliderValue, 0.0F, 10.0F);
// ラベルにhSliderValueの値を表示する
GUI.Label(new Rect(20, 50, 100, 20), “value: ” + hSliderValue);
}
}

 

この状態でゲームを再生してみましょう。

001

横向きのスライダーが表示されました。

スライダーをドラッグすると、値を0~10の間で設定することができます。

 

HorizontalSlider関数は、第一引数(Rect構造体)へGUIの表示位置を指定します。

そして、第二引数(float)へスライダーの現在値、第三引数(float)へ左端の値、第四引数(float)へ右端の値をそれぞれ指定します。

右になるほどスライダーの値が大きくなるようにしたい場合は、第三引数に最小値を指定し、逆にしたい場合は第四引数の方に最小値を指定してください。

 

また、HorizontalSlider関数の戻り値にはユーザ操作によって更新されたスライダーの現在値が返されますので、それを利用して「hSliderValue」の値を更新しています。

 

20163020-2

 

スライダーを画面に表示して、それを操作することができたかな?

 

20160620

 

できました!スライダーを動かすと0から10の間で数値が変化するんですね。

 

20163020-2

 

同様のスライダーを今度は垂直方向に作ってみよう。縦方向にはVerticalSliderを使うよ。

 

 

[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中

VerticalSliderを表示する

垂直(縦)向きのスライダーを作成したい場合は、VerticalSliderを使用します。

使い方はHorizontalSliderとほぼ同じです。

VerticalSlider関数では、第三引数が上端の値、第四引数が下端の値となります。

 

では、実際に作成してみましょう。

// Javascript
public var vSliderValue : float = 0.0;
function OnGUI () {
// スライダー(垂直)を表示する
vSliderValue = GUI.VerticalSlider(Rect(20, 20, 30, 100), vSliderValue, 10.0, 0.0);
// ラベルにvSliderValueの現在値を表示する
GUI.Label(Rect(50, 100, 100, 20), “value: ” + vSliderValue);
}

 

//C#
public class TestVerticalSlider : MonoBehaviour {
public float vSliderValue = 0.0F;
void OnGUI () {
// スライダー(垂直)を表示する
vSliderValue = GUI.VerticalSlider(new Rect(20, 20, 30, 100), vSliderValue, 10.0F, 0.0F);
// ラベルにvSliderValueの現在値を表示する
GUI.Label(new Rect(50, 100, 100, 20), “value: ” + vSliderValue);
}
}

 

ゲームを再生します。

002

縦向きのスライダーが表示されました。

 

今回の記事は以上です。

 

20163020-2

 

VerticalSliderの実装方法だよ。

 

20160620

 

今度は縦方向に表示されて、下から上に動かす形になりましたね。

 

20163020-2

 

設定によっては上から下へのスライダーにすることも可能だよ。コードを実際に編集して、それぞれの引数の役割を確認してみよう。

 

20160620

 

色々試して練習してみます。ありがとうございました!

 

 

Unityの他のGUIを追加したい場合は、UnityのGUIでラベルを表示させる方法も合わせてご覧ください。

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。