Unityに関連する記事です

干支が消える際の演出エフェクトの追加する


 干支が消える瞬間にエフェクトを表示して、消えたことを演出する処理を追加します。
すぐに干支が消えてしまうよりも豪華な見た目になりますので、ユーザーを楽しませるためにも実装をしていきましょう。
 

完成動画
https://gyazo.com/513e969d8263ef41855d756bdcdb7fa9



 実装の手順です。
 1.無料のエフェクトアセットをインポートする
 2.EraseEffectプレファブ・ゲームオブジェクトを作成する
 3.EraseEffectゲームオブジェクトをプレファブ化する

 4.GameManagerスクリプトを修正する
 5.GameManagerゲームオブジェクトにEraseEffectプレファブ・ゲームオブジェクトをアサインする
 6.ゲームを実行して動作を確認する


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


アセットストアへ移動する


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

AssetStoreビュー

 

アセットストアで無料のエフェクト用アセットを検索する


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

検索



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

Cartoon FX Free



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



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


アセットをUnityにインポートする


 エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。

PackageManagerビュー


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

Import確認のポップアップ


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


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

JMO Assets



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


2.EraseEffectプレファブ・ゲームオブジェクトを作成する


エフェクトとして使用するゲームオブジェクトを決定し、プレファブを解除する


 インポートしたアセットにはたくさんのエフェクトがプレファブとして作成されています。(プレファブを生成すればすぐに利用が開始できる状態になっています。)

 今回は Assets / JMO Assets / Cartoon FX / CFX Prefabs / Misc / CFX_MagicPoof というプレファブ・ゲームオブジェクトを使用します。

 
使用するプレファブ・ゲームオブジェクトのパス



<プレファブをアンパックする>


CFX_MagicPoofゲームオブジェクト(プレファブ)


 まずはこのCFX_MagicPoofをヒエラルキー上のCanvas内にドラッグアンドドロップして配置します。(間違えずにCanvasのすぐ下に入れて下さい。)




 そして、このCFX_MagicPoofゲームオブジェクトの上で右クリックをしてメニューを表示し、 Prefab => Unpack Completely を選択してください。
このメニューを実行するとプレファブ状態が解除されて、CFX_MagicPoofゲームオブジェクトがプレファブではなく、通常のゲームオブジェクトに戻ります。
名前やアイコンの色が青ではなくなり、白くなります。

アンパック 動画
https://gyazo.com/759b0f5359da4bb2249b23df34ad45d8


 このようにしてプレファブをアンパックして利用することで、元であるCFX_MagicPoofゲームオブジェクトには影響がなくなります。(残り続けます)

 万が一、元の状態のゲームオブジェクトを利用したくなった場合や、パーティクルの編集に失敗してしまった場合には
CFX_MagicPoofゲームオブジェクトが残っていますので、再度これを利用して作り直すことが可能です。


EraseEffectゲームオブジェクトを編集する


 アンパックしたゲームオブジェクトの名前を EraseEffect に変更します。

 EraseEffect ゲームオブジェクトを選択してインスペクターを確認します。まずはTransformコンポーネントの Scale を変更します。
Scale ( 1 , 1, 1) の値を ( 140, 140, 140) へ変更してください。実際に生成される大きさになりますので、後で適宜に調整を行います。

Transformコンポーネント インスペクター画像




 続いて、ParticleSystemコンポーネントを変更します。


ParticleSystem インスペクター画像


 StartColorという項目がありますので、その右端の下矢印の部分を選択してメニューを表示し、Random Between Two Gradients を選択します。
カラーが2つ表示されるようになりますので、上段の色の部分をクリックしてください。Gradient Editor という色を選択できるウインドウが開きます。

 Colorの部分を選択することで色の設定が可能です。グラデーションをかけることもできます。


StartColorの設定動画
https://gyazo.com/8a08b11498c8a5d7c4285928e38ea1f7


 その後、下の段の色も同じように設定します。上段のみでも大丈夫です。



 次にRenderer という部分を修正します。ParticleSystemの一番下にある項目です。こちらをクリック開いて下さい。画像のようになります。
(クリックする際には、Rendererの左横のチェックは外さないようにしてください。誤って外してしまった場合には、再度クリックすればチェックが入ります。)


ParticleSystem インスペクター画像


 項目の中に Order in Layer というプロパティがあります。この値が 0 になっていますので、 1 に変更します。


<Canvas内にパーティクルを生成する場合の優先順位について>


 この Order in Layer の値は、ゲーム画面に表示されるゲームオブジェクトの優先順位の値です。

 今回のパズルゲームはすべてCanvas内でゲームが進行していますので、必然的にゲームオブジェクトの優先順位の基準は、
Canvasゲームオブジェクトの持つCanvasコンポーネントの Order in Layer の値が基準値となります。

 現在、Canvasの Order in Layer の値が 0 になっているため、同じ数字の場合ですとCanvasが優先されます。
そのためこのままではEraseEffectゲームオブジェクトはCanvasより優先順位が低く、ゲーム画面に見えない状態になっています。

 そこで今回は、EraseEffectゲームオブジェクトのParticleSystemのRenderer内にある Order in Layer の値を 1 にすることで、
表示の優先順位をCanvasゲームオブジェクトよりも高くすることによって、ゲーム画面にEraseEffectゲームオブジェクトが見えるようにしています。


Canvas 参考画像



 
 ここまで完成したら、SceneビューにあるPlayボタンを押してみてください。エフェクトが再生されます。StartColorで設定した色も反映されているはずです。

Playした際の動画
https://gyazo.com/31182da4b18788cc072cbea04e0363eb


3.EraseEffectゲームオブジェクトをプレファブ化する


 ヒエラルキーにある EraseEffect ゲームオブジェクトを Project内のPrefabsフォルダへドラッグアンドドロップしてプレファブにします。
ヒエラルキー上のEraseEffectの色が青く変わればプレファブになっています。その後、ヒエラルキー上のEraseEffectは削除しておきます。
 
EraseEffectゲームオブジェクトをプレファブとして作成 
https://gyazo.com/d214c33622a71a006561bafbe82072b5

 以上でエフェクト用のEraseEffectゲームオブジェクトの設定は完了です。
ParticleSystemには今回設定していないたくさんの設定項目がありますので、機会をみて自分でいろいろと試してみてください。


4.GameManagerスクリプトを修正する


 GameManagerスクリプトを修正して、エフェクトを生成するためのプレファブのアサイン情報を変数を用意して登録できるようにします。
また干支を削除する処理を行う、OnEndDragメソッド内にエフェクトを生成する処理を追加します。

 どの部分に処理を追加すればよいのか、つまり、ゲーム的にどのタイミングでエフェクトが生成されれば
問題のない状態なるのかを考えて、まずは自分で処理の追加に挑戦してください。


GameManager.cs

 <= クリックすると開きます。



<EraseEffectプレファブ・ゲームオブジェクトの生成の補足>


 エフェクト用のゲームオブジェクトは、干支の位置に生成されています。この際、position ではなく、Transform 全体を利用して生成しています。
これはつまり、干支の子オブジェクトとして、エフェクト用のゲームオブジェクトを生成していることになります。

 そのため、エフェクトの生成位置は問題ありませんが、このままですと、
干支(親)が消えたと同時にエフェクト用のゲームオブジェクト(子)も一緒に消えてしまい、
エフェクトが途中で途切れてしまって不自然なエフェクトになってしまいます。

 そこでエフェクトを生成した次の行で、エフェクトの親オブジェクトをEtoSetTranへと変更しています。
こうすることで、エフェクト自体は、干支が破壊されたとしても、パーティクルの再生が正常に終了するまでゲーム内に残ることができます。

 ゲームオブジェクト間の親子関係は便利な反面、不都合になる動作も引き起こします。
今回の場合も同様で、干支とエフェクトが親子関係のままになっていると、エフェクトを生成する際には問題ありませんが、
干支が破壊されると子オブジェクトであるエフェクトも一緒に破壊されてしまうため、これを回避する処理が必要になっており、
そのため、エフェクトを生成後には親子関係を EtoSetTran に変更しています。

 もしも想定している通りに処理が動かない場合には、こういった親子関係によるものが原因のケースもありますので覚えておいてください。

 なお、本来であれば生成したエフェクト用のゲームオブジェクトはDestroyしなければなりません。

 ですが今回利用しているEraseEffectゲームオブジェクトの元であるプレファブ・ゲームオブジェクトには
パーティクルの再生が終了したらDestroyするというスクリプトが最初からアタッチされています。
そのため今回のケースでは、エフェクトをDestroyする処理は追加していません。


5.GameManagerゲームオブジェクトにEraseEffectプレファブ・ゲームオブジェクトをアサインする


 GameManagerスクリプトの修正が終了したら、GameManagerゲームオブジェクトのインスペクターを確認します。


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



 アサイン情報としてEraseEffectプレファブ・ゲームオブジェクトをアサインできるようになっていますので
Project内のPrefabsフォルダにある EraseEffectプレファブ・ゲームオブジェクトをドラッグアンドドロップしてアサインします。


EraseEffectプレファブのアサイン動画
https://gyazo.com/b66b8d6979a86359656eea5ca04ee035

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


 以上で完成です。ゲームを実行して動作を確認します。干支をつなげて消した際に各干支の位置にEraseEffectプレファブ・ゲームオブジェクトが生成されれば成功です。


検証動画
https://gyazo.com/757e9613170b1e1283973dd5280a5f2f

 もしもエフェクトの生成されなかったり、生成はされているものの画面に見えなかったりする場合には、もう一度、手順を読み直してみて設定を確認してみてください。



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

 次は 発展5 です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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