UnityUnityメモ

Unityで簡単!往復スライダーを作り、クリックで動きを止める方法

Unity

1. はじめに

この記事では、スライダーを上下限値で往復するように動かし、さらにクリックするとその動きを止める仕組みを作ります。この機能は、例えば音量調整バーの自動リセットや、ミニゲームでのスピード調整など、いろいろな場面で活用できます。

初心者の方でも簡単に理解できるよう、シンプルな手順とスクリプトの解説を行いますので、ぜひ一緒に作ってみましょう!この記事を読み終わるころには、スライダーの基本操作と動きの制御についてしっかり理解できるようになりますよ。

Unityを触ったことがないという方はコチラの記事から見てみてください!



2. スライダーをシーンに追加しよう

まずは、Unityでスライダーをシーンに追加してみましょう。スライダーはUI(ユーザーインターフェース)の一部として簡単に利用できます。以下の手順に沿って進めてください!


1. ヒエラルキーウィンドウでスライダーを追加する

  1. ヒエラルキーウィンドウを右クリックします。
  2. **「UI」→「Slider」**を選択します。
  3. シーンにスライダーが追加されます。

💡 ヒント:この操作でCanvas(キャンバス)とEventSystem(イベントシステム)も自動的に生成されます。これはUIの基本構成ですので、特に何も変更する必要はありません。


2. インスペクターでスライダーを設定する

次に、スライダーの動作範囲を設定します。

  1. ヒエラルキーウィンドウで「Slider」を選択します。
  2. インスペクターウィンドウを確認し、以下の項目を設定します:
    • Max Value5に設定します。
      → スライダーの最大値を5にすることで、スライダーが0から5の範囲で動作します。
    • Value0に設定しておきます。
      → 初期位置を0に設定しておくことで、動作がわかりやすくなります。

3. スライダーのデザインを調整(任意)

スライダーのデザインを変更したい場合は、以下の操作を試してみてください:

  • Background:色やサイズを変更することで見た目を調整できます。
  • Handle Slide Area:ハンドル(スライダーを動かす部分)の位置やサイズを変更できます。

💡 カスタマイズのポイント:ゲームのテーマに合わせてデザインを調整することで、UI全体が統一感のあるものになります!


これでスライダーの準備が完了しました!次のステップでは、このスライダーを自動的に動かし、クリックで動きを止めるスクリプトを作成します。続けて進みましょう!



3.スライダーの動きを制御するスクリプトを作ろう

ここでは、スライダーが自動的に上下限値を往復し、クリックで動きを止める仕組みを実装するスクリプトを作成します。初心者でも安心して進められるように、具体的な手順と解説を交えながら進めていきます。


1. スクリプトを作成しよう

まずは、C#スクリプトを作成します。

  1. プロジェクトウィンドウで右クリックします。
  2. Create」→「C# Script」を選びましょう。
  3. スクリプト名を「SliderMove」に変更します。
  4. 作成したスクリプトをダブルクリックして、エディタで開きます。

2. コードを入力しよう

以下のコードを入力してください。コードの各部分については、後で詳しく説明します。

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

public class SliderMove : MonoBehaviour
{
    public Slider slider;   // スライダーの参照
    private bool maxValue;  // 最大値に達したかのフラグ
    private bool isClicked; // クリックされたかのフラグ

    void Start()
    {
        slider.value = 0;     // スライダーの初期値を0に設定
        maxValue = false;     // スライダーが増加中か減少中かを示す
        isClicked = false;    // クリックされていない状態に初期化
    }

    void Update()
    {
        // 左クリックがされたら、スライダーの動きを止める
        if (Input.GetMouseButtonDown(0))
        {
            isClicked = true; // クリックされたのでフラグを立てる
        }

        // クリックされていないときにスライダーを動かす
        if (!isClicked)
        {
            // スライダーが最大値(5)に達した場合、減少に切り替える
            if (slider.value == 5)
            {
                maxValue = true; // 最大値に達したので減少フラグを立てる
            }

            // スライダーが最小値(0)に戻った場合、増加に切り替える
            if (slider.value == 0)
            {
                maxValue = false; // 最小値に達したので増加フラグを立てる
            }

            // フラグに応じてスライダーの値を増減させる
            if (maxValue)
            {
                slider.value -= 0.1f; // 最大値に達していたら減少させる
            }
            else
            {
                slider.value += 0.1f; // 最小値なら増加させる
            }
        }
    }
}

3. コードの解説

① スライダーの参照設定

public Slider slider;

スライダーの値を操作するために、UIのSliderコンポーネントを参照します。

② 最大値・最小値の切り替え

private bool maxValue;

スライダーが最大値に達したとき、減少に切り替えるためのフラグです。

③ クリック検知

if (Input.GetMouseButtonDown(0))
{
isClicked = true;
}

マウス左クリックが押された瞬間を検知し、スライダーの動作を停止させます。

④ スライダーの動き

if (!isClicked)
{
if (slider.value == 5) { maxValue = true; }
if (slider.value == 0) { maxValue = false; }

if (maxValue) { slider.value -= 0.1f; }
else { slider.value += 0.1f; }
}

スライダーの値が上下限に達した場合、増加・減少を切り替える仕組みです。


次のステップでは、作成したスクリプトをスライダーにアタッチしていきます。



スクリプトをスライダーにアタッチしよう

ここでは、作成したスクリプトをシーン内のスライダーにアタッチし、動作するように設定する手順を解説します。


1. スライダーを選択する

まず、ヒエラルキーウィンドウで「Slider」を選択しましょう。このとき、スライダーがシーン内で選択されている状態を確認してください。


2. スクリプトをアタッチする

次に、プロジェクトウィンドウから先ほど作成した「SliderMove」スクリプトを探します。このスクリプトをインスペクターウィンドウの「Slider」オブジェクトにドラッグ&ドロップしましょう。

すると、インスペクターに「SliderMove (Script)」という項目が追加されます。


3. スクリプトにスライダーを設定する

スクリプトの「Slider」フィールドにスライダーを設定する必要があります。

  1. インスペクターウィンドウを確認
    • 「SliderMove (Script)」の中に「Slider」というフィールドが表示されているのを確認します。
  2. スライダーを割り当てる
    • このフィールドに、ヒエラルキーウィンドウ内の「Slider」オブジェクトをドラッグ&ドロップします。

これで、スクリプトとスライダーが連動するようになります。


4. 設定を保存

最後に、忘れずに現在のシーンを保存しておきましょう。メニューバーの「File」→「Save」またはショートカットキー(Windows: Ctrl+S / Mac: Command+S)を使用してください。


注意ポイント

  • 「Slider」フィールドにスライダーを割り当てないと、実行時にエラーが発生します。
  • スライダー以外のオブジェクトを割り当てないように注意してください。

これでスライダーとスクリプトの連携が完了しました!次はテストプレイをして、スライダーが正しく動作するかを確認しましょう。



5. テストプレイ

スクリプトをスライダーにアタッチして設定が完了したら、いよいよ動作確認をしてみましょう!以下の手順に従ってテストプレイを行ってください。

1. シーンを再生する

Unityエディターの上部にある「▶(再生)」ボタンをクリックして、シーンを再生します。スライダーが自動的に動き始めることを確認してください。

  • スライダーが上下限値(0から5)を往復するはずです。
  • 初めはスムーズに増加していき、最大値に達したら逆に減少します。

2. クリックして動きを止める

再生中に、ゲームビュー内のどこかをクリックしてみましょう。

  • スライダーが停止したら、スクリプトが正しく動作しています。
  • 左クリックをするたびに isClicked フラグが切り替わり、スライダーの動きが止まることを確認してください。

3. 再生を停止する

再生を停止するには、Unityエディター上部の「■(停止)」ボタンをクリックしてください。これでシーンの実行が終了します。

4. 動作がおかしい場合の確認ポイント

もしスライダーが動かない、または意図した動作をしない場合、以下の点を確認してください:

  1. スクリプトの設定
    • SliderMove スクリプトがスライダーにアタッチされているか確認します。
    • スクリプトの「Slider」フィールドに正しいスライダーオブジェクトが設定されているか確認してください。
  2. スクリプト内のコード
    • コードをコピー&ペーストした際に、タイプミスや不要なスペースがないかチェックしましょう。
    • Update メソッドの中で条件文(if 文)が正しく記述されているか確認します。
  3. インスペクターの設定
    • スライダーの「MaxValue」が正しく設定されているか確認してください(今回は5に設定)。

5. 改善案を試してみよう

スライダーの動きの速度を変更したい場合は、以下のコードの値を調整してみてください:

slider.value += 0.1f; // 増加速度
slider.value -= 0.1f; // 減少速度

例えば、0.1f0.05f に変更するとスライダーの動きがゆっくりになります。


これでテストプレイの手順は完了です!次のステップでは、カスタマイズの方法や他のUIコンポーネントとの連携を試してみるのもおすすめです。



よくある質問(FAQ)

Q
スライダーが動かないのですが、何が問題でしょうか?
A

主な原因として以下が考えられます:

  • スクリプトがアタッチされていない
    スクリプトがスライダーに正しくアタッチされているか確認してください。スライダーのインスペクターで「SliderMove」スクリプトが表示されているか確認しましょう。
  • Sliderフィールドが設定されていない
    スクリプトの「Slider」フィールドに、シーン内のスライダーオブジェクトが正しくドラッグ&ドロップされているか確認してください。
  • Updateメソッドが呼び出されていない
    MonoBehaviourのUpdateメソッドが無効化されている場合があります。スクリプト内でUpdateが正しく記述されているか再確認してください。
Q
スライダーの速度を調整したいのですが、どの部分を編集すればいいですか?
A

以下のコード部分を編集することでスライダーの速度を調整できます:

if (maxValue)
{
slider.value -= 0.1f; // 最大値に達していたら減少させる
}
else
{
slider.value += 0.1f; // 最小値なら増加させる
}

「0.1f」の値を変更することで速度を調整できます。例えば:

  • 速くしたい場合: 値を大きくする(例: 0.2f)
  • 遅くしたい場合: 値を小さくする(例: 0.05f)
Q
スライダーをクリックで再び動かせるようにするにはどうすればいいですか?
A

スライダーをクリックで再び動かせるようにするには、isClicked フラグを切り替えるコードを追加します。例えば以下のように記述します:

if (Input.GetMouseButtonDown(0))
{
isClicked = !isClicked; // クリックされるたびにフラグを切り替える
}

これにより、クリックするたびにスライダーの動きが止まったり再開したりします。

おすすめのアセット

Rhythm Timelineは、Unityで音楽やリズムに基づくゲームや体験を作成するためのツールです。視覚的なタイムラインエディターを使用して、ビートやリズムイベントを簡単に配置し、音楽に同期したアクションを実装できます。リズムゲームだけでなく、サウンドに反応する演出を追加したい場合にも最適です。初心者にも使いやすく、音楽ベースのプロジェクト制作を効率化します。