Unityに関連する記事です

 5回の手順に分けて、データベースに登録されている画像をポップアップウインドウ内にサムネイルとして一覧表示機能し、
選択したサムネイルの画像を持ったゲームオブジェクトを生成する機能を実装します。

 下記の動画は最後の手順まで完成した際のものです。


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




事前準備


 この手順は発展的な学習になります。
事前準備として AR の平面感知機能の実装が必要になります。

 こちらの5つの手順を実装してからこの手順を進めてください。
AR空間に画像付きのオブジェクトを生成する
AR空間に画像付きのオブジェクトを生成する
AR空間に画像付きのオブジェクトを生成する
AR空間に画像付きのオブジェクトを生成する
AR空間に画像付きのオブジェクトを生成する


設計


 すでに学習している平面感知機能をそのまま応用して利用します。

 いままでは感知している平面をタップした際に画像の添付されたゲームオブジェクトを生成していました。
今回はタップしたタイミングでゲームオブジェクトではなくポップアップウインドウを表示し、その中に複数のサムネイル画像をリスト化して一覧表示します。


ポップアップウインドウとサムネイル群



 ポップアップウインドウ内には ScrollView 機能を利用することにより、
サムネイルの数がポップアップウインドウ内に収まらない場合には、上下にスクロールして表示できるようにしておきます。


動画 スクロール機能
動画ファイルへのリンク


 そのため制作していく内容としては、すでにある平面感知機能とゲームオブジェクトの生成機能に
新しくポップアップウインドウやサムネイルを作成する機能を追加し、これらの複数の機能を上手く組み合わせるようにします。


ゲームオブジェクトの情報を変える


 サムネイルの画像には、ゲームオブジェクトを生成した際に添付する画像と同じ画像を表示します。
またこれらはボタンになっており、いずれかを1つをクリック(タップ)することでその画像が添付されたゲームオブジェクトを生成するようにします。

 特にサムネイルについては、別途データベース用にスクリプタブル・オブジェクトの機能を利用し
1つのゲームオブジェクトから、異なるサムネイルを作成できるように実装します。

 これは例えば、5種類の画像があったときに、同じ種類の画像のみ異なるゲームオブジェクトを5種類用意しておくのではなく
元となるゲームオブジェクトを1つだけ用意しておいて、生成時にデータベースの機能と連動し、
その都度画像などのデータを動的に設定することで、ゲームオブジェクトの持つデータを変える仕組みを利用します。

 これにより、機能は同じである1つのゲームオブジェクトから、異なる画像や情報を持つゲームオブジェクトを作成することができます。
仮に画像のデータが1000種類になったとしても、この方法を利用すれば手動でゲームオブジェクトに画像を設定する必要はなくなります


元のサムネイル用のゲームオブジェクト


    ↓

生成時に画像などのデータを差し替えて、同じ機能を持つ、見た目が違うゲームオブジェクトにする




 これを自動化することにより


これが


  ↓


自動的にこのようになる



 このように、同じ機能を持つ単一のゲームオブジェクトを、異なる見た目や情報を持つ、別のゲームオブジェクトに変えることが出来ます。
ただし、ボタンなどの機能は共通でもっているので、タップしたときには、すべてのゲームオブジェクトが同じ動作をしてくれます。
今回であれば、見た目の異なる画像のサムネイルが並びますが、どれをタップしても、生成処理を実行します。

 このとき、画像の情報を生成処理に提供することにより、選択した画像の情報を持つゲームオブジェクトを生成することが出来ます。
ここでも同じように、生成されるゲームオブジェクトは1種類ですが、添付される画像が自動的に差し変わる仕組みです。



 まず最初の手順として、この回ではポップアップウインドウの作成を行います。

 2つ目の手順として、ポップアップウインドウ内に表示するサムネイル用のゲームオブジェクトの作成を行います。
 
 3つ目の手順として、画像のデータを登録するためのデータベースの作成を行います。
Unity ではスクリプタブル・オブジェクトという機能があり、データベースを自作できます。
ただし、データベースの内容の雛型はないため、どのような情報を管理させるのかは、制作者が考えてスクリプトを作成する必要があります。

 4つ目の手順として、2つ目の手順で作成したサムネイル用のゲームオブジェクトを制御するためのスクリプトの作成を行います。
このスクリプトを利用することで、1つのゲームオブジェクトを異なる見た目や情報を持つゲームオブジェクトに変更します。
また、共通で利用するボタンの設定などもスクリプトを利用して行います。

 最後の手順として、ゲーム実行時に、画像のデータベースに登録している画像の数に応じて、動的にサムネイル用のゲームオブジェクトの生成し、
ポップアップウインドウ内に並べて表示させる機能や、平面感知の機能とポップアップウインドウの表示機能を連動させます。
サムネイルをタップしたときには、そのサムネイルの画像を利用して、AR 空間にゲームオブジェクトを生成して、完成させます。


画像一覧表示用のポップアップウインドウの作成


 ARCamera ゲームオブジェクトがアクティブの場合、ゲーム実行時以外には Game ビューは黒い画面になっています。
これはエディターでは ARCamera が認識しないためです。

 もしも Scene ビューだけではなく、ゲーム実行時以外でも Game ビューでの静止画面を事前に確認しておきたい場合には
ARCamera ゲームオブジェクトを非アクティブに切り替えてください。そうすることで Game ビューが通常のカメラで映している状態に戻ります。


ヒエラルキー画像



 ただし、制作が終わって実機でのテストを行う場合には、必ず ARCamera ゲームオブジェクトをアクティブに戻すようにしてください。

 この手順は任意ですので、必ず行う必要はありません。


1.完成図


 画像をサムネイルとして一覧表示するための Canvas ゲームオブジェクト群を配置します。

 Canvas ゲームオブジェクトを含めて、合計6個の UI 用のゲームオブジェクトを作成し、設定を行うことで
ムービー一覧表示を行うポップアップウインドウとしての機能を実装します。


<構成>
 TextureThumbnailCanvas    専用の Canvas です。 
 ThumbnailSet           UI 部品の管理役のゲームオブジェクト。この子オブジェクトに UI 用のゲームオブジェクトを配置します。
 Filter              ポップアップウインドウの背景表示用のゲームオブジェクト。画面全体を覆うように作成します。
 ScrollView           画像をサムネイル表示したボタンのゲームオブジェクト群を配置するゲームオブジェクト。上下にスクロールする機能を利用します。
                子オブジェクトが複数一緒に作成されますので、そちらを利用します。

 下記のヒエラルキー画像のような状態になることを目的とします。
UI の配置には親子関係が重要になりますので、下記の画像を見直しながら、間違えないように作成してください。


ヒエラルキー画像



Scece ビュー画像



Game ビュー画像



2.新しい Canvas ゲームオブジェクトを作成する


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
Canvas ゲームオブジェクトと EventSystem ゲームオブジェクトが作成されます。

 Canvas の名前を TextureThumbnailCanvas のように役割の分かりやすい名称に変更してください。

 Canvas を作成したら、インスペクターより、CanvasScaler コンポーネントの設定を行います。

 UI Scale Mode の設定を Scale With Screen Size に変更し、Reference Resolution の X と Y の値をそれぞれ Game ビューの解像度と合わせます。
また、Screen Match Mode を Expand に変更します。


インスペクター画像(Reference Resolution の X と Y の値は参考値です。自分のプロジェクトの Game ビューに合わせてください)



 以上でこの手順は完成です。続いて、子オブジェクトを作成します。


3.ThumbnailSet ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。名前を ThumbnailSet に変更します。

 ThumbnailSet はフォルダ役のゲームオブジェクトです。このゲームオブジェクトの子オブジェクトとして UI 用のゲームオブジェクトを作成していきます。
そのため ThumbnailSet ゲームオブジェクトの Position が子オブジェクトの位置に影響しますので、必ず Position を (0, 0, 0) に設定してください。


インスペクター画像



Scene ビュー画像



4.Filter ゲームオブジェクトを作成する


 ThumbnailSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。名前を Filter に変更します。
親子関係を間違えないように作成してください。

 Filter ゲームオブジェクトは名前の通り、ゲーム画面を覆い隠すためのフィルター機能の役割を持つゲームオブジェクトです。
そのためサイズについてはゲーム画面と同じサイズか、それよりも大きなサイズにし、全画面を覆うようにします。

 Image コンポーネントの Raycast Target プロパティのチェックはチェックしたままにしておいてください。
そうすることにより、このゲームオブジェクトの部分でタップが止まり、AR 空間への不用意なタップを防止出来ます。



 Color プロパティの色は任意です。白か黒が分かりやすいでしょう。

 Alpha の値を下げて画面全体を覆う半透明な背景用のゲームオブジェクトとして機能するように設定してください。
その際には、SceneビューとGameビューで確認を行いながら設定してください。

 ここでは色は白のままで Alpha のみ下げて半透明にしています。


インスペクター画像



Scene ビュー画像



Game ビュー画像



5.ScrollView ゲームオブジェクトを作成する


 Filter ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => ScrollView を選択します。名前は変更してもしなくても大丈夫です。
このゲームオブジェクトも親子関係を間違えないように作成してください。

 ScrollView ゲームオブジェクトを作成すると、それに付随するゲームオブジェクトが複数一緒に作成されます
これらを複合的に利用して、スクロールさせる処理を行っています。



 ScrollView ゲームオブジェクトのインスペクターを確認します。ScrollRect コンポーネントがアタッチされていると思いますが、
こちらが、枠内の大きさに合わせて表示枠内をスクロールさせる機能になります。
スクロールさせる方向は縦(垂直)、または横(水平)方向になります。ボタンの配置に合わせてどちらかに指定します。

 今回は垂直方向に画像用のサムネイルボタンを並べる予定ですので、スクロールさせる方向も垂直方向にします。
これは ScrollBar Vertial ゲームオブジェクトとその子オブジェクトを利用しています。



 ScrollView ゲームオブジェクトにアタッチされている Image コンポーネントに背景画像を設定するとフレームの画像を設定できます。
ここでは初期設定ですが、任意の画像に変えて、どの部分がどのように変化するか確認しておくといいでしょう。

 Scroll Rect コンポーネントがスクロールの機能を管理しています。
最初は Hozizontal と Vertical というスイッチが両方ともオンになっています。
このスイッチの方向にスクロール機能が有効になりますので、今回は横方向用の Horizontal のスイッチをオフにしてください。
こうすることで縦方向のみにスクロール機能を有効にできます。(両方がオンだと斜めに動きます)

 そのほかは初期設定のままですが、操作して、どの機能がどのような働きを持つか確認しておいてください。



 その後、ゲーム画面の解像度などを加味した上で、下記の画像を参考して ScrollView ゲームオブジェクトのサイズを調整してください。
ScrollView ゲームオブジェクトのサイズがボタン群の表示される枠になります。


ヒエラルキー画像



インスペクター画像



Scene ビュー画像



Game ビュー画像




 ScrollView ゲームオブジェクトと一緒に作成されるゲームオブジェクトのうち、子オブジェクトである、Viewport ゲームオブジェクトは変更ありません。


インスペクター画像



Scene ビュー画像




 Viewport ゲームオブジェクトの子オブジェクトである、Content ゲームオブジェクトのみ、コンポーネントの追加を行います。

 Content ゲームオブジェクトは、実際にサムネイル用ボタンを設置する場所になります。
この Content ゲームオブジェクトの子オブジェクトとしてサムネイル用のボタンを生成します。
生成の際、ボタンの大きさを統一し、かつ、自動的に整列して並ぶように、レイアウト機能を持つコンポーネントを1つ追加します。

 Content ゲームオブジェクトを選択してインスペクターを確認します。インスペクターの一番下にある Add Component ボタンを押して
Content Size Fitter コンポーネントと、GridLayoutGroup コンポーネントを追加してください。
この機能を利用することによって、この Content ゲームオブジェクトの子オブジェクトの大きさと整列を行うことが出来ます。

 Content Size Fitter コンポーネントと GridLayoutGroup コンポーネントの設定ですが、下記の画像のように設定をしてください。


インスペクター画像



<Scrollbar Vertical ゲームオブジェクト>

 これらも Scroll View ゲームオブジェクトを作成すると自動的に追加されるゲームオブジェクトです。
ScrollView ゲームオブジェクトの左部にあるスライドバーの部分です。ゲームを実行すると自動的に隠れるようになっています。
変更はありませんので割愛します。


7.<Grid Layout Groupコンポーネントの使用方法>


 Grid Layout Groupコンポーネントは Layout を自動的に調整するコンポーネントの1つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広い Layout の調整が可能です。
 
 今回設定を行ったプロパティについて説明していきます。


1.CellSize

 CellSize は、Grid Layout Group の子オブジェクトとして配置されたゲームオブジェクトの Width と Height をこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります

 今回は x = 300, y = 300 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
今回であれば次の手順で作成する味方のキャラのサムネイル用のゲームオブジェクトの大きさがこのサイズに自動調整されます。


2.Spacing

 Spacing は設定した x と y の値の分だけ、隣り合うゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は水平方向のスペース、y は垂直方向のスペースの距離です。

 今回 X = 20、Y = 20 に設定していますので、子ゲームオブジェクト同士は水平方向に 20 のスペース、垂直方向に 20 のスペースを取って自動的に並ぶようになります。


3.Start Corner

 子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは親オブジェクトの左上から順番に並び始めるようになります。


4.Start Axis

 子オブジェクトを並べる方向です。垂直方向に並べる場合には Vertical、水平方向に並べる場合には Horizontal を選択します。
今回は水平方向に並べてそろえたいので、Horizontal を選択しています。


5.Child Alignment

 子オブジェクトの配置を行う際、すべての要素が詰まっていない場合に、どの位置に子オブジェクトを配置するか設定する機能です。
今回は Upper Left に設定しています。この設定があると、Start Cornerによって並んだあと、空いている場所がある場合には、この設定によって位置が変更されます。
そのため、1つしか子オブジェクトがない場合には、左に位置するようになり、2つになったときは、左からみて2つ並ぶようになります。


6.Constraint と ConstraintCount

 行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。

 子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。

 今回は Fixed Column Count の設定にしています。水平方向に指定数だけ並んだら、次の行に移ってまた並べ始めるという設定です。
Constraint Count が指定数になります。今回は 3 を指定していますので、水平方向に3つ子オブジェクトが並んだら
次の行へ移動してまた水平方向に3つまで子オブジェクトを並べる、という並び順を指定しています。


 新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
 マニュアルや、他の記事なども参考にしてください。

 便利なコンポーネントになりますので、ぜひ自分で色々と設定を変更しながら、どのような挙動制御が可能なのかを確認してください。


<参考サイト>
Unity公式マニュアル
Grid Layout Group
Unityで魔物使い ゲームを作る様
Grid Layout Group



 以上で完成です。
完成図の通りになっているか、自分のプロジェクトのヒエラルキーと、下記のヒエラルキー画像をもう一度比較して確認してください。


ヒエラルキー画像




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

 => 次は AR空間にリストから選択した画像のオブジェクトを生成する です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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