Godot入門：ScrollContainerの使い方と活用法

はじめに
ScrollContainerとは？
このノードを使うべき場面
主なプロパティと機能
1. 基本的な使い方
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

ゲームのインベントリ画面やメニューリスト、長いテキストが表示される場面に出くわしたことはないでしょうか。そうした「画面に入らないコンテンツをスクロール表示する」というのは、ゲームUIの基本機能のひとつです。この記事では、Godot 4のScrollContainerノードを紹介します。

ScrollContainerとは？

ScrollContainerは、子要素（ボタン、ラベル、パネルなど）が親のサイズを超えるときに、スクロール機能を自動的に提供するノードです。

たとえるなら、スマートフォンの画面（Container）で、長い文書をスクロールして読むイメージです。Container が表示窓、子ノードが文書だと考えてください。

ScrollContainer は Container クラスを継承しています。つまり、他の UI コンテナ（HBoxContainer、VBoxContainer など）と同じように、子ノードのレイアウトを管理する役割を持っています。

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

ゲームのインベントリウィンドウで、アイテムが多すぎて1画面に入らないとき
会話ウィンドウやログ表示で、テキストが縦長になるとき
リストメニュー（例：ゲーム設定の各項目）が多いとき
スクロール可能な画像ギャラリーやキャラクター一覧を作るとき
長いヘルプテキストやゲームマニュアルの表示

使わない方がよい場面：

コンテンツが確実に画面内に収まるとき（ScrollContainer 不要）
キャンバスで自由なレイアウトが必要なとき（Control で十分）

主なプロパティと機能

プロパティ・メソッド	説明	型 / 戻り値
`scroll_vertical`	縦スクロール位置（ピクセル）	int
`scroll_horizontal`	横スクロール位置（ピクセル）	int
`vertical_scroll_mode`	縦スクロール有効/無効の設定	ScrollMode
`horizontal_scroll_mode`	横スクロール有効/無効の設定	ScrollMode
`get_v_scroll_bar()`	縦スクロールバーへのアクセス	VScrollBar
`get_h_scroll_bar()`	横スクロールバーへのアクセス	HScrollBar

基本的な使い方

ScrollContainer にノードを子として追加するだけで、基本的にはスクロール機能が有効になります。

extends Node2D

func _ready() -> void:
    var scroll_container = ScrollContainer.new()
    scroll_container.size = Vector2(400, 300)  # 表示窓のサイズ

    # VBoxContainer をスクロール内に配置
    var vbox = VBoxContainer.new()

    # 複数のボタンを追加
    for i in range(20):
        var btn = Button.new()
        btn.text = "アイテム %d" % i
        vbox.add_child(btn)

    scroll_container.add_child(vbox)
    add_child(scroll_container)

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

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

スクロールモードを細かく制御する

パラメータ	設定値	効果
`vertical_scroll_mode`	`ScrollMode.AUTO`	コンテンツが高さを超えたら自動でスクロールバーを表示
	`ScrollMode.SHOW_ALWAYS`	常にスクロールバーを表示（余白でもバーが見えます）
	`ScrollMode.SHOW_NEVER`	スクロールバーを非表示にするが、スクロール機能は有効
`horizontal_scroll_mode`	同上	横スクロールも同じ設定が可能

var scroll_container = ScrollContainer.new()

# 縦スクロール：自動表示、横スクロール：非表示
scroll_container.vertical_scroll_mode = ScrollContainer.ScrollMode.AUTO
scroll_container.horizontal_scroll_mode = ScrollContainer.ScrollMode.SHOW_NEVER

スクロール位置をプログラムから操作する

ユーザーがスクロールするのを待つのではなく、ゲームのロジックから「ここまでスクロールしてほしい」と指定することもできます。

# 最上部にスクロール
scroll_container.scroll_vertical = 0

# 最下部にスクロール
scroll_container.scroll_vertical = int(scroll_container.get_v_scroll_bar().max_value)

# 途中の位置にスクロール（例：100ピクセル目）
scroll_container.scroll_vertical = 100

スクロールバーの見た目をカスタマイズする

スクロールバー自体の色やテーマを変えることで、ゲームのビジュアルにあわせることができます。

# スクロールバーへのアクセス
var v_scroll = scroll_container.get_v_scroll_bar()

# スクロールバーのサイズ変更
v_scroll.custom_minimum_size = Vector2(16, 0)  # 幅を指定

# テーマを使ったスタイリング（詳細はテーマの記事を参照）
# var theme = Theme.new()
# ... (テーマの設定)
# scroll_container.theme = theme

スクロール中のイベントを検出する

スクロールバーが動いたときに何か処理をしたい場合、value_changedシグナルを使えます。

var scroll_container = ScrollContainer.new()

# スクロール位置が変わったときのコールバック
scroll_container.get_v_scroll_bar().value_changed.connect(_on_scroll_changed)

func _on_scroll_changed(new_value: float) -> void:
    print("スクロール位置: %d" % new_value)
    # ここでリスト更新など、スクロール連動の処理を書く