こんにちは、ともくんのゲーム作り部屋にようこそ！
このページでは、
「Unityのスライダーの使い方が知りたい！」
「スライダーで処理を実装してみたい！」
というお悩みの方に向けた内容となっています。
Unityでは、UIの要素の一つとして以下のようなスライダー(Slider)を設置することができます。
このスライダーは、ハンドル(Handle)の部分を動かすことで、内部の値を変化させることができ、ゲーム内でその操作に応じた処理を行うことができます。
例えば、スライダーを動かすことで、ゲームのズーム処理を行ったり、オブジェクトの回転処理などを行うことができるようになります。
そこで、このページでは、UnityのUIの一つであるスライダーについて、基本的な使い方とゲーム内での処理の作り方までをまとめていきます。
スライダー(Slider)の基本的な作り方
まずは、スライダーの基本的な作り方について、紹介していきます。
スライダーの設置方法
シーン内にスライダーを設置する場合は、ヒエラルキーウィンドウの+ボタンから「UI」の中にある「Slider」を選択します。
すると、Canvasの中に「Slider」のオブジェクトが作成されて、さらに子オブジェクトとして「Background」「Fill Area」「Handle Slide Area」が作成されます。
メインとなるSliderのオブジェクトには、Sliderコンポーネントが紐づいていて、スライダーの色や向き、またスライダーの値などを設定することができます。
また、その中の子オブジェクトは、
- 「Background」 ⇒ スライダーの背景となる部分
- 「Fill Area」 ⇒ ハンドルを動かした際に背景を埋める部分(valueより小さい値)
- 「Handle Slide Area」 ⇒ スライダーを動かすハンドルの部分
の画像領域がそれぞれ指定されています。
Sliderコンポーネントの主な設定項目
スライダーに紐づくSliderコンポーネントには、様々な設定項目がありますが、特にメインとなる設定項目は以下となっています。
Value：スライダーのハンドルで指定する数値
Valueは、スライダーのハンドルによって指定している数値を表していて、スライダーを操作すると変動する値になります。
実際に、スライダーを操作してみると、Valueの値が変動しているのが分かります。
このValueの値は、小数を含めたfloat型の数値で管理されています。
もし、初期のスライダーの位置を変更したい場合は、このValueの数値を変更しておくことで、スライダーの初期位置を指定できます。
Min Value・Max Value：スライダーの最小・最大となる数値
Min Valueはスライダーの最小となる数値、Max Valueはスライダーの最大となる数値を設定できる項目です。
例えば、スライダーの向きをデフォルトの「Left To Right」にして、Min Valueを0、Max Valueを1にした場合、スライダーを一番左にすると0、一番右にすると1、そして真ん中にすると0.5がValueの数値となります。
Whole Numbers：Valueを整数のみにする
Whole Numbersにチェックを入れると、Valueの数値が整数のみとなります。
例えば、Min Valueを0、Max Valueを10にして、Whole Numbersにチェックを入れた場合、スライダーを動かしてみると、0から10の整数にしか値が設定されないようになっているのが分かります。
Direction：スライダーの向きを変更する
Directionは、スライダーの向きを変更することができる項目で、以下の4つから選択することができます。
Interactable：スライダーを操作するかどうか
Interactableは、画面上でスライダーを操作するかどうかを決めている項目で、チェックしていればスライド操作できるようになります。
実際に、チェックした場合とチェックしていない場合とで比べてみると、チェックが無い場合はスライドができないようになっています。
スライダーを操作させたい場合はチェックしておけば問題ありませんが、スクリプトからスライダーの値を変更させたい場合や、ユーザーに操作させたくないようなシーンでは、チェックを外すことで操作できなくなります。
スライダーの数値をスクリプトで取得する方法
スライダーの数値をスクリプトから取得する場合は、以下のようにSliderコンポーネントのvalue変数を使って記述することで、数値をfloat型で取得できます。
Slider.valueただし、Updateメソッド内で記述してしまうと、常にスライダーの数値を取得する処理が行われてしまうことになります。
そこで、スライダーの値が変更された際に呼び出されるOnValueChangedのイベントを使って、値を取得するようにします。
例えば、スライダーとTextMeshProのオブジェクトをシーン内に配置し、以下のスクリプトをTextMeshProにアタッチしておきます。
using TMPro;
using UnityEngine;
using UnityEngine.UI; // Sliderを利用するために記述
public class Test : MonoBehaviour
{
TextMeshProUGUI tmp;
public Slider slider; // Sliderの変数を宣言
void Start()
{
tmp = GetComponent<TextMeshProUGUI>();
}
public void TextChanged()
{
tmp.text = slider.value.ToString(); // Sliderの値を代入
}
}まず、Sliderコンポーネントをスクリプトから使用する際は、3行目のように「using UnityEngine.UI;」とUIを利用する記述が必要になります。
そして、8行目でSlider型の変数を作成して、インスペクターウィンドウからスライダーのオブジェクトを選択しておきます。
15行目で「TextChanged」というメソッドをpublic修飾子を付けて作成していて、その中の行目でTextMeshProのテキストの値にスライダーの値(value)を代入する処理を行っています。
次に、スライダーのオブジェクトを選択して、インスペクターウィンドウのOnValueChangedの項目で、「None (Object)」にTextMeshProのオブジェクトを選択、また「No Function」となっている部分に先ほど作成したTextChanged()のメソッドを指定します。
これでスライダーの値が変更された時だけ、指定したメソッドの処理が行われることになり、スライダーの数値が取得・表示されるようになりました。
スライダー(Slider)を使った処理の作り方
ここからは、実際にUnityでスライダーを操作した値を使ってゲーム内処理を作る方法として、
- スライダー操作でオブジェクトの回転処理
- スライダー操作で画面の拡大・縮小の処理
を作ってみます。
スライダー操作でオブジェクトの回転処理
以下のようにスライダーとキューブのオブジェクトを配置して、スライダーを操作したらオブジェクトがY軸を中心に回転する処理を作ってみます。
ここでのスライダーの設定は、Min Valueを-1、Max Valueを1、初期のValueを0、DirectionをRight To Leftにしています。
そして、オブジェクトに対して、以下のスクリプトをアタッチしておきます。
using UnityEngine;
using UnityEngine.UI; // Sliderを利用するために必要
public class Test : MonoBehaviour
{
public Slider slider; // Slider型の変数を作成
float rotationSpeed = 45f; // 回転速度の変数
public void Rotation()
{
transform.rotation = Quaternion.Euler(transform.rotation.x, slider.value * rotationSpeed, transform.rotation.z); // Y軸にスライダーの値で回転する処理
}
}6行目でSlider型の変数をpublicで宣言し、インスペクターウィンドウからスライダーのオブジェクトを指定しておきます。
そして、9行目で「Rotation」のメソッドを作成して、その中にEulerメソッドでY軸にスライダーのvalue変数と指定した回転速度を掛け合わせた数値を自身の回転に代入しています。
あとは、スライダーのオブジェクトを選択して、OnValueChangedのイベントに先ほど作成したRotationのメソッドを指定しておきます。
これでゲームを実行してみると、
上記のようにスライダーを動かすと、オブジェクトがY軸を中心に回転するようになりました。
スライダー操作で画面の拡大・縮小の処理
今度は、スライダーを操作すると画面の拡大や縮小を行う処理を作ってみます。
ここでのスライダーの設定は、Min Valueを0.1、Max Valueを2、初期のValueを1、DirectionをTop To Bottomにしています。
Min Valueは0でもいいのですが、カメラの視野角を0にしたくなかったので、ここでは0.1にしています。
そして、カメラオブジェクトに対して、以下のスクリプトをアタッチしておきます。
using UnityEngine;
using UnityEngine.UI; // Sliderを利用するために必要
public class Test2 : MonoBehaviour
{
public Slider slider; // Slider型の変数を作成
public void Zoom()
{
Camera.main.fieldOfView = slider.value * 60f; // カメラの視野角にスライダーの値を使って代入
}
}先ほどと同様に、6行目でSlider型の変数にpublicを付けて宣言しておき、インスペクターウィンドウからスライダーを代入しておきます。
そして、8行目でZoomメソッドを作成して、その中で3Dでのカメラの視野角であるfieldOfViewの変数に対して、スライダーの値に60を掛けた数値を代入しています。
スクリプトが作成できたら、スライダーのオブジェクトを選択して、OnValueChangedのイベントにZoomのメソッドを指定しておきます。
これでゲームを実行すると、
スライダーを上に操作すると画面が拡大して、下に操作すると画面が縮小するという処理を作ることができました。
まとめ
このページでは、Unityのスライダーについて、基本的な使い方やスライダー操作による処理の作り方を紹介していきましたが、いかがでしたでしょうか？
スライダーを動かした際の値をvalue変数で取得することで、操作に応じてゲーム内の処理を作ることができます。
また、スライダーの値が変化した際にだけ呼び出せるOnValueChangedのイベントを使うことで、変動した際にのみ処理を行うことができます。
ゲーム画面のズーム操作やオブジェクトの移動・回転などにおいて、スライダーは便利に活用することができます。
最後までお読みいただきまして、ありがとうございました！
コメント