top of page
検索
10月10日読了時間: 4分

1分間 Unity講座　UIのSlider活用【前編】Sliderの値をTextに表示させる方法

このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。


Unityのスライダーには主に2つの活用シーンがあります。

  1. スライダーのつまみを操作して、変数等の値を指定する

  2. 作品の中の変数の値をスライダーで表す（ヒットポイント、経過時間の表示など）


今回は１，のスライダーのつまみを操作して、値（Value）を変化させたときに、その値を取得する方法についてご紹介します。


Sliderの活用


下の動画は「ファイブボックス　一分間Unity講座　UIのsliderの値をTextに表示させる方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください





1，素材の用意


ヒエラルキーでUI素材を2つ用意します。

1，Slider　UI ⇒ Slider で作成

2，Text　UI ⇒ Legacy ⇒ Text で作成（OSやエディタバージョンにより、作り方に違いがあります）

UIのsliderとText（Legacy）の用意

Text の名前は「SliderText」などにしておきましょう。


Inspectorで取得した素材の配置を指定します。

今回の検証では座標は任意の場所で結構です。たがいに重ならないように配置してください。


「SliderManager」などの任意の名前を付けたスクリプトファイルを作成します。作成したスクリプトファイルはCanvasにアタッチしておきます。


SliderManagerを作ってCanvasにアタッチする画像

2，スクリプトファイの作成


今回の課題ではUIを扱いますので、作成したスクリプトファイルのNamaSpaceに、UIを使用する宣言をします。

using UnityEngine.UI;

続いてSliderコンポーネント、Textコンポーネントにアクセスするための変数を用意します。

Slider slider;      //Sliderコンポーネント型の変数を宣言
Text sliderText;    //Text型の変数を宣言

Start()関数では、宣言した変数の初期値を取得します。


void Start()
{
    //子要素にあるSliderコンポーネントを取得しsliderに代入
    slider = transform.GetComponentInChildren<Slider>();
    //子要素からSliderTextオブジェクトを探しTextコンポーネントを取得、sliderTextに代入
    sliderText = transform.Find("SliderText").GetComponent<Text>();
}

sampleではそれぞれ違う方法でコンポーネントを取得していますが、同じ方法でも構いません。取得する方法はいろいろあるので、状況に応じ使い分けることができるようにしておきましょう。


続いて、Sliderのつまみが操作されたタイミングで呼び出される関数を用意します。ほかのクラス（Sliderコンポーネント）から呼び出すので、アクセス修飾子は public にしておきます。

public void SliderChange()
{    
	//SlideTextのtextを SliderのValueに指定、小数第２位間で表示する
    sliderText.text = slider.value.ToString("F2");
}

ここでは　SliderTextのTextコンポーネントの Textプロパティの値を指定しています。

右辺ではSliderの値、つまりSliderコンポーネントのValueプロパティを指定していますが、float型のため小数点が多く続いてしまいます。少数第二位で切るために、ToString()メソッドの引数に "F2" を指定しました。

ToString() の使い方は、過去の記事「1分間 Unity講座　UIのText（Legacy）に経過時間を小数点下2桁で表示させる方法」で詳しく紹介しています。気になる方はこちらへアクセスしてください。


3，Slider の On Value Changed

スライダーの値を取得するには、作成したスクリプトファイルの関数を Slider の On Value Changed　イベントに登録します。

下の画像の赤色部分です。

  1. OnValueChanged の右下の＋ボタンを押して、イベントを追加

  2. 追加されたイベントの左下に、Canvas（UIオブジェクト）をドラッグ＆ドロップ

  3. 右上のメソッド追加部分に、SliderManagerクラスのSliderChange()を指定


UIのsliderのOnValueChangedにイベントを登録

Sliderコンポーネントの上の図の青色部分の補足

  • Interactable：チェックを入れるとつまみが有効、外すとつまみが無効

  • Value：今回何度か使用しているValueプロパティがこの部分になります。 デフォルトでは最小値 0 から最大値 1 の間で変化します。

これでスライダーの値をTextに表示することができたと思います。


 

ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

Comments

bottom of page