３Ｄレールガンシューティング 手順１６
最終更新：
orika_ex_miyako 2023年06月25日(日) 15:54:59履歴
前回作成した UI 表示を、今度は自分で考えて制作していく学習を行います。
手順１６ ーUI の自作ー
＜学習内容＞
設計
前回の手順において、Canvas を利用してプレイヤーのライフ表示を行う機能を実装しました。
こちらを応用し、プレイヤーの銃の残りの弾数を同じように UI として表示してください。
プログラムは、設計がしっかりと出来あがってから書き始めます。
まずは、どのような処理が必要であるかを考え、頭の中にまとめていきます。
それを言語化、つまり、頭で考えていることを言葉にして書き出します。
今回はヒントとして、次のような部分を考えて、言語化に挑戦してください。
UI の位置やサイズをイメージしておくことが重要です。
ゲーム画面の中に配置することになりますので、プレイヤーのゲームプレイを阻害しない位置に、
適宜なサイズで配置することが求められます。
見せ方も、演出面も含めて重要な要素です。
アイコンにして、弾数を表示するのか、数字にして弾数を表示するのか、だけでも変わります。
両方を組み合わせていくことも出来ますし、背景用のフレーム画像を設置するかどうかも考えなければなりません。
いままで自分が遊んでいるゲームの UI を参考にしながら、どのような位置・サイズ・見せ方にするかをイメージし、
詳細な部分まで考えてから作業を開始するようにしてください。
ゲーム制作においては、設計が多くのウェイトを占めます。
上手く出来ていない設計では、ゲーム画面が破綻してしまいますので、しっかりと考えてみてください。
UI については、ノートなどにレイアウトを書いてみることもよいでしょう。
頭に浮かんでいるイメージをアウトプットできるか、挑戦してください。
ゲーム画面を作成し、スクリプトを記述する
設計が完了したら、Canvas ゲームオブジェクト内に UI 用の部品となるゲームオブジェクトを作成して、配置します。
設計で考えた内容に基づいて、イメージをアウトプットして形にしていきましょう。
それが完成したら、次はスクリプトにソースコードを記述します。
どのような情報を使えば、UI 部分とスクリプトで管理している残り弾数の値が同期し、
ゲーム画面上の表示の更新を行えるようになるかを考えて、書いてください。
記述済のスクリプト全体の処理も読み解けていないと、修正を加えていくことが難しいですので、
この機会に、スクリプトがしっかりと読み解けるかを確認し、処理が読み解けない部分については復習を行いましょう。
完成したらデバッグを行う
すべての機能が実装できたら、最後にデバッグを行います。
実装した機能がすべて正常に動作しているかを確認します。
そのためには、自分がスクリプトに記述した処理の内容を正確に把握し、理解しておく必要があります。
理解が出来ていなければ、どの処理が正常で、どの部分が間違っているのかを判断できないためです。
問題なく動作していれば完成です。
あとは、微調整が必要であれば、UI の位置やサイズを調整してください。
スクリプトについても、一度書いたら終わり、ではなくて、もっとよい記述の方法はあるのでは？ という観点で見直しを行い、
コメントやサマリーが書いてない場合にはそれらを追記してください。
＜応用 ライフアイコンの画像をパーティクルに変更する＞
UI に表示されているライフ用のアイコンは Image コンポーネントを利用して画像を表示しています。
この部分を、パーティクルを利用したエフェクト用のゲームオブジェクトに変更し、動きのある UI に変更していく機能を学習します。
＜アイコン画像を変更後の動画＞
動画ファイルへのリンク
この機能は従来の UI 表示を応用した機能になります。
設計
Unity においては、通常 UI には 2D 画像しか適用することが出来ません。
そのため多くのゲームの UI はスプライトを使った 2D 画像が利用されています。
こちらの部分を、パーティクルを利用したエフェクト用の 3D のゲームオブジェクトに差し替えて利用することを目的にしています。
UI にライフ用のゲームオブジェクトを生成する機能は実装済ですので、
設計としては、まずは、新しいライフ用のゲームオブジェクトを作成することを考えます。
パーティクルはそのままでは UI には表示できませんので、外部のアセットを利用し、UI に対応させます。
準備ができたら、それを、現在のライフ用のアイコン画像の代わりに、
パーティクルで出来ているエフェクト用のゲームオブジェクトを生成するように変更を行います。
全体的にどういった処理を行うのかを念頭において、順番に実装を行っていくようにしてください。
ライフ表示用のパーティクルを作成する
FireMobile_Life ゲームオブジェクトの設定を行う
Transform の Position の値をすべて 0 に設定し直します。
ParticleSystem 内の StartSize の値を調整します。
この値でパーティクルのサイズを調整します。Scale では変更しません。
UI 内に適宜なサイズになるように調整してください。
他の部分の変更はありません。
不要なコンポーネントを削除します。
ParticleSystemDestroyer コンポーネントと ParticleSystemMultiplier コンポーネントと AudioSource コンポーネントの３つを削除してください。
最後に Canvas Rendererコンポーネントを追加します。
インスペクター画像
以上で完成です。
ParticleEffectForUGUI アセットをインポートする
以下のサイト様より、ParticleEffectForUGUI アセットをダウンロードし、Unity へインポートします。
ダウンロードしたフォルダは圧縮されているため、解凍(展開)してから、フォルダをそのままドラッグアンドドロップしてインポートします。
＜mob - sakai / ParticleEffectForUGUI＞
インポート後のフォルダ画像
インポートできたことを確認してください。
この手順はこれで完了です。
FireMobile_Life ゲームオブジェクトに UIParticle スクリプトをアタッチし、プレファブにする
インポートした ParticleEffectForUGUI アセットに含まれている UIParticle スクリプトを
FireMobile_Life ゲームオブジェクトにドラッグアンドドロップしてアタッチしてください。
インスペクター画像
インスペクターの見え方は Unity のバージョンによって異なることがあります。
このスクリプトをアタッチしている場合、ゲームオブジェクトの大きさは
UIParticle コンポーネント内の Scale の部分で調整してください。初期値は 10 ですが、2 前後にして調整していくとよいです。
FireMobile_Life ゲームオブジェクトのインスペクターを確認し、アタッチされていることを確認できたら、
FireMobile_Life ゲームオブジェクトをプレファブにしてください。
プレファブにしたら、ヒエラルキーにある FireMobile_Life ゲームオブジェクトは削除してください。
以上でこの手順は完了です。
LifeTran ゲームオブジェクトの設定を変更する
LifeTran ゲームオブジェクトの設定を変更します。
ヒエラルキー画像
ヒエラルキーにある LifeTran ゲームオブジェクトを選択します。
インスペクターの一番下にある Add Component ボタンを押し、Horizontal Layout Group コンポーネントを追加してください。
追加したら、インスペクターの画像を参考にしながら、設定を行ってください。
インスペクター画像
Horizontal Layout Group コンポーネントの詳細な説明は割愛します。
自分で調べて、どのような機能があり、どのような設定を行ったかを把握しておいてください。
参考サイト
Unity 公式マニュアル
Horizontal Layout Group
UIManager ゲームオブジェクトの設定を変更する
UIManager ゲームオブジェクトの設定を変更します。
ヒエラルキーにある UIManager ゲームオブジェクトを選択し、インスペクターを確認します。
LifePrefab 変数にアサインされているゲームオブジェクトを変更します。
今回の手順で作成した FireMobile_Life ゲームオブジェクトのプレファブをアサインしてください。
インスペクター画像
何故この手順が必要なのかも、自分で考えて、処理にどのような影響があるかを理解しておいてください。
以上でこの手順は完成です。
ゲームを実行して動作を確認する
すべての実装が終了したので、ゲームを実行して、UI に表示されるライフ用のアイコンが
画像ではなく、FireMobile_Life ゲームオブジェクトに変更されていることを確認します。
＜実装動画＞
動画ファイルへのリンク
以上でこの手順は終了です。
=> 次は 手順１７ ーゲームの進行状況管理機能ー です。
手順１６ ーUI の自作ー
＜学習内容＞
・自分で考えて UI 部分の設計と実装を行う ・パーティクルを UI に表示させる方法
設計 
前回の手順において、Canvas を利用してプレイヤーのライフ表示を行う機能を実装しました。
こちらを応用し、プレイヤーの銃の残りの弾数を同じように UI として表示してください。
プログラムは、設計がしっかりと出来あがってから書き始めます。
まずは、どのような処理が必要であるかを考え、頭の中にまとめていきます。
それを言語化、つまり、頭で考えていることを言葉にして書き出します。
今回はヒントとして、次のような部分を考えて、言語化に挑戦してください。
・UI の位置・サイズ ・見せ方
UI の位置やサイズをイメージしておくことが重要です。
ゲーム画面の中に配置することになりますので、プレイヤーのゲームプレイを阻害しない位置に、
適宜なサイズで配置することが求められます。
見せ方も、演出面も含めて重要な要素です。
アイコンにして、弾数を表示するのか、数字にして弾数を表示するのか、だけでも変わります。
両方を組み合わせていくことも出来ますし、背景用のフレーム画像を設置するかどうかも考えなければなりません。
いままで自分が遊んでいるゲームの UI を参考にしながら、どのような位置・サイズ・見せ方にするかをイメージし、
詳細な部分まで考えてから作業を開始するようにしてください。
ゲーム制作においては、設計が多くのウェイトを占めます。
上手く出来ていない設計では、ゲーム画面が破綻してしまいますので、しっかりと考えてみてください。
UI については、ノートなどにレイアウトを書いてみることもよいでしょう。
頭に浮かんでいるイメージをアウトプットできるか、挑戦してください。
ゲーム画面を作成し、スクリプトを記述する
設計が完了したら、Canvas ゲームオブジェクト内に UI 用の部品となるゲームオブジェクトを作成して、配置します。
設計で考えた内容に基づいて、イメージをアウトプットして形にしていきましょう。
それが完成したら、次はスクリプトにソースコードを記述します。
どのような情報を使えば、UI 部分とスクリプトで管理している残り弾数の値が同期し、
ゲーム画面上の表示の更新を行えるようになるかを考えて、書いてください。
記述済のスクリプト全体の処理も読み解けていないと、修正を加えていくことが難しいですので、
この機会に、スクリプトがしっかりと読み解けるかを確認し、処理が読み解けない部分については復習を行いましょう。
完成したらデバッグを行う
すべての機能が実装できたら、最後にデバッグを行います。
実装した機能がすべて正常に動作しているかを確認します。
そのためには、自分がスクリプトに記述した処理の内容を正確に把握し、理解しておく必要があります。
理解が出来ていなければ、どの処理が正常で、どの部分が間違っているのかを判断できないためです。
問題なく動作していれば完成です。
あとは、微調整が必要であれば、UI の位置やサイズを調整してください。
スクリプトについても、一度書いたら終わり、ではなくて、もっとよい記述の方法はあるのでは？ という観点で見直しを行い、
コメントやサマリーが書いてない場合にはそれらを追記してください。
＜応用 ライフアイコンの画像をパーティクルに変更する＞
UI に表示されているライフ用のアイコンは Image コンポーネントを利用して画像を表示しています。
この部分を、パーティクルを利用したエフェクト用のゲームオブジェクトに変更し、動きのある UI に変更していく機能を学習します。
＜アイコン画像を変更後の動画＞
動画ファイルへのリンク
この機能は従来の UI 表示を応用した機能になります。
設計
Unity においては、通常 UI には 2D 画像しか適用することが出来ません。
そのため多くのゲームの UI はスプライトを使った 2D 画像が利用されています。
こちらの部分を、パーティクルを利用したエフェクト用の 3D のゲームオブジェクトに差し替えて利用することを目的にしています。
UI にライフ用のゲームオブジェクトを生成する機能は実装済ですので、
設計としては、まずは、新しいライフ用のゲームオブジェクトを作成することを考えます。
パーティクルはそのままでは UI には表示できませんので、外部のアセットを利用し、UI に対応させます。
準備ができたら、それを、現在のライフ用のアイコン画像の代わりに、
パーティクルで出来ているエフェクト用のゲームオブジェクトを生成するように変更を行います。
全体的にどういった処理を行うのかを念頭において、順番に実装を行っていくようにしてください。
ライフ表示用のパーティクルを作成する
パーティクルを最初から作成してもよいですし、アセットストアにあるエフェクトを利用しても構いません。
今回は、すでにインポート済の以下のアセットを利用しています。
Standard Assets (for Unity 2018.4)
Unity 内のパス
フォルダ画像
FireMobile プレファブ ゲームオブジェクト
上記の FireMobile プレファブゲームオブジェクトを Canvas 内の LifeTran ゲームオブジェクトの子オブジェクトとして配置してください。
Scene ビュー画像
配置が終了したら、プレファブ状態を解除します 。
プレファブをそのまま利用すると、そのプレファブを別の部分で利用したい場合や、万が一、制作の途中で最初から作り直したい、という場合に復元できなくなります。
そのため、プレファブを元にしてゲームオブジェクトを修正して利用したい場合には、
プレファブを解除して作業を行うか、プレファブのバリアントとして作業を行うようにします。
FireMobile ゲームオブジェクトの上で右クリックをしてメニューを開き、Prefab => Unpack Completely を選択してください。
プレファブ状態が解除されたら、ゲームオブジェクトの名称を FireMobile_Life に変更し、元のゲームオブジェクトとの違いが分かるようにします。
今回は、すでにインポート済の以下のアセットを利用しています。
Standard Assets (for Unity 2018.4)
Unity 内のパス
Assets/Standard Assets/ParticleSystems/Prefabs/FireMobile.prefab
フォルダ画像
FireMobile プレファブ ゲームオブジェクト
上記の FireMobile プレファブゲームオブジェクトを Canvas 内の LifeTran ゲームオブジェクトの子オブジェクトとして配置してください。
Scene ビュー画像
配置が終了したら、プレファブ状態を解除します 。
プレファブをそのまま利用すると、そのプレファブを別の部分で利用したい場合や、万が一、制作の途中で最初から作り直したい、という場合に復元できなくなります。
そのため、プレファブを元にしてゲームオブジェクトを修正して利用したい場合には、
プレファブを解除して作業を行うか、プレファブのバリアントとして作業を行うようにします。
FireMobile ゲームオブジェクトの上で右クリックをしてメニューを開き、Prefab => Unpack Completely を選択してください。
プレファブ状態が解除されたら、ゲームオブジェクトの名称を FireMobile_Life に変更し、元のゲームオブジェクトとの違いが分かるようにします。
FireMobile_Life ゲームオブジェクトの設定を行う
Transform の Position の値をすべて 0 に設定し直します。
ParticleSystem 内の StartSize の値を調整します。
この値でパーティクルのサイズを調整します。Scale では変更しません。
UI 内に適宜なサイズになるように調整してください。
他の部分の変更はありません。
不要なコンポーネントを削除します。
ParticleSystemDestroyer コンポーネントと ParticleSystemMultiplier コンポーネントと AudioSource コンポーネントの３つを削除してください。
最後に Canvas Rendererコンポーネントを追加します。
インスペクター画像
以上で完成です。
ParticleEffectForUGUI アセットをインポートする
以下のサイト様より、ParticleEffectForUGUI アセットをダウンロードし、Unity へインポートします。
ダウンロードしたフォルダは圧縮されているため、解凍(展開)してから、フォルダをそのままドラッグアンドドロップしてインポートします。
＜mob - sakai / ParticleEffectForUGUI＞
https://github.com/mob-sakai/ParticleEffectForUGUI
インポート後のフォルダ画像
インポートできたことを確認してください。
この手順はこれで完了です。
FireMobile_Life ゲームオブジェクトに UIParticle スクリプトをアタッチし、プレファブにする
インポートした ParticleEffectForUGUI アセットに含まれている UIParticle スクリプトを
FireMobile_Life ゲームオブジェクトにドラッグアンドドロップしてアタッチしてください。
インスペクター画像
インスペクターの見え方は Unity のバージョンによって異なることがあります。
このスクリプトをアタッチしている場合、ゲームオブジェクトの大きさは
UIParticle コンポーネント内の Scale の部分で調整してください。初期値は 10 ですが、2 前後にして調整していくとよいです。
FireMobile_Life ゲームオブジェクトのインスペクターを確認し、アタッチされていることを確認できたら、
FireMobile_Life ゲームオブジェクトをプレファブにしてください。
プレファブにしたら、ヒエラルキーにある FireMobile_Life ゲームオブジェクトは削除してください。
以上でこの手順は完了です。
LifeTran ゲームオブジェクトの設定を変更する
LifeTran ゲームオブジェクトの設定を変更します。
ヒエラルキー画像
ヒエラルキーにある LifeTran ゲームオブジェクトを選択します。
インスペクターの一番下にある Add Component ボタンを押し、Horizontal Layout Group コンポーネントを追加してください。
追加したら、インスペクターの画像を参考にしながら、設定を行ってください。
インスペクター画像
Horizontal Layout Group コンポーネントの詳細な説明は割愛します。
自分で調べて、どのような機能があり、どのような設定を行ったかを把握しておいてください。
参考サイト
Unity 公式マニュアル
Horizontal Layout Group
UIManager ゲームオブジェクトの設定を変更する
UIManager ゲームオブジェクトの設定を変更します。
ヒエラルキーにある UIManager ゲームオブジェクトを選択し、インスペクターを確認します。
LifePrefab 変数にアサインされているゲームオブジェクトを変更します。
今回の手順で作成した FireMobile_Life ゲームオブジェクトのプレファブをアサインしてください。
インスペクター画像
何故この手順が必要なのかも、自分で考えて、処理にどのような影響があるかを理解しておいてください。
以上でこの手順は完成です。
ゲームを実行して動作を確認する
すべての実装が終了したので、ゲームを実行して、UI に表示されるライフ用のアイコンが
画像ではなく、FireMobile_Life ゲームオブジェクトに変更されていることを確認します。
＜実装動画＞
動画ファイルへのリンク
以上でこの手順は終了です。
=> 次は 手順１７ ーゲームの進行状況管理機能ー です。
コメントをかく