Unityに関連する記事です

 ゲームをクリアした際の演出を2回に分けて実装を行います。
この手順ではゲームクリアの表示の際に、花火のエフェクトを生成する演出を追加します。

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


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

発展29 −ゲームクリア演出の追加 
57.アセットを加工し、花火のエフェクトを作成してプレファブにする
58.GameManager スクリプトを修正し、ゲームクリアの状態になった際に、花火のエフェクトをランダムな位置に、ランダムな数だけ生成する処理を追加する



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

 ・Color32
 ・ParticleSystem.MinMaxGradient 構造体



57.アセットを加工し、花火のエフェクトを作成してプレファブにする

1.設計


 インポートされているアセットに含まれている花火のエフェクトを活用し、
ゲームクリアの表示を行う際にタイミングよく花火のエフェクトを生成する処理を設計し、実装します。
 
 基本的にパーティクルはワールド座標上、つまり、通常のゲーム製作を行う座標で表示されるように設計されています。
今回製作しているゲームでは Canvas 内でゲームが実行されていますので、そのままですと表示することが出来ません

 表示するためにはいくつかの工夫が必要です。

 その1つは、キャラのモデルを表示したように、パーティクル専用のカメラを用意して、ワールド座標にてパーティクルを再生し、
それをゲーム画面のカメラと一緒に映るようにすることで合成して一緒の画面に映るようにする手法です。
こちらについては、キャラのモデルの際と同じ手順で実装できますので、今回は別の方法を学習します。
 


 Canvas 内にゲームオブジェクトとして表示して管理を行うためには、Transform コンポーネントではなく、
RectTransform コンポーネントの情報が必要になります。この情報によって、Canvas 内での座標情報を管理することが出来ます。
その場合、サイズと描画方法が変わりますので、Scale の設定と ParticleSystem の Scaling Mode の設定をし直す必要があります。

 またエフェクトを再生している ParticleSysytem には表示の優先順位を設定できる項目がありますので、
これらの情報を変更することによって、パーティクルを Canvas 上で生成し、再生した際にゲーム画面に映るように設定を行います。

 それでは花火のエフェクト用のゲームオブジェクトを本ゲームに合った状態になるように作成し直します。 


2.花火のエフェクトを作成する


 インポートしてあるアセットの中に花火のゲームオブジェクトがプレファブの状態で存在しています。
こちらをアンパックして、再度作成なおします。


ファイルのパス
Assets/JMO Assets/Cartoon FX/CFX Prefabs/Explosions/CFX_Firework_Trails_Gravity.prefab


フォルダ画像



 対象のゲームオブジェクトをヒエラルキーにある Canvas ゲームオブジェクト内にドラッグアンドドロップしてください。
その後、右クリックをしてメニューを表示し、Prefab => Unpack Completely を選択して、プレファブの状態を解除してください。


ヒエラルキー画像



 つづいて設定を行います。


3.花火のエフェクトの設定を行い、プレファブにする


 名前を Firework_Trails_Gravity 、あるいは花火であることがわかる名前に変更してください。

 このゲームオブジェクトは元々 Transform コンポーネントがアタッチされていますので、Canvas 内で動作するように RectTransform コンポーネントに変更します。
インスペクターの一番下にある Add Component ボタンを押して RectTransform コンポーネントを検索して選択してください。
Transform コンポーネントが RectTransform コンポーネントに切り替わります。これはどちらかしかアタッチできない情報であるためです。



 インスペクターの ParticleSystem の中にある Renderer モジュールをクリックして開き、
Order in Layer の値を 0 => 1 に変更してください。これでパーティクルが Canvas 内の他のゲームオブジェクトをよりも前面に表示されるようになります。


インスペクター画像




 Sceneビュー内に Particle Effect ビューが表示されていますので、Play を押してください。
エフェクトが非常に小さいことが分かりますので、ParticleSystem 内のメイン部分にある Scaling Move を Local に変更してください。
その上で、Scale を調整して対応します。

 このとき、ParticleSystem のメイン部分にある Looping にチェックをいれておくと連続で再生を繰り返しますので、
サイズを調整しながらデバッグする際に便利です。設定した場合には最後にチェックを外しておいてください。

 RectTransform コンポーネントの Scale の値を (0.5, 0.5, 0.5) 前後に変更してください。
実際に画面上で再度 Play してみて、この値は任意の値に調整してください。


インスペクター画像



検証動画 Sceneビュー Particle Effect Scale 0.5 の場合
動画ファイルへのリンク




 以上で設定は完了です。
色については後程スクリプトより変更を行いますのでそのままで問題ありません。

 Prefabs フォルダへドラッグアンドドロップしてプレファブにしてください
その後、ヒエラルキーにあるこのゲームオブジェクトは削除してください。


58.GameManager スクリプトを修正し、ゲームクリアの状態になった際に、花火のエフェクトをランダムな位置に、ランダムな数だけ生成する処理を追加する

1.設計


 花火のエフェクト用のゲームオブジェクトはプレファブとして作成できましたので、
この手順では、ゲームクリアの状態になった際に、花火のエフェクトを生成する処理を設計して実装します。

 どのタイミングで生成の処理を行えばよいか、目標となる処理を見つける部分から考えてみてください
現在のスクリプトにおいてゲームクリアの状態を管理していて、なおかつ、ゲームクリアの表示を実行しているスクリプトがあります。

 まずはそのスクリプトにおいて、花火のエフェクトを1つ生成する部分から実装を行いましょう。
生成する位置については、Canvas ゲームオブジェクトの子オブジェクトとして生成すれば、画面の真ん中に生成されます
プレファブの情報を変数に登録するのと同じように、生成する位置の情報も変数として宣言して事前にインスペクターより登録しておくとよいでしょう。

 なお親子関係も利用しないと、Canvas ゲームオブジェクトの子オブジェクトとして生成できませんので、いままでの生成処理を見直してみてください。
必然的に利用する変数の型も見えてくるはずです。

 デバッグを行う際には、Start メソッド内に目的のメソッドの呼び出しを書くようにすれば、
ゲームクリアの状態にならなくても、すぐにそのメソッドが実行されますので、花火のエフェクトが生成されるかどうか確認することが出来ます。
デバッグは繰り返して行う作業になりますので、こういった時短テクニックも重要です。



 無事に花火のエフェクトの生成処理の実装ができたら、次は、その花火のエフェクトに対して制御する処理を追加していきます。

<実装目標>
 ・花火のエフェクトのパーティクル再生後に、花火のゲームオブジェクトを破壊する
 ・花火のゲームオブジェクトを1秒おきに、3個生成する。生成→1秒待機→生成の処理のサイクル化を考える
 ・生成する数の指定を3個ではなく、ランダムな値に毎回変更する
 ・花火の位置をランダムな位置に毎回変更して、花火が重ならないようにする
 ・花火の色をランダムな色に毎回変更して、同じ花火のゲームオブジェクトを異なる花火のゲームオブジェクトのように振る舞わせる

 1つずつ順番に処理のロジックを考えて実装に挑戦してみてください



 最後の色の変更には、パーティクルの情報の取得と、色を変更するための専用の処理が必要になりますが、考え方は色の変更と同じです。

 パーティクルの情報のうち、Duration や StartColor などの部分を扱いたい場合には、ParticleSystem.MainModule 型で変数の宣言を行い、
花火のゲームオブジェクトに対して、GetComponent<ParticleSystem>().main を実行して取得してください。
変数を通じて、StartColor プロパティを指定することが可能になります。

 色の変更については、ParticleSystem.MinMaxGradient 構造体を利用してください。
この情報を利用することで、StartColor の色を変更することが出来ます。

 この ParticleSystem.MinMaxGradient 構造体にはコンストラクタ・メソッドが用意されています。
何気なく利用している Vector3 構造体を思い出してみてください。変数の宣言時に右辺で初期化を行ったことがあると思います。

<コンストラクタ・メソッド>
  Vector3 pos = new Vector3(0, 0, 0);

 このとき、右辺で宣言している引数の部分コンストラクタ・メソッドになります。
一度自分で調べてみて、どのような機能を持つものなのかを確認しておいてください。


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


 設計に基づいて、花火のエフェクトを生成し、その挙動に制御を加えていきましょう。
こちらの内容には、実装目標の内容がすべて含まれていますので、自分で出来る範囲まで実装してから見てみてください。

 処理自体も戻り値を利用したり、コンストラクタ・メソッドを利用したりと、複雑な内容になっています。


GameManager.cs

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


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



 GameManager ゲームオブジェクトのインスペクターを確認して、SerializeField 属性で宣言した変数が追加されていることを確認します。


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




3.<Color32>


 32 ビット形式での RGBA の色の表現をします。各色の成分は 0 から 255 の範囲で byte 値で表します。

  // Color32 は byte 型で色の指定が可能なので、色の各成分用の値を Random.Range メソッドを利用して int 型で取得し、byte 型にキャストして指定
  return new Color32((byte)Random.Range(0, 255), (byte)Random.Range(0, 255), (byte)Random.Range(0, 255), 255);

 Random.Range メソッドで取得できる型は int 型(あるいは float 型)になりますので、今回は int 型で 0 から 255 の値をランダムで取得し、
それを byte 型にキャストして、色の成分の型を合致させることで利用しています。


参考サイト
Unity 公式スクリプトリファレンス
Color32
https://docs.unity3d.com/ja/current/ScriptReferenc...


4.<ParticleSystem.MinMaxGradient 構造体>


 パーティクルシステムの StartColor の色を変更する場合、ParticleSystem.MinMaxGradient 構造体のインスタンスを作成して、
それを利用することで色を変更できるようになっています。
 Transform の Position を変更する際に、Vector3 構造体のインスタンスを作成して、それを利用して Position を変更する手続きを行うのと同じ処理の流れです。

 ParticleSystem.MinMaxGradient 構造体もコンストラクタ・メソッドが設定されているため、インスタンスと同時に初期化を行って色を設定することが出来ます。

  // パーティクルシステム用の色の設定を行うためのインスタンスを作成して、コンストラクタを利用して色を2色設定して初期化
 new ParticleSystem.MinMaxGradient(GetRandomColor(), GetRandomColor())
 

参考サイト
Qiita @UnagiHuman 様
Unity5.5から Particle Systemのパラメータをスクリプトから変更する方法が変わった話
https://qiita.com/UnagiHuman/items/caaa1585f7ee201...
Api Documentation
Struct ParticleSystem.MinMaxGradient
https://stephenhodgson.github.io/UnityCsReference/...


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


 インスペクターに追加された2つの変数にアサインをして情報を登録します。

 花火のプレファブの変数には、先程の手順でプレファブにしてある花火のゲームオブジェクトのプレファブをドラッグアンドドロップしてアサインします。

 生成位置については、ヒエラルキーにある Canvas ゲームオブジェクトをドラッグアンドドロップしてアサインします。


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



 以上で設定は完了です。



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


 スクリプトの処理の流れをしっかりと把握し、処理を読み解けるようにしましょう。

 その上でゲームを実行してデバッグを行い、制御の良しあしを確認します。
 
 実装の目標である内容がすべて実装されて、花火のゲームオブジェクトが制御されていれば成功です。


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


<生成されたパーティクルの色を確認する>



<生成されたパーティクルの色を確認する>



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

 次は 発展30 −ゲームクリア演出の追加◆ です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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