Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。


発展17 ーバレット用のボタンの作成ー
35.Canvas内の BottomUI ゲームオブジェクトの子オブジェクトとして BulletSelestSet ゲームオブジェクトを作成する
36.BulletSelestSet ゲームオブジェクトの子オブジェクトとして、btnBulletSelect ゲームオブジェクト群を作成する。4つ並べて大きさを確認する



 新しい学習内容は、以下の通りです。

 ・Grid Layout Group コンポーネントの使用方法



35.Canvas内の BottomUI ゲームオブジェクトの子オブジェクトとして BulletSelestSet ゲームオブジェクトを作成する

1.設計


 ゲーム画面の下部の空いている部分に、ボタンを配置し、バレットの種類を変更できるような設計を考えます。

 現在 UI 部品として拠点の耐久力用のゲージがありますが、この下の部分が広く開いています。

<バレット選択用のボタンの配置場所>



 ここに横(水平)方向にバレットの選択用ボタンを4つ並べて、ボタンを押すと、タップした際に発射するバレットが変更になるように処理を設計します。
文章ですと1行で終了してしまう内容ですが、これを実装するためには非常に長い道のりを経ての実装になります。

<設計内容>
・バレット選択用のボタンを作成し、プレファブにする
・プレファブにしたバレット選択用のボタンを4つ生成し、水平方向へと整列させて並べる
・バレット選択用のボタンを押すことで、常に1つのバレットを選択している状態を作り出す(複数のバレットは同時に選択できない)
・選択しているバレットの種類に合わせて、生成されるバレットの画像を変更する
・複数のバレットのデータを扱うため、エネミーと同じようにバレットのデータ専用のスクリプタブル・オブジェクトを作成し、バレットのデータを登録する
・バレット選択用のボタンを4つ生成する際に、バレットのスクリプタブル・オブジェクトよりデータを受け取って各データに合わせて振る舞いを変更させる

 以上が約半分の手順です。さらに、バレットごとに発射可能になる制限時間の設定、バレットを変更した場合、制限時間の経過を停止させる、
バレットを選択するためには Exp を支払うという制限を設定する、などが設計内容として残ります。

 設計として1つの処理を考えていく過程において、簡単そうに見えても実装内容が複雑かつ、膨大になりますので、ロジックを組む場合にも設計全体を把握した上で検討します
あとで設計を付け足したり、修正したりすると、影響する範囲が1箇所以上なり、修正が難しくなります

 設計が重要といわれる所以はここにあります。
しっかりと細部まで検討し、ロジックを考えてから実装を行えるかどうかでは、その後の修正や運用に雲泥の差が出ます



 この手順では、次の実装を行います。

・バレット選択用のボタンを作成し、プレファブにする

 バレット選択用のボタンは4つ並べることが決定していますので、まずは手動で4つ並べて
ボタンの大きさや間隔などを確認しておきます。それを元に、自動生成する際に情報として役立てます


2.Canvas内の BottomUI ゲームオブジェクトの子オブジェクトとして BulletSelestSet ゲームオブジェクトを作成する


 バレット選択用のボタンはプレファブ化し、スクリプトから自動生成させることが目的です。
ボタンは4つ生成されますので、それらを水平方向へと整列させて並べ、管理をおこなうための、いわゆるフォルダ役のゲームオブジェクトがあった方がその後の設計を行いやすくなります
ボタンを自動生成する際には生成する位置情報も必要になりますが、フォルダ役のゲームオブジェクトがあれば、その位置を目標地点とすることが出来、生成もしやすくなります。



 Canvas 内にある BottomUI ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択してください。
新しいゲームオブジェクトが1つ作成されますので、名前を BulletSelectSet に変更します。

ヒエラルキー画像




 インスペクターより RectTransform コンポーネントを確認し、位置情報を変更します。
Position Y だけ少し上方向へ移動し、130 前後の値に変更してください。

 この位置がバレット選択用のボタンが並ぶ位置になります。
まだボタンがありませんので、ボタンを仮配置してから再度修正を行いますので、現在は大体の位置で問題ありません。

 作業を行うにあたり、GameClearSet ゲームオブジェクトや GameOverSet ゲームオブジェクトが見えていると作業しにくくなりますので
必要に応じて、これらのゲームオブジェクトを一時的に非表示にするなど、作業環境を整えてから作業をおこなってください
これはこの作業に限らず、自分で判断し、作業環境を整えることを意識してください


インスペクター画像



Sceneビュー画像(非表示にしていない場合)



Sceneビュー画像(非表示にしている場合)



 以上でこのゲームオブジェクトの設定は完了です。


36.BulletSelestSet ゲームオブジェクトの子オブジェクトとして、btnBulletSelect ゲームオブジェクト群を作成する。4つ並べて大きさを確認する

1.設計


 バレット選択用のボタンを作成します。これは複数のゲームオブジェクトによって構成されています。


<完成時のヒエラルキー画像>



Sceneビュー画像



 バレットにはいくつかの情報があり、それらの中でも表示が必要な情報については、ゲームオブジェクトを用意しています。

<バレット選択ボタンの構成図>
 ・背景画像    => バレットの持つ属性情報としても判別させるように利用する
 ・バレットの画像 => 発射できるバレットがどのような種類のバレットであるかを判別させる
 ・Exp 表示    => バレットを選択するために必要な Exp の値を数字で、 Exp ロゴも利用して表示する
 ・制限時間表示  => バレットには発射できる制限時間を設ける。時間表示は数字ではなく丸いゲージ上になっていて、扇状に時計のように減少する。制限時間はバレットによって差異を用意する

 1つずつ順番に作成していきましょう。


2.BulletSelestSet ゲームオブジェクトの子オブジェクトとして、btnBulletSelect ゲームオブジェクトを作成する


 BulletSelestSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択します。
BulletSelestSet ゲームオブジェクトの子オブジェクトとして、Button コンポーネントと Image コンポーネントがアタッチされているゲームオブジェクトが作成されます。
名前を btnBulletSelect に変更してください。


ヒエラルキー画像



 btnBulletSelect ゲームオブジェクトはバレット選択用のボタンと背景画像を表示する機能を持ちます。
続けて設定を行います。3つの手順がありますので、順番に設定をしてください。



 RectTransform コンポーネントの Width と Height を変更し、ゲームオブジェクトのサイズを変更します。
両方とも 250 に設定してください。Sceneビューと Game ビューを見ながらどの位になるかを確認してください。

 次に、CanvasRenderer コンポーネントの Cull Transparent Mesh のスイッチにチェックを入れてオンの状態にします。

 最後に Image コンポーネントの Source Image プロパティ欄を選択し、右側のボタンを押して Select Sprite というポップアップを開きます。
Knob という画像がありますので、こちらを登録してください。


インスペクター画像



 Button コンポーネントの変更はありませんので、そのままで問題ありません。


インスペクター画像



Sceneビュー画像



 以上で設定は完了です。


3.btnBulletSelect ゲームオブジェクトの子オブジェクトとして、imgBulletBtn ゲームオブジェクトを作成する


 btnBulletSelect ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
btnBulletSelect ゲームオブジェクトの子オブジェクトとして、Image コンポーネントがアタッチされているゲームオブジェクトが作成されます。
名前を imgBulletBtn に変更してください。


ヒエラルキー画像



 imgBulletBtn ゲームオブジェクトはバレットの画像を表示する機能を持たせます。
続けて設定を行います。3つの手順がありますので、順番に設定をしてください。



 RectTransform コンポーネントの Width と Height を変更し、ゲームオブジェクトのサイズを変更します。
両方とも 200 に設定してください。Sceneビューと Game ビューを見ながらどの位になるかを確認してください。
その後、Position Y を変更します。 -55 前後にして少し下方向にさげてください。こうすることで、背景に表示される画像が見やすくなります。

 次に、CanvasRenderer コンポーネントの Cull Transparent Mesh のスイッチにチェックを入れてオンの状態にします。

 最後に Image コンポーネントの Source Image プロパティ欄を選択し、右側のボタンを押して Select Sprite というポップアップを開きます。
Weapon という画像がありますので、こちらを設定してください。この画像は仮の設定です。


Weapon 画像のパス
Assets/Little Cat Girl/Little_Cat_Girl_parts.png


 画像を設定したら Raycast Target のスイッチにチェックを外してオフの状態にしてください。


インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。


4.btnBulletSelect ゲームオブジェクトの子オブジェクトとして、imgLaunchTimeGauge ゲームオブジェクトを作成する


 btnBulletSelect ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
btnBulletSelect ゲームオブジェクトの子オブジェクトとして、Image コンポーネントがアタッチされているゲームオブジェクトが作成されます。
名前を imgLaunchTimeGauge に変更してください。


ヒエラルキー画像



 imgLaunchTimeGauge ゲームオブジェクトはバレットの発射できる残り時間をゲージ形式にして表示する機能を持たせます。
続けて設定を行います。3つの手順がありますので、順番に設定をしてください。



 RectTransform コンポーネントの Width と Height を変更し、ゲームオブジェクトのサイズを変更します。
両方とも 250 に設定してください。Sceneビューと Game ビューを見ながらどの位になるかを確認してください。

 次に、CanvasRenderer コンポーネントの Cull Transparent Mesh のスイッチにチェックを入れてオンの状態にします。

 3つ目に Image コンポーネントの設定を複数行います。ゆっくりと1つずつ、丁寧に設定してください。

  Source Image プロパティ欄を選択し、右側のボタンを押して Select Sprite というポップアップを開きます。
Knob という画像がありますので、こちらを設定してください。この画像は仮の設定です。

 Color プロパティを選択し、色と透明度を変更します。何色でも構いません。ここでは (0, 25, 255, 170) と設定しています。

 画像と色を設定したら Raycast Target のスイッチにチェックを外してオフの状態にしてください。

 最後に、ImageType を Filled に変更します。この設定にすると画像を一部表示したり、形状を可変化することが可能になります。
FillMethod を Radial 360Fill Origin を Top に変更してください。この設定にすると、画像を扇型に分割して、時計のように動かすことが出来ます。
すぐ下にある Fill Amount の値が 1 になっていますので、この値を 0 〜 1 の間で動かして、どのような動きになるのかを確認してください
確認後は 1 に設定しておいてください。


インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。


5.btnBulletSelect ゲームオブジェクトの子オブジェクトとして、txtOpenExpValue ゲームオブジェクトを作成する


 btnBulletSelect ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
btnBulletSelect ゲームオブジェクトの子オブジェクトとして、Text コンポーネントがアタッチされているゲームオブジェクトが作成されます。
名前を txtOpenExpValue に変更してください。


ヒエラルキー画像



 txtOpenExpValue ゲームオブジェクトはバレットの利用可能な状態にするために必要な Exp の値を数字表示する機能を持たせます。
続けて設定を行います。3つの手順がありますので、順番に設定をしてください。



 RectTransform コンポーネントの Width と Height を変更し、ゲームオブジェクトのサイズを変更します。
Width 250、Height 150 に設定してください。Sceneビューと Game ビューを見ながらどの位になるかを確認してください。
その後、Position X と Y を変更します。X を -55 前後、Y を 100 前後にして、ボタン全体で見て上部に位置するようにしてください

 次に、CanvasRenderer コンポーネントの Cull Transparent Mesh のスイッチにチェックを入れてオンの状態にします。

 3つ目に Text コンポーネントの設定を複数行います。ゆっくりと1つずつ、丁寧に設定してください。

  Text プロパティ欄を選択し、半角数字で 000 と仮入力してください。フォント調整、サイズや位置合わせに利用します。
フォントは自由に設定してください。サイズは 80 前後が見やすいと思いますが、フォントにより変わりますので、画面をみた上で設定します。

 Color プロパティを選択し、色を白色に変更します。透明度は変更していません。
白色を目立たせるためには Outline コンポーネントなどの文字装飾を行うといいでしょう。これは任意です。

 文字の位置は右詰め中央寄せです。数字が右端にくるようにしてください。

 すべて設定したら Raycast Target のスイッチにチェックを外してオフの状態にしてください。


インスペクター画像



インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。


6.txtOpenExpValue ゲームオブジェクトの子オブジェクトとして、imgExp ゲームオブジェクトを作成する


 txtOpenExpValue ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
txtOpenExpValue ゲームオブジェクトの子オブジェクトとして、Image コンポーネントがアタッチされているゲームオブジェクトが作成されます。
名前を imgExp に変更してください。


ヒエラルキー画像



 imgExp ゲームオブジェクトはExp のロゴ画像を表示する機能を持たせます。
続けて設定を行います。2つの手順がありますので、順番に設定をしてください。



 RectTransform コンポーネントの Width と Height を変更し、ゲームオブジェクトのサイズを変更します。
Width 60、Height 40 に設定してください。Sceneビューと Game ビューを見ながらどの位になるかを確認してください。
その後、Position X と Y を変更します。X を 155 前後、Y を -25 前後にして、txtOpenExpValue ゲームオブジェクトで表示している数字の右側に位置するようにしてください

 最後に Image コンポーネントの Source Image プロパティ欄を選択し、右側のボタンを押して Select Sprite というポップアップを開きます。
TopUI の imgExp ゲームオブジェクトに利用している Exp という、自分で作成したロゴ画像がありますので、こちらを設定してください。

 画像を設定したら Raycast Target のスイッチにチェックを外してオフの状態にしてください。


インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。


7.btnBulletSelectゲームオブジェクトの設定を行い、プレファブにする


 まだしばらく利用しないゲームオブジェクトについては、一時非表示にします。

 ・imgLaunchTimeGauge
 ・txtOpenExpValue(Text プロパティの文字も空白にする)
 ・imgExp

 これら3つのゲームオブジェクトについてはインスペクターの名前の横にある Active スイッチをオフにして非表示の状態にしてください。


ヒエラルキー画像



 非表示に設定したら、btnBulletSelect ゲームオブジェクトをプレファブにします
Prefabs フォルダへドラッグアンドドロップしてプレファブにしてください。次の手順が終了してから削除します


7.BulletSelestSet ゲームオブジェクトの設定を行う


 BulletSelectSet ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して
Grid Layout Group コンポーネントを追加してください

 このコンポーネントを利用すると、子オブジェクトのサイズや位置を均一化し、指定した方向に並べることが出来ます。
また、並べ始める位置や、子オブジェクトが複数ある場合にどの位の間隔を空けて配置するといった設定も行えます。

 下記の画像を参考に、設定を行ってください。


インスペクター画像



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


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


1.CellSize

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

 今回は x = 250, y = 250 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。


2.Spacing

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

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


3.Start Corner

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


4.Start Axis

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


5.Child Alignment

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


6.Constraint と ConstraintCount

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

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

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


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

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

Unity公式マニュアル
Grid Layout Group
https://docs.unity3d.com/ja/2019.4/Manual/script-G...
Unityで魔物使い ゲームを作る様
Grid Layout Group
https://unity-shoshinsha.biz/archives/tag/grid-lay...


9.プレファブにした btnBulletSelect ゲームオブジェクトを4つ並べてサイズなどを確認し、自動生成のための完成図のイメージを作る


 BulletSelestSet ゲームオブジェクトの子オブジェクトである、先ほどプレファブにした btnBulletSelect ゲームオブジェクトを選択して右クリックをしてメニューを開き、
Duplicate を選択してください。btnBulletSelect ゲームオブジェクトが複製されます。このとき、Grid Layout Group コンポーネントの機能が働き、
一定の間隔かつ、中央位置を基準に2つのゲームオブジェクトが自動的に整列されます。

 この手順をあと2回繰り返して、btnBulletSelect ゲームオブジェクトを4つ並べて、サイズ感や、位置に問題がないかを確認します。


ヒエラルキー画像



Sceneビュー画像



Gameビュー画像



 次の手順では、この4つ並べる処理をスクリプトから自動生成するようにしますので、このイメージをよく覚えておいてください。
また、自動生成などを行う前にはこのように、事前にどのような風にしたいのかを自分で確認しておくことで、処理のロジックや、完成図がはっきりとします
今後もこういった手法を是非活用してください。


 
 どのように並ぶのか確認し、問題がないことがわかったら、ヒエラルキーより、プレファブの btnBulletSelect ゲームオブジェクト4つを削除してください。
 
 以上でこの手順は終了です。

 次は 発展18 ーバレット用のボタンの自動生成ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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