Godot入門:Sliderの使い方と活用法

対象読者:Godotの基本操作を少し触ったことがある初級者の方

はじめに

音量調整バーや明るさ設定など、値をドラッグで直感的に変更させたいときに使うのが Slider です。設定画面を作るなら、ほぼ必ず登場するUIノードです。

Sliderとは?

Sliderは、つまみをドラッグして数値を変更するUIノードの基底クラスです。実際にシーンに追加するときは、横向きのHSliderか縦向きのVSliderを使います。どちらもSliderが持つ機能をそのまま引き継いでいます。

たとえるなら、音楽プレイヤーの音量バーです。左右(または上下)につまみを動かすだけで、直感的に数値を変えられます。

Slider は Range → Control → CanvasItem → Node を継承しています。最小値・最大値・現在値の管理はRangeが担当し、Sliderはそこにドラッグ操作の見た目と挙動を追加しています。

このノードを使うべき場面

  • 音量、明るさ、難易度など、範囲のある数値をプレイヤーに調整させるとき
  • キャラクター作成画面でのパラメータ配分(体力・攻撃力など)を調整させるとき
  • 設定画面が増えるほど必須になるノードです: オプション画面を作る際、数値調整のUIとしてほぼ確実に使うことになります

使わない・別のノードが適切な場合:

  • 数値を厳密に入力させたい(ドラッグではなく直接入力) → SpinBox を使う
  • 進捗を表示するだけで、ユーザーが操作しない → ProgressBar を使う
  • ON/OFFの二択でよい → CheckButton を使う

使うかどうかの目安: 「範囲のある数値を、ユーザーに直感的な操作で変更させたい」ならSlider(HSlider/VSlider)が最適です。厳密な数値入力が必要ならSpinBoxと併用しましょう。

主なプロパティと機能

Sliderの代表的なプロパティとメソッドを以下にまとめました(Rangeから継承したものを含みます)。

プロパティ/メソッド役割
min_value取りうる最小値float
max_value取りうる最大値float
step変化の刻み幅float
value現在の値float
tick_count目盛りの数int
value_changed値が変わったときに発火するシグナルSignal

もっと使いこなす:カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

1. 音量スライダーを作る

貼り付け先の準備: ①シーンツリーで+ボタンから「HSlider」を検索して追加 ②インスペクターでmin_value・max_valueを設定 ③右クリックして「アタッチスクリプト」→GDScriptのまま「作成」を押し、開いたエディタに以下を貼り付け

extends HSlider

func _ready() -> void:
	min_value = 0
	max_value = 100
	value = 80
	value_changed.connect(_on_value_changed)

func _on_value_changed(new_value: float) -> void:
	AudioServer.set_bus_volume_db(0, linear_to_db(new_value / 100.0))

よくある質問:似たノードとの違い

Q. SliderとHSlider/VSliderの違いは?
A. Sliderは基底クラスで、実際にシーンに置くのは横向きのHSliderか縦向きのVSliderです。機能はどちらも同じで、向きだけが異なります。

Q. SliderとProgressBarの違いは?
A. ProgressBar はユーザーが操作できない、表示専用のバーです。ユーザーにドラッグで値を変更させたいならSliderを使います。

Q. SliderとSpinBoxの違いは?
A. SpinBoxは数値を直接キーボードで入力したり、矢印ボタンで細かく調整するノードです。ドラッグで大まかに調整したいならSlider、厳密な数値を入力させたいならSpinBoxが向いています。

まとめ

Slider は、範囲のある数値を直感的に調整させるための基本ノードです。

  • 実際に使うのはHSliderかVSliderで、機能はSliderからそのまま引き継がれます
  • 音量や明るさなど、設定画面の数値調整でほぼ必ず登場します
  • value_changedシグナルで、値が変わった瞬間の処理を書けます

次の記事では、色を選ばせるボタン ColorPickerButton を解説します。

関連性の高いノード解説記事

この記事はGodot 4.xをもとに執筆しています。

コメント