Unityに関連する記事です

 この手順が完成することにより、下記の動画のような複数のサムネイルのゲームオブジェクトを並べた際のスクロール機能の確認が出来ます。


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



設計


 サムネイルのゲームオブジェクトとして、プレハブにした 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 コンポーネントの設定により、
水平方向に3つ並び、4つ目は次の行に自動的に移ります。

 このようにして実際に複数の TextureThumbnailDetail ゲームオブジェクトを事前に並べて検証することにより、
1つ辺りのサイズの調整や、ゲームオブジェクト同士のスペースを検討します。

 TextureThumbnailDetail ゲームオブジェクトのサイズは GridLayoutGroup コンポーネントの Cell Size により調整出来ます。
上下左右のスペースの空き具合なども併せて確認し、レイアウトが問題ないかチェックしてください。


ヒエラルキー画像



Scene ビュー画像



Game ビュー画像




 サイズ等の調整が済んだら、この状態のまま正常にスクロール機能が動作するか確認を行います


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


 ScrollView のサイズよりもはみ出している TextureThumbnailDetail ゲームオブジェクトについてですが、
ScrollView のスクロール制御はゲームを実行しないと確認が出来ません

 そこで、TextureThumbnailDetail ゲームオブジェクトを並べ終わったら一度、ゲームを実行します。
実際に ScrollView 内をマウスでクリックしてドラッグアンドドロップしてスクロールさせてみてください。
ScrollView 内で画像がスクロールし、操作を止めたそのままの位置でスクロールが止まれば制御成功です。


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



 もしもスクロールは出来ていても、何故か最初の位置に戻ってきてしまう場合には
ScrollView ゲームオブジェクトの子オブジェクトである Content ゲームオブジェクトにアタッチしている
Content Size Fitter コンポーネントの設定を見直してください。


Content ゲームオブジェクト



 以上で完成です。


Content ゲームオブジェクト内にあるプレハブの TextureThumbnailDetail ゲームオブジェクトをすべて削除する


 無事にスクロールの制御の確認が済みましたので Content ゲームオブジェクト内にある
複数のプレハブの TextureThumbnailDetail ゲームオブジェクトをすべて削除してください


ヒエラルキー画像(削除後)



Scene ビュー画像(削除後)




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

 最後の手順では、いよいよ各サムネイルのゲームオブジェクトに画像をプログラムから自動的に設定して並べていく機能を実装します。

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

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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