Unityに関連する記事です

 ムービー一覧ポップアップの機能についての最後の実装になります。

 この手順が完成することにより、下記の動画のような機能が実装出来ます。


<実装動画 
動画ファイルへのリンク


<実装動画◆
動画ファイルへのリンク




設計


 ここまでの手順で作成してきたポップアップのゲームオブジェクトやサムネイルのゲームオブジェクトは
それぞれが独立しており、バラバラで繋がりがありません。

 そのため、スクリプトを用意し、今までに作成してきたゲームオブジェクト同士を組み上げて、ムービー一覧ポップアップを完成させます。

 例えば、Canvas に用意しているボタンを押すことでムービー一覧ポップアップが開いたり、閉じたりするように制御します。
また、ムービー一覧ポップアップにはサムネイルのゲームオブジェクトがない状態で存在していますので、
ポップアップが開く直前のタイミングでサムネイルのゲームオブジェクトを作成します。

 サムネイルのゲームオブジェクトに対して、どのようなムービーの情報を紐づけるかについては、
こちらも管理用のスクリプトを用意し、その中にムービーの情報を管理するリストを作成します。
このリストに登録されている情報を元にして、各サムネイルのゲームオブジェクトにムービーの情報を紐づけします。

 例えば、リストに2つのムービーの情報がある場合、サムネイルのゲームオブジェクトも2つ作成し、
それぞれに異なるムービーの情報を1つずつ紐づけします。

 サムネイルのゲームオブジェクトは ThumbnailView スクリプトがアタッチされており、制御が可能になっているため、
リストの情報を元に各々のサムネイルが異なるムービーの情報と紐づけて動くように設計されています。


UserData スクリプトの作成


 まずはムービーの情報を管理するためのクラスを作成します。
ムービーの情報については様々なクラスから参照されることを前提として設計し、シングルトンクラスとして UserData を作成します。

 こちらにアイテムの情報を登録できる List 型の変数を用意します。

 まずは単純に、この List については手動、あるいは、データベース(スクリプタブル・オブジェクト)にある
すべてのアイテムの情報を自動的に登録するようにして、デバッグが行える状態にします。

 デバッグについては、デバッグ用のスイッチとして機能する bool 型の変数も用意しておきます。
これをインスペクターよりオンオフすることにより、スクリプトを修正せずともデバッグ用の処理を使うか、使わないかを切り替えられるように準備しておきます。

 デバッグも設計に組みこむべき重要な要素です。
なぜならデバッグは何回も繰り返し行うことが前提となっているため、時間のかかる部分です。
効率化を図るためにも、どうすればより簡単にデバッグが行えるかを考えて作成します。


UserData.cs

<= クリックすると開きます。


 スクリプトを作成したらセーブします。


UserData ゲームオブジェクトを作成し、UserData スクリプトをアタッチして設定を行う


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択して新しいゲームオブジェクトを作成します。
名前を UserData に変更し、先ほど作成した UserData スクリプトをドラッグアンドドロップしてアタッチします。


 アタッチの成否確認のため、ゲームオブジェクトを選択してインスペクターでスクリプトのアタッチの有無を必ず確認します。

 今回はデバッグ用のスイッチ変数が用意してありますので、IsDebugItemAdd 変数を true にしておきます。
こうすることによりデバッグモードとなり、ゲーム実行のタイミングでアイテムのリストにスクリプタブル・オブジェクトに登録されている
すべてのアイテムのデータが自動的に代入されます。この情報をベースに、ムービー一覧ポップアップ内のサムネイルのゲームオブジェクトが生成されます。

 そのため、ゲームを開始するまではアイテムのリストは空の状態(Size 0)で問題ありません。


インスペクター画像



 以上で設定は完了です。


ThumbnailGenerator スクリプトの作成


 プレハブになっている ThumbnailView ゲームオブジェクトを作成するクラスです。

 UserData にあるアイテムのリストに基づいてゲームオブジェクトを生成します。
そのあと、各サムネイルとしての機能を有するためにアイテムの情報を紐づけて設定させる処理を実行します。
実際にアイテムの情報を用いて設定を行うのは ThumbnailView スクリプトに用意してある SetUpThumbnailView メソッドになります。


ThumbnailGenerator.cs

<= クリックすると開きます。


 スクリプトを作成したらセーブします。


MovieCollectionManager スクリプトの作成


 ムービー一覧ポップアップ関連の機能をまとめて管理するためのクラスです。
一覧表示用のボタン制御、および、ボタンを押すたびに、最新のムービーリストを利用してサムネイルを作成するように ThumbnailGenerator に命令をします。

 また、いずれかのサムネイルをクリックした場合には、重複クリックや他のサムネイルをクリックできないように制御をしています。
 
 DOTween と UniRx の機能を活用していますので、インポートしていない場合にはアセットストアよりインポートしてください。


MovieCollectionManager.cs

<= クリックすると開きます。


 スクリプトを作成したらセーブします。


Canvas_MovieCollection ゲームオブジェクトに ThumbnailGenerator スクリプトと MovieCollectionManager スクリプトをアタッチして設定を行う


 先ほど作成した2つのスクリプトをアタッチして利用できる状態にします。
アタッチするゲームオブジェクト先は管理のしやすさを考慮して、Canvas_MovieCollection ゲームオブジェクトにします。

 2つのスクリプトをドラッグアンドドロップしてアタッチし、インスペクターを確認してください。
各スクリプトにある変数に対して、必要な情報をアサインしてください。


インスペクター画像



 以上で設定は完了です。


ゲームを実行して動作を確認する


 すべての手順が完了しましたので、最後にゲームを実行してデバッグを行い、動作が正常であるか検証します。

 まずはプログラムを見直し、どのように処理が動いていれば正常であるのか、しっかりと自分で把握を行ってください。
良し悪しの判断ができる状態でなければデバッグを行ったとしても、正常なのか、不具合があるのか見極めることができないためです。

 合わせて、動作内部のチェックする部分も確認しておいてください。
ポップアップを表示するボタンが機能するか、ポップアップ内にサムネイルのゲームオブジェクトが自動生成されるか、
生成されるサムネイルの情報が UserData のアイテムの情報と紐づいているか、サムネイルをクリックしたらムービーが再生されるか、など多岐に渡ります。

 これらすべてのチェックを行い、それぞれについて良し悪しの判断をします
処理のすべてが正常に動作しているかを、自分ひとりで見極めることがデバッグにおいては重要になります。


<実装動画 
動画ファイルへのリンク


<実装動画◆
動画ファイルへのリンク


 以上で完成です。



 以上でこの手順は終了です。

 => 次は ム―ビーリストの一覧表示の実装例 です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます