Unity事例ノート

UNITY

スクロールバー(ScrollBar)の設置

uGUIのスクロールバー(ScrollBar)の使い方について見ていきましょう。

パネルに入りきらないテキストを、縦のスクロールバーで閲覧できるようにします。

関連記事:
Panelを使ってUIの表示を切り替える

パネルとテキストの配置

スクロールさせるものを準備しましょう。

UI > Panelを作成して、アンカープリセットから、中央揃えに。

幅300と高さ200に変更しました。

次に、UI > テキストを作成。

Panelの中にドラッグ&ドロップして、子オブジェクトとして配置します。

Textを選択し、アンカープリセットをstretchに変更。

下を-400として、エリアを下方向に広げました。

テキストをペーストして、Panelからはみ出すくらいの文字数にしています。

Panelを選択して、マスクのコンポーネントを追加します。

コンポーネントを追加 > UI > マスク

テキストが、Panelの枠内に収まりました。

スクロールバーの設定

次に、スクロール矩形のコンポーネントを追加します。

Panelを選択し、コンポーネントを追加 > UI > スクロール矩形

コンテンツには、Textオブジェクトを入れ、水平のチェックは外します。

UI > スクロールバーを作成します。

向きを「下から上」に変更します。

画面サイズによって、UIの大きさが自動調整されるように設定しておきます。

Canvasを選択し、UIスケールモードを「画面サイズに拡大」にします。

Scrollbarの位置を、Panelの横に移動させます。

Panelを選択し、垂直スクロールバーに、ScrollBarを入れます。

ゲームプレイして、動きを確認しましょう。

関連記事:
Panelを使ってUIの表示を切り替える

SCHOOL教室案内