1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Unity初心者向け][UI]一定の値しか入らないスライダーをつくろう!

Last updated at Posted at 2024-02-29

つくるもの

gif004.gif

スライダーをスライドしても、一定の値しか入らないようになっているよ!

基本の方針

  • スライダーの値が変更されたときに呼ばれる関数:OnValueChanged を使う
  • OnValueChangedで呼ばれたとき、スライダーの値を取得して、スライダーの値の範囲によってスライダーの値を変更する

基本知識

  • スライダーの値は、slider.valueで取得できる。slider関連のvalueはfloat値。
  • UIを扱うため、using UnityEngine.UI;を追記する必要がある。
  • UI関連のスクリプトは、HierarchyEventSystemがないと動かない。
  • スライダーのInspector上のパラメータWhole Numbersにチェックを入れると、整数値(int)しか入らなくなるので注意。

①:Sliderをつくろう!

Create > UIからSliderを探してSliderをつくろう!
gif002.gif

②:Sliderにスクリプトを作ってアタッチしよう!

Sliderオブジェクトの中でなくても動作するよ。
using UnityEngine.UI;を追記するのを忘れずに!

③:スクリプトの中身をつくろう!

▽サンプル1: スクロールバーの値を0.00,0.25,0.50,0.75,1.00の5箇所にするスクリプト

SliderSample01.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SliderSample01 : MonoBehaviour
{
    // Start is called before the first frame update
    [SerializeField] Slider slider;     //スライダーのゲームオブジェクトをいれる
   
    public void SliderChanged()
    {

        if (slider.value == 0)  //スライダーの値がゼロのとき
        {
            slider.value = 0.0f;  //スライダーの値をゼロにする
        }
        if (0.25f > slider.value && slider.value > 0.0f)
        {
            slider.value = 0.25f;
        }
        if (0.50f > slider.value && slider.value > 0.25f)
        {
            slider.value = 0.50f;
        }
        if (0.75f > slider.value && slider.value > 0.50f)
        {
            slider.value = 0.75f;
        }
        if (1.00f > slider.value && slider.value > 0.75f)
        {
            slider.value = 1.0f;
        }
    }

}

④:OnValueChangedを登録

SliderInspector画面から、On Value Changedを探そう!
スクリーンショット 2021-04-24 17.51.18.png
+ボタンを押す
スクリーンショット 2021-04-24 19.29.21.png
None(Object)にスクリプトの入っているオブジェクトをアタッチして、No Functionにスクリプトの関数(SliderChanged)をアタッチ

→動かしてみよう!

応用:分割をもっと自由にできるようにしよう

方針:

  • 分割したい数(sliderDivNum)を変数で定義する
  • Sliderの最大値(slider.maxValue)最小値(slider.minValue)を取得する
  • 分割ひとつあたりの分割量(divAmount)を計算する(スライダーはこの値ごとに変わる)
  • 分割量にしたがってSliderの値を変える処理をする

作ってみた

SliderSnap_Generic.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SliderSnap_Generic : MonoBehaviour
{
    // Start is called before the first frame update
    [SerializeField] Slider slider;     //スライダーのゲームオブジェクトをいれる

    [Header("スライダーを分割する数")]  [SerializeField] int sliderDivNum;  //スライダーを分割する数(分割数)
    [Header("スライダーをゼロ位置にすることを許可")]   [SerializeField] bool usingZero;    //ゼロを使うか否か
    [Header("スライダーの最大値")]  [SerializeField] float maxvalue;
    [Header("スライダーの最小値")]  [SerializeField] float minvalue;

    private float divAmount;    //1分割あたり分割量



    void Start()
    {
        slider.maxValue = maxvalue;  //スライダーの最大値をmaxvalueにする
        slider.minValue = minvalue;  //スライダーの最小値をminvalueにする
        divAmount = (maxvalue - minvalue) / (sliderDivNum - 1);  //単位あたり分割量を定義
    }

    // Update is called once per frame
    void Update()
    {
 
    }

    public void SliderValueChanged()
    {
        for (int i = 0; i < sliderDivNum; i++)
        {
            if (i * divAmount >= slider.value && slider.value > (i-1) * divAmount)
            {
                slider.value = minvalue + i * divAmount;
            }

        }

        if (slider.value == minvalue)
        {
            if (usingZero == false)
            {
                slider.value = minvalue + divAmount;
            }
            else
            {
                slider.value = minvalue;
            }
        }
    }
}

パラメータのつけかた

gif003.gif

注意! Whole Numbersにチェックを入れないこと。

(float値を代入することが多いので、Sliderが正常に動かなくなります。)

使用例

gif005.gif

おまけ:Unity自作スクリプトのInspectorビューでの見え方を変更

ヘッダーをつける方法

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?