実装後、さらに２回の手順に分けて、実際にゲーム内でどのように活用するか学習しながら追加の実装を行います。
下記の動画は最後の手順まで完成した際のものです。
どのようなゲームでも活用可能になるよう汎用的な実装を行います。
学習後は、自分のプロジェクト内で試してみてください。
＜実装動画� �
動画ファイルへのリンク
＜実装動画�◆�
動画ファイルへのリンク
事前準備 
事前準備としてムービーの再生機能が必要になります。
ムービー再生には VideoPlayer 関連の機能を利用しますので、そちらを用意しておく必要があります。
こちらの２つの手順を実装してからこの手順を進めてください。
ムービー再生機能の準備��
ムービー再生機能の準備��
設計
画面にムービー一覧表示用のボタンを配置し、そちらをクリック(タップ)することで
管理しているムービーの情報をサムネイルのボタンとして一覧表示するポップアップウインドウを表示します。
ポップアップウインドウ内には ScrollView 機能を利用することにより、
サムネイルの数がポップアップウインドウ内に収まらない場合には、上下にスクロールして表示できるようにしておきます。
サムネイルにはムービーの内容に準じた画像とタイトルをそれぞれ表示し、
サムネイルをクリック(タップ)すると、ムービーを再生します。
ムービーをゲーム最前面に表示することで、ムービー再生中はサムネイルのクリックができない状態にしておき、
重複クリックなどの不具合の発生を防ぎます。
ムービー一覧のポップアップウインドウは画面内にある非表示のボタンを押すことで非表示になります。
今回は表示/非表示のボタンを同じ位置に配置しています。(別々の位置にしても問題ありません。)
まず最初の手順として、ポップアップウインドウの作成を行います。
２つ目の手順として、ポップアップウインドウ内に表示するサムネイル用のゲームオブジェクトの作成と
このサムネイルを制御するためのスクリプトの作成を行います。
最後の手順として、ゲーム実行時に管理しているムービーの数に応じて、動的にサムネイル用のゲームオブジェクトの生成し、
ポップアップウインドウ内に並べて表示させる機能や、ポップアップウインドウの表示/非表示などの機能を作成し、完成させます。
ムービー一覧表示用のポップアップウインドウの作成
１．完成図
ムービーをサムネイルとして一覧表示するための Canvas ゲームオブジェクト群を配置します。
Canvas ゲームオブジェクトを含めて、合計６個の UI 用のゲームオブジェクトを作成し、設定を行うことで
ムービー一覧表示を行うポップアップウインドウとしての機能を実装します。
＜構成＞
Canvas_MoiveCollection Canvas 兼 UI 部品の管理役のゲームオブジェクト。この子オブジェクトに UI 用のゲームオブジェクトを配置します。 btnShowMovieCollection ポップアップウインドウを開くためのボタンのゲームオブジェクト。スクリプトから制御を行います。 Image_canvasgroup ポップアップウインドウの背景表示用のゲームオブジェクト。画面全体を覆うように作成します。 Image ScrollView の背景用のゲームオブジェクト。 ScrollView ムービー画像をサムネイル表示したボタンのゲームオブジェクト群を配置するゲームオブジェクト。上下にスクロールする機能を利用します。 子オブジェクトが複数一緒に作成されますので、そちらを利用します。 btnCloseShowMovieCollection ポップアップを閉じるためのボタンのゲームオブジェクト。スクリプトから制御を行います。
下記のヒエラルキー画像のような状態になることを目的とします。
UI の配置には親子関係が重要になりますので、下記の画像を見直しながら、間違えないように作成してください。
ヒエラルキー画像
Scece ビュー画像
Game ビュー画像
２．新しい Canvas ゲームオブジェクトを作成する
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
Canvas ゲームオブジェクトと EventSystem ゲームオブジェクトが作成されます。
Canvas の名前を Canvas_MovieCollection や、CanvasWithMovieCollection のように役割の分かりやすい名称に変更してください。
Canvas を作成したら、インスペクターより、CanvasScaler コンポーネントの設定を行います。
UI Scale Mode の設定を Scale With Screen Size に変更し、Reference Resolution の X と Y の値をそれぞれ Game ビューの解像度と合わせます。
また、Screen Match Mode を Expand に変更します。
インスペクター画像(Reference Resolution の X と Y の値は参考値です。自分のプロジェクトの Game ビューに合わせてください)
以上でこの手順は完成です。続いて、子オブジェクトを作成します。
３．btnShowMovieCollection ゲームオブジェクトを作成する
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択します。名前を btnShowMovieCollection に変更します。
子オブジェクトとして Text ゲームオブジェクトが自動的に作成されます。
どちらのゲームオブジェクトも特別な設定はしていません。
ボタンのサイズ、文字のフォント・サイズ・位置などは自由に設定してください。
Text プロパティにはボタンの機能がわかるような文字を入力してください。
この例では "Show Movie List" と入力しています。
インスペクター画像
インスペクター画像
Scene ビュー画像
Game ビュー画像
４．Image_canvasgroup ゲームオブジェクトを作成する
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。名前を Image_canvasgroup に変更します。
サイズについてはゲーム画面と同じサイズか、それよりも大きなサイズにし、全画面を覆うようにします。
Image コンポーネントの Raycast Target プロパティのチェックは外しておいてください。
また Color プロパティで色を黒にし、Alpha の値を下げて画面を覆う半透明な黒い背景用のゲームオブジェクトとして機能するように設定してください。
その際には、SceneビューとGameビューで確認を行いながら設定してください。
インスペクター画像
Scene ビュー画像
Game ビュー画像
５．Image ゲームオブジェクトを作成する
Image_canvasgroup ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。名前は変更してもしなくても大丈夫です。
親子関係を間違えないように作成してください。
こちらも Image コンポーネントの Raycast Target プロパティのチェックは外しておいてください。
また Color は任意です。初期値でも問題ありません。これは次に作成する ScrollView 用の背景画像としての機能を持ちます。
Source Image に画像も設定しておくと、下記のような丸みを帯びた背景とすることが出来ます。
インスペクター画像
Scene ビュー画像
Game ビュー画像
６．ScrollView ゲームオブジェクトを作成する
Image ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => ScrollView を選択します。名前は変更してもしなくても大丈夫です。
このゲームオブジェクトも親子関係を間違えないように作成してください。
ScrollView ゲームオブジェクトを作成すると、それに付随するゲームオブジェクトが複数一緒に作成されます。
これらを複合的に利用して、スクロールさせる処理を行っています。
ScrollView ゲームオブジェクトのインスペクターを確認します。ScrollRect コンポーネントがアタッチされていると思いますが、
こちらが、枠内の大きさに合わせて表示枠内をスクロールさせる機能になります。
スクロールさせる方向は縦（垂直）、または横（水平）方向になります。ボタンの配置に合わせてどちらかに指定します。
今回は垂直方向にロード用のボタンを並べる予定ですので、スクロールさせる方向も垂直方向にします。
これは ScrollBar Vertial ゲームオブジェクトとその子オブジェクトを利用しています。
ScrollView ゲームオブジェクトにアタッチされている Image コンポーネントに背景画像を設定するとフレームの画像を設定できます。
ここでは初期設定ですが、任意の画像に変えて、どの部分がどのように変化するか確認しておくといいでしょう。
Scroll Rect コンポーネントがスクロールの機能を管理しています。
最初は Hozizontal と Vertical というスイッチが両方ともオンになっています。
このスイッチの方向にスクロール機能が有効になりますので、今回は横方向用の Horizontal のスイッチをオフにしてください。
こうすることで縦方向のみにスクロール機能を有効にできます。(両方がオンだと斜めに動きます)
そのほかは初期設定のままですが、操作して、どの機能がどのような働きを持つか確認しておいてください。
その後、画面の大きさなどを加味し、下記の画像を参考してScrollView ゲームオブジェクトの大きさを調整してください。
この大きさがボタン群の表示される枠になります。
ヒエラルキー画像
インスペクター画像
Scene ビュー画像
Game ビュー画像
ScrollView ゲームオブジェクトと一緒に作成されるゲームオブジェクトのうち、子オブジェクトである、Viewport ゲームオブジェクトは変更ありません。
インスペクター画像
Viewport ゲームオブジェクトの子オブジェクトである、Content ゲームオブジェクトのみ、コンポーネントの追加を行います。
Content ゲームオブジェクトは、実際にサムネイル用ボタンを設置する場所になります。
この Content ゲームオブジェクトの子オブジェクトとしてサムネイル用のボタンを生成します。
生成の際、ボタンの大きさを統一し、かつ、自動的に整列して並ぶように、レイアウト機能を持つコンポーネントを１つ追加します。
Content ゲームオブジェクトを選択してインスペクターを確認します。インスペクターの一番下にある Add Component ボタンを押して
Content Size Fitter コンポーネントと、GridLayoutGroup コンポーネントを追加してください。
この機能を利用することによって、この Content ゲームオブジェクトの子オブジェクトの大きさと整列を行うことが出来ます。
Content Size Fitter コンポーネントと GridLayoutGroup コンポーネントの設定ですが、下記の画像のように設定をしてください。
インスペクター画像
＜Scrollbar Vertical ゲームオブジェクト＞
これらも Scroll View ゲームオブジェクトを作成すると自動的に追加されるゲームオブジェクトです。
ScrollView ゲームオブジェクトの左部にあるスライドバーの部分です。ゲームを実行すると自動的に隠れるようになっています。
変更はありませんので割愛します。
７．＜Grid Layout Groupコンポーネントの使用方法＞
Grid Layout Groupコンポーネントは Layout を自動的に調整するコンポーネントの１つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広い Layout の調整が可能です。
今回設定を行ったプロパティについて説明していきます。
１．CellSize
CellSize は、Grid Layout Group の子オブジェクトとして配置されたゲームオブジェクトの Width と Height をこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。
今回は x = 300, y = 300 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
今回であれば次の手順で作成する味方のキャラのサムネイル用のゲームオブジェクトの大きさがこのサイズに自動調整されます。
２．Spacing
Spacing は設定した x と y の値の分だけ、隣り合うゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は水平方向のスペース、y は垂直方向のスペースの距離です。
今回 X = 30、Y = 80 に設定していますので、子ゲームオブジェクト同士は水平方向に 30 のスペース、垂直方向に 80 のスペースを取って自動的に並ぶようになります。
３．Start Corner
子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは親オブジェクトの左上から順番に並び始めるようになります。
４．Start Axis
子オブジェクトを並べる方向です。垂直方向に並べる場合には Vertical、水平方向に並べる場合には Horizontal を選択します。
今回は水平方向に並べてそろえたいので、Horizontal を選択しています。
５．Child Alignment
子オブジェクトの配置を行う際、すべての要素が詰まっていない場合に、どの位置に子オブジェクトを配置するか設定する機能です。
今回は Upper Left に設定しています。この設定があると、Start Cornerによって並んだあと、空いている場所がある場合には、この設定によって位置が変更されます。
そのため、１つしか子オブジェクトがない場合には、左に位置するようになり、２つになったときは、左からみて２つ並ぶようになります。
６．Constraint と ConstraintCount
行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。
今回は Fixed Column Count の設定にしています。水平方向に指定数だけ並んだら、次の行に移ってまた並べ始めるという設定です。
Constraint Count が指定数になります。今回は 7 を指定していますので、水平方向に７つ子オブジェクトが並んだら
次の行へ移動してまた水平方向に７つまで子オブジェクトを並べる、という並び順を指定しています。
新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
マニュアルや、他の記事なども参考にしてください。
便利なコンポーネントになりますので、ぜひ自分で色々と設定を変更しながら、どのような挙動制御が可能なのかを確認してください。
＜参考サイト＞
Unity公式マニュアル
Grid Layout Group
Unityで魔物使い ゲームを作る様
Grid Layout Group
７．btnCloseMovieCollection ゲームオブジェクトを作成する
Image_canvasgroup ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択します。名前を btnCloseMovieCollection に変更します。
子オブジェクトとして Text ゲームオブジェクトが自動的に作成されます。親子関係を間違えないように作成してください。
インスペクター画像
btnCloseMovieCollection ゲームオブジェクトの子オブジェクトとして Text ゲームオブジェクトが一緒に作成されています。
Text コンポーネント内の Text プロパティに「Close List」のように文字を入力してください。
このボタンがどのような役割を持っているかを画面上に表示し、機能を明示させます。フォント、サイズ、位置は任意値です。
インスペクター画像
Scene ビュー画像
Game ビュー画像
以上で完成です。
完成図の通りになっているか、自分のプロジェクトのヒエラルキーと、下記のヒエラルキー画像をもう一度比較して確認してください。
ヒエラルキー画像
以上でこの手順は終了です。
=> 次は ム―ビーリストの一覧表示の実装例�� です。