Unityに関連する記事です

 この手順からは、画面の演出・エフェクト関連の実装を行っていきます。
音楽と同じように、画面内に発生する演出はゲームの見た目を華やかにする上で必要な実装になります。

 最初に、エネミーにプレイヤーのバレットがぶつかったときに、バレットのぶつかった位置にヒット演出用のエフェクトを生成する処理を追加します。


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


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

手順21 −バレットによるヒット・エフェクトの実装−
43.アセットを利用してバレットに接触した時用のヒット・エフェクトを作成する
44.EnemyController スクリプトを修正して、バレットとエネミーが接触した際に、バレットのぶつかった位置にヒット・エフェクトを生成する処理を追加する



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

 ・問題点の切り分けを行う方法
 ・Transform.SetParent メソッド



43.アセットを利用してバレットに接触した時用のヒット・エフェクトを作成する

1.設計


 2Dゲーム用のエフェクトのパックが無料アセットとしてありますので、こちらを利用して今後のエフェクトを作成していきます。
まずはアセットをインポートし、完成形のエフェクトを一部修正して本ゲーム用にアレンジして、バレット命中時のエフェクト用のゲームオブジェクトにします。


2.エフェクト用の無料アセットをインポートする


 Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。(2020.1バージョンからこのような形式に変更になりました)

AssetStoreビュー

 


 アセットストアのサイト上部にある検索窓に free effect と入力して検索を行います。

検索



 Cartoon FX Free という無料のエフェクト用アセットが見つかりますので、こちらをクリックします。

Cartoon FX Free



 クリックするとアセットの詳細が画面に表示されますので、 Open in Unity という、青いボタンを押します。



 
 自動的にUnityのエディター画面に遷移します。これでアセットストアのサイトは閉じてしまって大丈夫です。



 エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。


PackageManagerビュー



 Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。


PackageManagerビュー


 
 インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。

Import確認のポップアップ



 待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。


 Project内を確認しましょう。JMO Assets という新しいフォルダが追加されていれば無事にインポートされています。
フォルダを順番に開いていくとたくさんのフォルダとファイルが追加されています。(画像の青い部分が今回インポートされたアセットです)


JMO Assets



 以上でアセットのインポート作業は終了です。


3.エフェクトを作成する


 インポートしたアセットには、プレファブとして完成しているエフェクト用のゲームオブジェクトが複数含まれています。
自由なものを利用してください。今回は、下記のパスのゲームオブジェクトを利用しています。

パス
Assets/JMO Assets/Cartoon FX/CFX Prefabs/Hits/CFX_Hit_C White.prefab

フォルダ



インスペクター画像


 
 エフェクト用のゲームオブジェクトを選択したら、ヒエラルキーの Canvas ゲームオブジェクトの上までドラッグしてドロップして、Canvas の子オブジェクトとして作成してください。


ヒエラルキー画像



 続いて設定を行います。


4.エフェクトを設定する


 まずは最初に、プレファブ状態を解除して、通常のゲームオブジェクトに戻します。
ヒエラルキーにあるエフェクト用のゲームオブジェクトの上で右クリックをしてメニューを開き、Prefab => Unpack Completely を選択してください。
プレファブ状態が解除されます。アイコンと文字の色が青ではなくなっていれば成功です。


ヒエラルキー画像





 続いて、ParticleSystem コンポーネントの設定として、2つ変更を行います。
このコンポーネントには非常に多くの設定項目があります。すべてを一度に理解する必要はありませんので
少しずつ各項目を自由に変更して、どのような変化をするか、体験して覚えていってください。


ParticleSysytem コンポーネント 初期インスペクター画像



ParticleSysytem コンポーネント 初期インスペクター画像



 上から順番に設定していきます。

 メインの設定内のScaling ModeHierarchy から Local に変更します。これで、Canvas 内でも正常なサイズでパーティクルが再生されるようになります。

 Renderer 欄Order in Layer を 0 から 1 に変更します。これで描画表示の優先順位が高くなり、背景用の画像よりも手前にパーティクルが表示されるようになります。


設定後



設定後



 Play On Awake という部分にチェックが入っていると、このゲームオブジェクトはゲーム実行と同時にすぐにパーティクルの再生を行います
もしもゲームの途中でクローンとして生成された場合には、生成された時点でパーティクルの再生を行います
今回はこの機能を利用して、生成されたゲームオブジェクトがすぐにパーティクルを再生するようにしています。



 続いて、Transform コンポーネントの設定を行います。
Scene ビューの Particle Effect View(エフェクト用のゲームオブジェクトを選択するとSceneビューの右下に表示される) の Play を押して、何回か再生して大きさなどを確認します。
そのままでは少しサイズが大きいかと思いますので、Game ビューも一緒に確認しながら適宜なサイズに調整してください。


インスペクター画像



<検証動画>
動画ファイルへのリンク


 以上で完成です。


4.エフェクト用のゲームオブジェクトをプレファブ化し、名前を BulletEffect に変更する


 完成したエフェクト用のゲームオブジェクトをプレファブ化し、スクリプトからクローンを生成出来るようにします。

 ヒエラルキーにあるエフェクト用のゲームオブジェクトを Prefabs フォルダへドラッグアンドドロップしてプレファブにしてください。
無事にプレファブになったら、ヒエラルキーにあるエフェクト用のゲームオブジェクトは削除してください。

 Prefabs フォルダにあるエフェクト用のゲームオブジェクトを選択し、インスペクターの一番上にある Open Prefab を選択して、プレファブの編集モードにしてください。
エフェクト用のゲームオブジェクトの名前を BulletEffect に変更してください。確認のウインドウが開いた場合には Rename File を選択してください。

 また、Position の値をすべて 0 に設定してください。このとき不用意に Reset をすると Scale の値も変わってしまうため、Position の値のみを操作してください。


BulletEffect ゲームオブジェクト インスペクター画像



編集モード時のSceneビュー



 以上でエフェクト用のゲームオブジェクトは完成です。


44.EnemyController スクリプトを修正して、バレットとエネミーが接触した際に、バレットのぶつかった位置にヒット・エフェクトを生成する処理を追加する

1.設計


 エフェクト用のゲームオブジェクトは作成してプレファブにできました。
次は、バレットがエネミーにぶつかったタイミングに合わせて、このプレファブのクローンを生成する処理を実装します。

 「バレットがエネミーにぶつかった時」がタイミングとして考えられる部分ですので、
EnemyController スクリプトの OnTriggerEnter メソッド内がこの条件の部分にあたります。
よって、この中にエフェクトを生成する処理を記述すればよいことが分かります。


2.EnemyController スクリプトを修正する


 いままでクローンを生成する際に必要になっていた情報を振り返りながら、タイミングよくエフェクトを生成する処理を記述してみてください。
また生成されたクローンのエフェクトは自動的には消えません。ゲーム画面から見えないかもしれませんが、ヒエラルキーには残り続けてしまいますので、
必ず破壊する処理も一緒に考えてください。


EnemyController.cs


 スクリプトを修正したらセーブします。
EnemySet ゲームオブジェクトのインスペクターを確認し、EnemyController スクリプトの情報を確認します。
新しく SerializeField 属性つきで宣言した変数の表示が追加されていれば問題ありません。


EnemySet ゲームオブジェクト インスペクター画像




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


 Prefabs フォルダ内の EnemySet ゲームオブジェクトのインスペクターより、bulletEffectPrefab 変数に情報をアサインして登録します。
同じ Prefabs フォルダにある BulletEffect ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


EnemySet ゲームオブジェクト インスペクター画像



 以上で設定は完了です。


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


 実装が終了したら、セーブしてゲームを実行して、エネミーにバレットをぶつけてみてください。


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


 エネミーにバレットをぶつけてもエフェクトが生成されないですね。
必ずどこかに不具合の原因となる問題の箇所があるはずです。

 次の手順では、この原因の究明と修正の部分の学習を行います。


5.問題点の切り分けをし、原因を把握して処理を修正する


 ヒット演出用のエフェクトが生成されない理由がどこにあるのか、順番に確認をしていきます
確認の手順を1つずつ行っていくことによって、ここは問題なし、ここが怪しい、というように問題点の切り分けを行っていくことが出来ます。



 まずは、EnemyController スクリプトの GenerateBulletEffect メソッドの最後の行に Debug.Log()メソッドを入れて、この処理自体が実行されているかどうかを確認しましょう。
例えば Debug.Log("エフェクト生成") という処理を追加しておくことで、このメソッドが処理された際に、このログが Console ビューに表示されます。
表示されるのであれば、この生成処理自体は動いていることが分かります。もしも表示されないのであれば、そもそもこの処理が実行されていないことが分かります。

 これが切り分けです。どこがよいのか、少しずつ疑問点を解消していくことによって、問題の原因の特定をしていきます。



 Console ビューに Debug.Log メソッドの内容が表示されたのであれば、エフェクト自体は生成されていることになります。
そうなれば、次は、Console ビューに生成のログが表示されたタイミングでゲームを一時停止し、ヒエラルキーを確認してみましょう。

 エフェクトは自然消滅するように Destroy メソッドによって破棄命令が実行されていますが、今回の場合、エフェクトが再生されてから破棄したいため、
Destroyの処理が実際に実行されるまでには 3 秒の待機時間が設定されています。  
 
 つまり、生成されてから 3 秒の間は、ヒエラルキーのいずれかの場所に、エフェクト用のゲームオブジェクトがあるはずです。
これを確認してみましょう。

 ちゃんとヒエラルキーに存在しているのであれば、位置の問題や、描画の優先順位などの問題によって、生成されてはいるものの映っていない状態であることが分かります。
ですが、もしもヒエラルキーに存在していないのであれば、それは別の問題として切り分けることが出来ます。



 すべての手順は実際に試して、問題の切り分け方法を体験して覚えてください。読んでいるだけでは覚えることはできません
実際に自分で壁にぶつかって乗り越えるという体験が重要です。
今後自分ひとりでエラーを解消する場合、この問題の切り分け手法を覚えているか、いないか、エラーの壁を乗り越えたことがあるか、ないかによって、学習スキルに大きな影響が出てきます。



 順番に問題点を見ていくと、今回の場合、ヒエラルキーにもエフェクトのゲームオブジェクトが存在していないことが分かります。
原因は、こちらの生成処理の部分にあります。


EnemyController.GenerateBulletEffect メソッド
  // ヒット演出用のエフェクトを、バレットのぶつかった位置で生成
  GameObject effect = Instantiate(bulletEffectPrefab, bulletTran, false);

 第2引数にて、Transform 型で生成位置と回転情報を指定して生成を行っています。
この指定方法によるインスタンシエイト処理の場合、生成する位置と回転情報に加えて、
Transform コンポーネントの情報を持つゲームオブジェクトの子オブジェクトとして生成を行う、という処理になっています。

 この Instantiate メソッドの引数については手順7にて解説していますので、復習しておいてください。

 今回利用している Transform コンポーネントの情報はメソッドの引数に届いている bulletTran です。
これは、エネミーにぶつかってきたバレットのゲームオブジェクトの Transform の情報になります。
つまり、ヒット演出用のエフェクトは、バレットのぶつかった位置と回転情報で生成されて、さらに
バレットのゲームオブジェクトの子オブジェクトとして生成されていることになります。

 バレットは、エネミーにぶつかった後、どのようになっているでしょうか。

 そうです。バレットはエネミーにぶつかった後に破棄される処理が実行されていますので、
生成されたエフェクトのゲームオブジェクトはバレットの子オブジェクトですので、バレットと一緒に破壊されてしまっていたことになります。

 そのため、生成される処理は実行されているものの、バレットが消えると同時にエフェクトも破壊されてしまっていたので、
ヒエラルキー上にエフェクトのゲームオブジェクトが存在しなくなってしまっていました。



 改善する方法はいくつかありますが、最善策は、親子関係を解消することです。
エフェクトを生成する位置と回転情報については問題ありませんので、生成後に、バレットとエフェクトの親子関係を解消することで
バレットが破壊されてもエフェクトは別の1つのオブジェクトになりますので存在出来るようになります。

 ただし気を付けないといけない点があります。
親子関係を解消して1つのゲームオブジェクトになるということは、ヒエラルキー上に存在するようにもなりますが、
それは Canvas ゲームオブジェクト内ではなく、通常のワールド空間に配置されることになります。

 今回のゲームは Canvas 内でゲームを実装していますので、ただ親子関係を解消しただけでは、エフェクトはヒエラルキー上にあるものの
今度は Canvas 内には存在していないので、ゲーム画面に映らないという別の不具合が発生するようになります。


6.EnemyController スクリプトを修正して、エフェクト用のゲームオブジェクトと EnemySet とを親子関係にする処理を追加する


 問題点を解消しようとした場合、それによってどのような影響が発生するか、先の部分まで考えて修正を行っていく必要があります。
エフェクトについては、Canvas 内に存在しつつ、バレットとは親子関係を解消する必要がありますので、この両方を満たす改善方法を考えます。

 1つの方法としては、EnemySet ゲームオブジェクトの子オブジェクトとして親子関係を構築することです。
EnemySet ゲームオブジェクトは Canvas 内にあるゲームオブジェクトですので、親子関係を構築しても問題のないゲームオブジェクトです。
また、Hp が 0 以下になるまでは破壊されることもありません。

 ゲームオブジェクトの親子関係は、親子の情報を管理している transform コンポーネントの管理している SetParent メソッドを実行することで構築できます。
エフェクトの生成処理のあとに、EnemySet ゲームオブジェクトとエフェクトのゲームオブジェクトを親子関係に設定してみましょう。
構築する内容は、親が EnemySet、子が エフェクトのゲームオブジェクトになります。


EnemyController.cs


 スクリプトを修正したらセーブします。


7.<Transform.SetParent メソッド>


 Transform コンポーネントは、オブジェクトの親子関係の情報を管理しています。
SetParent メソッドを実行することにより、実行した Transform を持つゲームオブジェクトを
引数に指定した Transform を持つゲームオブジェクトの子オブジェクトにすることが出来ます。

 // エフェクトをエネミーの子オブジェクトにする
  effect.transform.SetParent(transform);

 上記の命令の場合、effect 変数に代入されている情報(エフェクト用のゲームオブジェクトの Transform クラスの扱うことができる SetParent メソッドを実行し、
transform(EnemyController スクリプトがアタッチされているゲームオブジェクト(EnemySet ゲームオブジェクト))の子オブジェクトにしています。


<親子関係になった際のヒエラルキー画像>



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


 スクリプトの修正が完成しましたので、ゲームを実行して改善されているかを確認します。
エネミーにバレットをぶつけてみてください。エフェクトが出現するようになっていれば、親子関係の制御が無事に処理されていることになります。
エフェクトが画面に表示されている間に EnemySet ゲームオブジェクトをヒエラルキーで確認しておきましょう。
子オブジェクトとして BulletEffect(Clone) が存在していれば成功です。


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


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

 次は 手順22 −エネミーによるヒット・エフェクトの実装  です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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