NEW ARTICLE
tkinterでテキストボックスに絵文字を表示する方法
  • 【Unity UI】Scroll Viewで可変するテキストを縦スクロールさせるプログラミング不要な方法

【Unity UI】Scroll Viewで可変するテキストを縦スクロールさせるプログラミング不要な方法

【Unity UI】Scroll Viewで可変するテキストを縦スクロールさせるプログラミング不要な方法

　ゲームの説明文などで、テキストが多い時は下にスライドして、少ない時はスライドさせない動作をプログラミング不要な方法で解説します。Content Size Fitterなどのコーポネントを追加するだけなので安心してくださいね。僕自身が凄く悩んで開発したので、新しくゲーム開発する人の助けになればと思います。

本記事で解決できる問題点

  • スクロールビューのコンテンツが可変してくれない
  • テキストボックスのサイズが固定になってしまう
  • なぜかスクロールしない
  • 余計な領域分もスクロールしてしまう
  • コーポネントの関係もしっかり理解したい

ノーコードで実装していきましょう

Scroll View(スクロールビュー)を作成

　まず、Hierarchyヒエラルキー(ヒエラルキー)で右クリック→UI→スクロールビューの作成を選択しましょう。

Scroll View/
 -Viewport/
  --Content
 -Scrollbar Horizontal/
 -Scrollbar Vertical/

　このような状態で作成できたでしょうか？　スクロールビューを作成する位置はお好みでいいですよ。

　最初にスクロールビューの要素の説明をしましょう。

Vieport子のContentに決められた領域をスクロールする親要素
Scrollbar Hrizontal水平方向のスクロールバー。今回は不要なので削除します
Scrollbar Vertical垂直方向のスクロールバー。こちらも不要なので削除します

　今回はVieport内のContentとその子要素にコーポネントを加えるだけで実装できます。

Contentにコーポネントを追加

Vieportの子要素にContentがあります。ContentのInspector（インスペクター）から、Add Component(コーポネントを追加)を選択し、Layout(レイアウト)から以下のコーポネントを追加しましょう。

Content Size Fitter
(コンテンツサイズフィッター)		Vertical fit(垂直フィット)をPreferred Sizeに変更。
垂直方向のレイアウトが可変式になる。
Vertical Layout Group
(垂直レイアウトグループ)		Child Force Expand(子を強制的に拡大)の幅と高さの項目をチェック。
Layout Elementコーポネントを持つ子要素をContent内に垂直方向に並べる。

　これでContentの子要素を作り、子要素にLayoutElementを追加するだけでスクロール領域を自動で拡張してくれるようになりました。

　後は、Contentの子要素に置くTextを文章量に応じて可変させるだけですね！

Contentの子要素にコーポネントを追加

　さっそく子要素を作っていきましょう。Contentを右クリックして、UI→Text(テキスト)を選択して作成します。新しくできたTextに以下のコーポネントを追加します。

Content Size Fitter
(コンテンツサイズフィッター)		Vertical fit(垂直フィット)をPreferred Sizeに変更。
垂直方向のレイアウトが可変式になる。
Layout Element
(レイアウト要素)		レイアウト要素を持つことで、Vertical Layout Groupに縦に並べるべき要素だと認識して貰えます。

　これで、文章を追加すると自動的にコンテンツ幅が下に拡張され、スクロールが可能となりました。

　後は、スクロールの挙動を変更していきます。

Scroll ViewのScroll Rectを調整

　Scroll ViewのInspectorを開くと、Scroll Rectというコーポネントがあります。

　このMovement Type(移動タイプ)をClamped(制限付き)に変更しましょう。

　こうすることで、要素が少なくスクロールをしなくても良い時は動かなくなります。

まとめ

　今回はノーコードで説明文用のUIを作る解説でした！

　簡単に解説したので詳しく知りたい方は本記事で参考にしたUnityのスクロールに関するマニュアルを見てみてくださいね！