AR空間にリストから選択した画像のオブジェクトを生成する��
最終更新：
orika_ex_miyako 2023年03月02日(木) 14:20:08履歴
この手順が完成することにより、下記の動画のような複数のサムネイルのゲームオブジェクトを並べた際のスクロール機能の確認が出来ます。
＜実装動画 エディター＞
動画ファイルへのリンク
設計
サムネイルのゲームオブジェクトとして、プレハブにした TextureThumbnailDetail のゲームオブジェクトを用意しました。
このゲームオブジェクトと同名の TextureThumbnailDetail スクリプトを作成します。
そしてスクリプトを利用し、画像の設定やボタンの制御が可能な状態にします。
このスクリプトがゲームオブジェクトの管理を行うことにより、画像用サムネイルとしての振る舞いをさせることが目的です。
また実際に複数のゲームオブジェクトを並べて、ゲーム内でどのようにスクロール機能と連動するかを確認します。
プログラムを書く前に、実際にどういう状態を作りたいのかをシミュレーションしておくことで、プログラムを構築するイメージがわきやすくなります。
よって今回の手順ではまだプログラムから画像を設定したり、自動的に設定して並べていく機能は実装しません。
あくまでも準備をして、事前の確認をしておく段階です。
実際に自分でプログラムを考えるときにも、このように少しずつ実装していくように設計を考えておくと制作しやすくなります。
いきなりすべての機能を実装することは出来ません。積み重ねて作っていきましょう。
TextureThumbnailDetail スクリプトの作成
サムネイル用のゲームオブジェクトを制御し、サムネイルの画像を設定したり、ボタンとしての役割を与えるためのスクリプトです。
TextureThumbnailDetail.cs
スクリプトを作成したらセーブします。
プレハブの TextureThumbnailDetail ゲームオブジェクトに TextureThumbnailDetail スクリプトをアタッチして設定を行う
作成した TextureThumbnailDetail スクリプトを、 Prefabs フォルダにある TextureThumbnailDetail ゲームオブジェクトにアタッチし、
各変数に TextureThumbnailDetail ゲームオブジェクト内の情報をアサインして設定します。
制御したい機能を考えることで、どの変数にどのコンポーネントをアサインすればよいのか分かってきます。
インスペクター画像
以上で設定は完了です。
Content ゲームオブジェクトの子オブジェクトに複数の TextureThumbnailDetail ゲームオブジェクトを並べてサイズ感を確認する
ヒエラルキーの Content ゲームオブジェクトの子オブジェクトにはプレハブにした TextureThumbnailDetail ゲームオブジェクト残っているはずです。
もしもヒエラルキーより削除してしまっている場合には、Prefabs フォルダにある TextureThumbnailDetail ゲームオブジェクトを Content の子オブジェクトに配置してください。
ヒエラルキー画像
Content ゲームオブジェクトの子オブジェクトにあるプレハブの TextureThumbnailDetail ゲームオブジェクトを複製し、たくさん並べてください。
TextureThumbnailDetail ゲームオブジェクトを選択した状態で Ctrl + D ボタンを押せば複製できます。
下記のサンプル画像のように ScrollView の枠からはみ出るように、たくさん並べてください。
Content ゲームオブジェクトにアタッチされている GridLayoutGroup コンポーネントの設定により、
水平方向に３つ並び、４つ目は次の行に自動的に移ります。
このようにして実際に複数の TextureThumbnailDetail ゲームオブジェクトを事前に並べて検証することにより、
１つ辺りのサイズの調整や、ゲームオブジェクト同士のスペースを検討します。
TextureThumbnailDetail ゲームオブジェクトのサイズは GridLayoutGroup コンポーネントの Cell Size により調整出来ます。
上下左右のスペースの空き具合なども併せて確認し、レイアウトが問題ないかチェックしてください。
ヒエラルキー画像
Scene ビュー画像
Game ビュー画像
サイズ等の調整が済んだら、この状態のまま正常にスクロール機能が動作するか確認を行います。
ゲームを実行して動作を確認する
ScrollView のサイズよりもはみ出している TextureThumbnailDetail ゲームオブジェクトについてですが、
ScrollView のスクロール制御はゲームを実行しないと確認が出来ません。
そこで、TextureThumbnailDetail ゲームオブジェクトを並べ終わったら一度、ゲームを実行します。
実際に ScrollView 内をマウスでクリックしてドラッグアンドドロップしてスクロールさせてみてください。
ScrollView 内で画像がスクロールし、操作を止めたそのままの位置でスクロールが止まれば制御成功です。
＜実装動画 エディター＞
動画ファイルへのリンク
もしもスクロールは出来ていても、何故か最初の位置に戻ってきてしまう場合には
ScrollView ゲームオブジェクトの子オブジェクトである Content ゲームオブジェクトにアタッチしている
Content Size Fitter コンポーネントの設定を見直してください。
Content ゲームオブジェクト
以上で完成です。
Content ゲームオブジェクト内にあるプレハブの TextureThumbnailDetail ゲームオブジェクトをすべて削除する
無事にスクロールの制御の確認が済みましたので Content ゲームオブジェクト内にある
複数のプレハブの TextureThumbnailDetail ゲームオブジェクトをすべて削除してください。
ヒエラルキー画像(削除後)
Scene ビュー画像(削除後)
以上でこの手順は終了です。
最後の手順では、いよいよ各サムネイルのゲームオブジェクトに画像をプログラムから自動的に設定して並べていく機能を実装します。
=> 次は AR空間にリストから選択した画像のオブジェクトを生成する�� です。
＜実装動画 エディター＞
動画ファイルへのリンク
設計 
サムネイルのゲームオブジェクトとして、プレハブにした TextureThumbnailDetail のゲームオブジェクトを用意しました。
このゲームオブジェクトと同名の TextureThumbnailDetail スクリプトを作成します。
そしてスクリプトを利用し、画像の設定やボタンの制御が可能な状態にします。
このスクリプトがゲームオブジェクトの管理を行うことにより、画像用サムネイルとしての振る舞いをさせることが目的です。
また実際に複数のゲームオブジェクトを並べて、ゲーム内でどのようにスクロール機能と連動するかを確認します。
プログラムを書く前に、実際にどういう状態を作りたいのかをシミュレーションしておくことで、プログラムを構築するイメージがわきやすくなります。
よって今回の手順ではまだプログラムから画像を設定したり、自動的に設定して並べていく機能は実装しません。
あくまでも準備をして、事前の確認をしておく段階です。
実際に自分でプログラムを考えるときにも、このように少しずつ実装していくように設計を考えておくと制作しやすくなります。
いきなりすべての機能を実装することは出来ません。積み重ねて作っていきましょう。
TextureThumbnailDetail スクリプトの作成
サムネイル用のゲームオブジェクトを制御し、サムネイルの画像を設定したり、ボタンとしての役割を与えるためのスクリプトです。
TextureThumbnailDetail.cs
<= クリックすると開きます。
スクリプトを作成したらセーブします。
プレハブの TextureThumbnailDetail ゲームオブジェクトに TextureThumbnailDetail スクリプトをアタッチして設定を行う
作成した TextureThumbnailDetail スクリプトを、 Prefabs フォルダにある TextureThumbnailDetail ゲームオブジェクトにアタッチし、
各変数に TextureThumbnailDetail ゲームオブジェクト内の情報をアサインして設定します。
制御したい機能を考えることで、どの変数にどのコンポーネントをアサインすればよいのか分かってきます。
インスペクター画像
以上で設定は完了です。
Content ゲームオブジェクトの子オブジェクトに複数の TextureThumbnailDetail ゲームオブジェクトを並べてサイズ感を確認する
ヒエラルキーの Content ゲームオブジェクトの子オブジェクトにはプレハブにした TextureThumbnailDetail ゲームオブジェクト残っているはずです。
もしもヒエラルキーより削除してしまっている場合には、Prefabs フォルダにある TextureThumbnailDetail ゲームオブジェクトを Content の子オブジェクトに配置してください。
ヒエラルキー画像
Content ゲームオブジェクトの子オブジェクトにあるプレハブの TextureThumbnailDetail ゲームオブジェクトを複製し、たくさん並べてください。
TextureThumbnailDetail ゲームオブジェクトを選択した状態で Ctrl + D ボタンを押せば複製できます。
下記のサンプル画像のように ScrollView の枠からはみ出るように、たくさん並べてください。
Content ゲームオブジェクトにアタッチされている GridLayoutGroup コンポーネントの設定により、
水平方向に３つ並び、４つ目は次の行に自動的に移ります。
このようにして実際に複数の TextureThumbnailDetail ゲームオブジェクトを事前に並べて検証することにより、
１つ辺りのサイズの調整や、ゲームオブジェクト同士のスペースを検討します。
TextureThumbnailDetail ゲームオブジェクトのサイズは GridLayoutGroup コンポーネントの Cell Size により調整出来ます。
上下左右のスペースの空き具合なども併せて確認し、レイアウトが問題ないかチェックしてください。
ヒエラルキー画像
Scene ビュー画像
Game ビュー画像
サイズ等の調整が済んだら、この状態のまま正常にスクロール機能が動作するか確認を行います。
ゲームを実行して動作を確認する
ScrollView のサイズよりもはみ出している TextureThumbnailDetail ゲームオブジェクトについてですが、
ScrollView のスクロール制御はゲームを実行しないと確認が出来ません。
そこで、TextureThumbnailDetail ゲームオブジェクトを並べ終わったら一度、ゲームを実行します。
実際に ScrollView 内をマウスでクリックしてドラッグアンドドロップしてスクロールさせてみてください。
ScrollView 内で画像がスクロールし、操作を止めたそのままの位置でスクロールが止まれば制御成功です。
＜実装動画 エディター＞
動画ファイルへのリンク
もしもスクロールは出来ていても、何故か最初の位置に戻ってきてしまう場合には
ScrollView ゲームオブジェクトの子オブジェクトである Content ゲームオブジェクトにアタッチしている
Content Size Fitter コンポーネントの設定を見直してください。
Content ゲームオブジェクト
以上で完成です。
Content ゲームオブジェクト内にあるプレハブの TextureThumbnailDetail ゲームオブジェクトをすべて削除する
無事にスクロールの制御の確認が済みましたので Content ゲームオブジェクト内にある
複数のプレハブの TextureThumbnailDetail ゲームオブジェクトをすべて削除してください。
ヒエラルキー画像(削除後)
Scene ビュー画像(削除後)
以上でこの手順は終了です。
最後の手順では、いよいよ各サムネイルのゲームオブジェクトに画像をプログラムから自動的に設定して並べていく機能を実装します。
=> 次は AR空間にリストから選択した画像のオブジェクトを生成する�� です。
コメントをかく