Unityに関連する記事です

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


<実装動画 エディター>
動画ファイルへのリンク



設計


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

 そのため、スクリプトを用意し、今までに作成してきたゲームオブジェクト同士を組み上げて、
平面感知機能とポップアップを開く処理、サムネイルからゲームオブジェクトを生成する処理を完成させます。



 ゲームが開始したタイミングで、ヒエラルキーにある TextureThumbnailCanvas を非アクティブにし、ポップアップウインドウを見えない状態にします。

 平面感知した際に、ゲームオブジェクトを生成する処理ではなく、この TextureThumbnailCanvas をアクティブにし、
かつ、ポップアップが開く直前のタイミングでサムネイルのゲームオブジェクトを TextureThumbnailCanvas 内の Content ゲームオブジェクトの子オブジェクト作成し、一覧表示させます。



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


 サムネイルのゲームオブジェクトには新しく TextureThumbnailDetail スクリプトをアタッチし、画像の設定やボタンの制御が可能な状態にします。
リストの情報を元に各々のサムネイルが異なるムービーの情報と紐づけて動くように設計されています。


ポップアップウインドウの制御と動作確認

TextureThumbnailPopUp スクリプトの作成


 ポップアップウインドウ用に作成した TextureThumbnailCanvas ゲームオブジェクトの制御を行うスクリプトを作成します。
画面への表示/非表示の他、プレハブになっている TextureThumbnailDetail ゲームオブジェクトを作成します。

 ImageDataSO スクリプタブル・オブジェクトに登録されている画像のデータベースに基づいて TextureThumbnailDetail ゲームオブジェクトを生成します。
そのあと、各サムネイルとしての機能を有するために画像の情報を紐づけて設定させる処理を実行します。
実際に画像の情報を用いて設定を行うのは TextureThumbnailDetail スクリプトに用意してある SetUpTextureThumbnailDetail メソッドになります。


TextureThumbnailPopUp.cs

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


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


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


 TextureThumbnailCanvas ゲームオブジェクトに TextureThumbnailPopUp スクリプトをアタッチして利用できる状態にします。
自動的に CanvasGroup コンポーネントがアタッチされます。

 インスペクターを確認し、各変数に対して、必要な情報をアサインしてください。

 ThumbnailDetailPrefab 変数には、Prefabs フォルダにある TextureThumbnailDetail プレハブをアサインします。

 ThumbnailTran 変数にはヒエラルキーにある Content ゲームオブジェクトをアサインします。

 CanvasGroup 変数にはヒエラルキーにある TextureThumbnailCanvas ゲームオブジェクトをアサインします。

 アサインは、アサインに利用したゲームオブジェクトのそのもの情報ではなく、
そのゲームオブジェクトにある、アサインした変数のデータ型に応じたコンポーネント情報が登録されることを念頭に置いておきましょう。
アサイン時に表示される情報で確認が出来ますので、インスペクターの見方を正確に覚えておくことがポイントです。
ここが読み解けないと、どのゲームオブジェクトをアサインしていいのか、理解ができなくなってしまうためです。


インスペクター画像



 以上で設定は完了です。


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


 エディターでゲームを実行して動作を確認してください。

 ゲーム実行後、すぐにサムネイルのゲームオブジェクト群のポップアップウインドウが開けば制御成功です。
理由は、Start メソッドでサムネイルのゲームオブジェクトの生成と、ポップアップウインドウを開く処理を施しているためです。

 ポップアップウインドウ内のサムネイルには、スクリプタブル・オブジェクトに登録しているデータを参照し、
登録されているデータの数のサムネイルが作成されて、各々の画像が異なっていれば、そちらも制御成功です。


<確認動画>
動画ファイルへのリンク


 このように、実装した内容は必ずデバッグし、問題点がないことを検証してから、次の制作に進むようにしてください。
これは教材のみならず、自分でゲーム制作をする際にもとても大切な考え方になります。


仕上げ

プレハブの TextureView ゲームオブジェクトのマテリアルのアサインを解除する


 プレハブの TextureView ゲームオブジェクトを選択して、
MeshRenderer コンポーネント内にアサインしているマテリアルを None にするか、
Default Material に変更し、マテリアルの設定のない状態にしておきます。

 マテリアルが None の場合にはピンク色、Default Material の場合には白色になります。




 プレハブのゲームオブジェクトを生成時に、マテリアルも自動的にセットする機能も実装しますので、
生成前のタイミングではマテリアルを設定しておく必要がないためです。


TextureThumbnailPopUp スクリプトを修正する


 Start メソッドに記述しているデバッグ用の処理をコメントアウトするか、削除します。


    void Start() {

        // デバッグ用
        //SetUpPopUp();

    // デバッグ用
    //ShowPopUp();
    }

 いままではゲーム実行と同時にポップアップウインドウ内にサムネイルが生成されて、ポップアップウインドウが開いていましたが、それらを停止します。


TextureView スクリプトの作成


 TODO 部分を補記し、スクリプトを完成させます。

 SetUpTextureView メソッドに届いている引数の情報を利用して、
ImageDataSO スクリプタブル・オブジェクト内のデータの検索と情報の抽出を行い、今回ゲームオブジェクトに適用するマテリアルの情報を取得します。

 取得したマテリアルの情報は、サムネイルのゲームオブジェクトの画像と同じものになりますので、
それをゲームオブジェクトのマテリアルに設定することにより、同じ見た目を持つゲームオブジェクトがゲーム画面に出来上がります。


TextureView.cs

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


 スクリプトを修正したらセーブします。


ARTextureManager スクリプトの修正


 新しい変数とメソッドの追加を行い、ポップアップウインドウの制御を行います。
また、タップした際の処理を修正し、既存の生成処理をポップアップウインドウを開く処理に変更します。


ARTextureManager.cs

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


 スクリプトを修正したらセーブします。


ARSession Origin ゲームオブジェクトの ARTextureManager の設定を行う


 ARSession Origin ゲームオブジェクトのインスペクターを確認します。
ARTextureManager スクリプトに新しい変数の宣言を追加しているため、
そちらにヒエラルキーにある TextureThumbnailCanvas ゲームオブジェクトをアサインして TextureThumbnailPopUp スクリプトを登録します。


インスペクター画像



 以上で設定は完了です。


処理の流れを把握する


 プログラムを順番に読み解いていき、どういった処理が、どのタイミングで実行されているのかを把握していきます。

<1.ゲーム実行時>
 ・ARTextureManager クラスの Start メソッド内でポップアップウインドウを非アクティブにする。

 ・同じく ARTextureManager クラスの Start メソッド内で TextureThumbnailPopUp クラスの SetUpPop メソッドを実行し、
  ポップアップ内に ItemDataSO スクリプタブル・オブジェクトのデータを利用して、サムネイル用のゲームオブジェクトである TextureThumbnailDetail を複数生成して並べておく。
  生成されるサムネイル用のゲームオブジェクトの数は ItemDataSO スクリプタブル・オブジェクトに登録されている全データとする。

 ・生成時には TextureThumbnailDetail クラスの SetUpTextureThumbnailDetail メソッドを実行し、画像の設定や、ボタンの設定などを行っている。

 ・ポップアップウインドウを非アクティブにしてからサムネイルを生成しておくことにより、
  ゲーム画面の裏側(ユーザーに見えない所)でサムネイルが並べておくことで、ポップアップウインドウがアクティブになったときには、すべて準備が整っている。



<2.平面感知後のタップ時>
 ・ARTextureManager クラスの TrackingPlane メソッド内で平面感知を行う。これは今まで通り。

 ・平面をタップした際の処理を変更したので、タップした時にはタップ地点へのゲームオブジェクトの生成ではなく、
  代わりに TextureThumbnailPopUp クラスの ShowPopUp メソッドを実行して非アクティブになっていたポップアップウインドウをアクティブにする。
  この時にはすでにサムネイル用ゲームオブジェクトの生成と並べる処理は終了しているので、ポップアップウインドウが表示されたタイミングですでにサムネイルが並んでいる。

 ・ShowPopUp メソッドを実行したときには、メソッドの引数として touchPosition 変数の値を用意する。
  この値には ARTextureManager クラスの「平面をタップした位置」の情報が代入されている。
  つまり、ARTextureManager クラスの touchPosition 変数 → TextureThumbnailPopUp クラスの ShowPopUp メソッド側にも提供されるので、
  異なるクラス間であっても、タップした位置の情報を扱える。



<3.サムネイル用のゲームオブジェクトをタップ(クリック)時>
 ・サムネイルのゲームオブジェクトには TextureThumbnailDetail クラスがアタッチされており、ボタンの機能として OnClickThumbnail メソッドが登録されている。
  そのため、ユーザーがサムネイルのゲームオブジェクトをタップ(クリック)すると OnClickThumbnail メソッドが実行される。

 ・OnClickThumbnail メソッドでは2つの処理が順番に行われる。
 
 ・1つはシングルトンクラスである TextureGenerator クラスの GenerateTextureImage メソッドが実行されて、ゲームオブジェクトの生成処理が実行される。
  このメソッド自体は以前からゲームオブジェクトの生成時に利用していたが、今回は引数として imageData.id, textureThumbnailPopUp.GetTouchPosition() の2つの情報を渡している。

 ・もう1つは TextureThumbnailPopUp クラスの HidePopUp メソッドが実行されて、ポップアップウインドウを閉じる処理が実行される。

 ・つまり、サムネイルのゲームオブジェクトでは、ゲームオブジェクトの生成の実行処理と、ポップアップウインドウの閉じる処理を実行しているだけで
  このクラス自体では、生成もすることも、ポップアップウインドウを閉じることも、直接は行っていない。
  各クラスは役割を分担しているので、命令を出すだけで、それぞれの役割を持つクラスが自分の責務を果たすような仕組みになっている。



<4.ゲームオブジェクトの生成>
 ・ゲームオブジェクトの生成処理自体は TextureGenerator クラスの GenerateTextureImage メソッドで行う。これは今まで通り。

 ・ただし今回は GenerateTextureImage メソッドを実行した TextureThumbnailDetail クラスより、
  メソッドの引数に imageData.id, textureThumbnailPopUp.GetTouchPosition() の2つの情報が届いている。

 ・ imageData.id の情報は ImageDataSO スクリプタブル・オブジェクトで利用するために提供される。
  この情報を利用して、ImageDataSO スクリプタブル・オブジェクトのデータと連携し、サムネイルのゲームオブジェクトの画像と同じデータ内にあるマテリアルの情報を取得するために利用する。
  そしてそのマテリアルの情報を生成した TextureView ゲームオブジェクトのマテリアルとして設定することにより、
  サムネイルのゲームオブジェクトと同じ画像を持つゲームオブジェクトになるように、見た目を変えている処理を施している。

 ・textureThumbnailPopUp.GetTouchPosition() の情報はタップした位置の情報として提供される。
  ARTextureManager クラスが提供していたタップした位置の情報がこのクラスまで届き、ゲームオブジェクトの生成位置の情報として利用される。

 以上のような流れになっています。
実際に各クラスのメソッドを追いかけて、どのような順番で処理が動いているのか、何回も見直して復習してください。

 処理の把握が出来ていないと、仮にゲームが上手く動作しなかったとき、どの部分を見直せば修正が出来るのか、わからない状態になります

 そのため、デバッグ前には、自分の書いた処理がどのように動いていくのかを見直して、理解を深めておいてください。


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


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

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

 合わせて、動作内部のチェックする部分も確認しておいてください。

 ・平面感知した地点をタップしたらポップアップが表示されるか、
 ・ポップアップ内にサムネイルのゲームオブジェクトが自動生成されるか、
 ・生成されるサムネイルの情報が ImageDataSO スクリプタブル・オブジェクトに登録されている ImagaData の情報と紐づいているか、
 ・サムネイルをクリックしたらポップアップウインドウが閉じ、かつ、選択した画像のマテリアルが選択されたゲームオブジェクト生成がされるか

 など多岐に渡ります。

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


<実装動画 エディター>
動画ファイルへのリンク




 以上で完成です。

 お疲れ様でした!

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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