おはじきゲーム 手順５
最終更新：
orika_ex_miyako 2020年10月14日(水) 19:20:00履歴
以下の内容で順番に実装を進めていきます。
手順５ −パーティクルを作成−
新しい学習内容は、以下の通りです。
９．キューライン用ゲームオブジェクト CueLine を作成する
設計
手球を弾くためのゲームオブジェクトを作成し、完成後にプレファブにします。
今回はスワイプした場所に、ParticleSystemを使った演出を持つゲームオブジェクトを複数生成し、それと接触することで手球を弾くようにします。
ParticleSystemでは３Ｄ以外にも２Ｄのテクスチャをアニメーションさせて演出を作ることができますので、
その手法でキューライン用のゲームオブジェクトを作成します。
また接触できるようにParticleSystemにコライダーを設定します。
完成動画
https://gyazo.com/47c2cc070ba6367b64c8667d50c597fd
これを複数つなげて生成することで、次の手順で１つのラインのように見せる演出で、手球を弾くようにしています。
動画 複数生成した場合（次の手順で実装）
https://gyazo.com/4b6e32e23f8c0ac3990601f3b79664db
それでは順番に実装していきます。
ParticleSystem用に無料の画像を取得してUnityにインポートする
最初にParticleSystemに適用する画像を入手します。２Ｄのテクスチャ画像を取得します。
以下のサイト様より、@RiuRixu 様の製作された無料のパーティクル画像がダウンロードできます。
ダウンロードするファイルは、パーティクル素材2alpha.zip です。
無料パーティクル
フォルダをダウンロードして解凍後、フォルダごと、あるいは使いたい画像ファイルを選択して、UnityのProject内にあるSpritesフォルダにインポートしてください。
今回は1枚の画像に複数の画像がまとまっている状態のまま使用します。
参考画像
ParticleSystem用にMaterialを作成し、CueLineMaterialに名前を変えて設定を行う
Project内で右クリックしてメニューを表示し、Create => Folder を選択し、名前を Materials に変更します。
このMaterialsフォルダ内で、もう一度右クリックしてメニューを表示し、Create => Material を選択します。名前を CueLineMaterial に変更します。
CueLineMaterialを選択して、インスペクターを確認します。
CueLineMaterial インスペクター画像
初めに 右側にある Particle Texture という場所が None になっていますので、こちらに先ほどインポートした画像を設定します。
この画像は今回のように1枚の画像に複数の画像データが分割してまとめられているもの（アトラス画像といいます）を設定します。
Select ボタンを押すか、あるいは下記のように画像をドラッグアンドドロップしてアサインします。
Particle Texture アサイン動画
https://gyazo.com/7b7310b9c6a8d04edb23b212c06e684a
アサイン後のインスペクター画像
続いて、インスペクターの最上段にある Shader を変更します。Shader とは Material の持つ描画の設定情報です。この情報を元に Material は描画を行います。
今回は Mobile / Particle / Alpha Blended に設定します。これは画像に半透明の要素を加えながら描画をしてくれる設定の Shader です。
Shader設定動画
https://gyazo.com/a07f0e249710f0aed3ef64428feffca9
Shader設定後のインスペクター画像
この設定によって描画方法が変わりますので、画像の見え方が変わります。Alpha Blended を Additive にしてもいいと思います。
またこの辺りはゲーム再生中でも変更できますので、リアルタイムに描画を確認しながら、好みのShaderを選択してください。
Shaderによる比較� �Mobile / Particle / Alpha Blended
https://gyazo.com/88216947c8e83f5b8c808ecefaa5ef84
Shaderによる比較�◆�Mobile / Particle / Additive
https://gyazo.com/3867b68fc367446d540ea1d83f77342a
参考サイト
Canvas内に ParticleSystem ゲームオブジェクトを新しく作成し、CueLine に名前を変える
Canvasの上で右クリックしてメニューを表示し、Effect => Particle System を選択します。
名前を CueLine に変更してください。Canvas内でない部分に作成された場合には再度作り直してください。
CueLineゲームオブジェクトのヒエラルキー画像
CueLineゲームオブジェクトのParticleSystemコンポーネントの設定を行う
１．メインモジュール
CueLineゲームオブジェクトを選択し、インスペクターを確認します、
ParticleSystemの一番上のメインモジュールから設定を行います。
下記の画像のように、Duration、Looping、StartSizeなどの項目を設定していきます。
Durationはパーティクルの生成する時間です。パッと表示されて消えるように短めの時間を設定しています。
LoopingはDurationの時間経過後に、再度もう一度、パーティクルを再生するかどうかの設定です。今回はループさせませんので、チェックを外します。
StartSizeはパーティクルが生成された際の大きさです。これは使用する画像によって調整が必要です。
まずは画像の数字に設定しておいて、実際に再生されたパーティクルを見ながら適宜調整してください。
Scaling Mode を Shape に設定します。この設定では Scale に変更がなく、再生開始時の位置情報のみ利用されます。
他にも変更箇所がありますので、画像を参考に設定してください。
メインモジュール インスペクター画像
そのほかの基本モジュールについては、これらのサイトを参考に調べてみてください。
参考サイト
２．Shapeモジュール
Shapeモジュールを設定します。一つ上の設定であるEmissionモジュールは、今回は変更せずにそのままで問題ありません。
下記のインスペクター画像のように設定してください。
ここでは Radius を変更し、半径を小さく設定しています。
Shapeモジュール インスペクター画像
Shapeモジュールでは、Shapeプロパティに設定した内容に応じて、その細部の設定が異なります。詳細は公式マニュアルを確認してください。
参考サイト
３．TexutureSheetAnimationモジュール
このモジュールを変更することで画像をアニメーションさせて表示します。
最初はこのモジュールにはチェックがついていませんので、名前の左にあるチェックをクリックして使用許可します。
その後、TexutureSheetAnimation部分をクリックすると詳細な設定が開きます。
Mode は Grid のままで、次の Tiles の値を変更します。今回使用する画像は 8 * 8 の大きさで１枚の画像ファイルになっていますので
この値を x = 8、 y = 8 に変更して、画像の数と合わせます。
その下にある Animation の設定が Whole Sheet になっていると思います。これは、画像の一番左上から右方向に画像をアニメーションさせていき
その行が終了したら１行下の一番左からまた右方向にアニメーションをさせ、ずべての画像を１つにアニメーションとして繋げて再生する処理を行います。
Cycle の数だけ再生を繰り返しますので、この値は 1 のままにしておきます。
TexutureSheetAnimationモジュール インスペクター画像
参考サイト
４．Rendererモジュール
最後にRendererモジュールの設定を行います。
Material のプロパティに先ほど作成した CueLineMaterial をアサインします。こちらの設定とTexutureSheetAnimationモジュールの設定を行うことによって
1枚のアトラス画像をパラパラ漫画のように1枚のアニメーションとして再生することが可能になります。
また Order in Layer の値を 1 に変更します。これはパーティクルの描画の優先順位です。 0 のままですとCanvasと同じ優先順位のため、画面に表示されなくなってしまいます。
そのため、Canvasの設定値よりも大きな値にして、パーティクルをゲーム画面に表示出来るように設定します。
動画 Renderer欄のMaterialに作成した CueLineParticleをアサインする
https://gyazo.com/d7c1261b2c0c9a1adeb2eaba8da98808
Rendererモジュール インスペクター画像
今回はMaterialとTextureを利用しましたが、1枚のTexture画像を分割し、Spriteとして利用して再生する方法もあります。
こちらのサイト様が詳しいので確認してみてください。
参考サイト
これでParticleSystemコンポーネントの設定は完成です。
最後にColliderをアタッチして手球と接触できるようにします。
CueLineゲームオブジェクトにBoxCollider2Dをアタッチする
CueLineゲームオブジェクトのインスペクターの一番下にある Add Component を選択して、BoxCollider2Dを追加します。
Colliderの大きさを適宜なサイズに調整してください。(設定した画像によってはそのままでも問題ないと思います)
CueLineゲームオブジェクト BoxCollider2D インスペクター画像
これでCueLineゲームオブジェクトは完成です。
１０．CueLineゲームオブジェクトをプレファブにし、Tag と Layer を設定する
CueLineゲームオブジェクトをプレファブにする
Project内にPrefabsフォルダを新しく作成し、その中にCueLineゲームオブジェクトをドラッグアンドドロップしてプレファブにします。
CueLineゲームオブジェクトをプレファブ化した際のインスペクター画像
プレファブのCueLineゲームオブジェクトを選択し、Open Prefabを選択します。
CueLineゲームオブジェクトにTagとLayerを設定する
Tag には新しく CueLine を作成して、設定します。Layerも同じように CueLine を新しく作成して設定します。
動画 新しくLayerを追加する手順
https://gyazo.com/fcc1683aebe0b4f11e63430186627570
Layerなどを変更する際に警告メッセージが表示された場合には Yes,Change Children を押してください。
これは自分だけではなく、子オブジェクトも一緒にTagやLayerを変更します、という確認です。
Layer変更時の警告メッセージ
TagとLayer設定後のCueLineゲームオブジェクトのインスペクター画像
パーティクルを確認する
インスペクターから Open Prefab を行うとSceneビューがプレファブの設定画面に切り替わり、ParticleEffectビューが表示されます。
動画 Open Prefabの手順
https://gyazo.com/d2af5e70cf4c5a82c5cd0b6b99dab063
Playボタンを押して、パーティクルが正常に再生されるか確認してみてください。
動画 ParticleEffectビュー
https://gyazo.com/24d7d50df1787460e558cf70e49d8c02
以上でこの手順は終了です。
手順５ −パーティクルを作成−
９．キューライン用ゲームオブジェクト CueLine を作成する １０．CueLineゲームオブジェクトをプレファブにし、Tag と Layer を設定する
新しい学習内容は、以下の通りです。
・ParticleSystemのTextureSheetAnimation機能を使って、テクスチャをアニメーション表示する
９．キューライン用ゲームオブジェクト CueLine を作成する 
設計
手球を弾くためのゲームオブジェクトを作成し、完成後にプレファブにします。
今回はスワイプした場所に、ParticleSystemを使った演出を持つゲームオブジェクトを複数生成し、それと接触することで手球を弾くようにします。
ParticleSystemでは３Ｄ以外にも２Ｄのテクスチャをアニメーションさせて演出を作ることができますので、
その手法でキューライン用のゲームオブジェクトを作成します。
また接触できるようにParticleSystemにコライダーを設定します。
完成動画
https://gyazo.com/47c2cc070ba6367b64c8667d50c597fd
これを複数つなげて生成することで、次の手順で１つのラインのように見せる演出で、手球を弾くようにしています。
動画 複数生成した場合（次の手順で実装）
https://gyazo.com/4b6e32e23f8c0ac3990601f3b79664db
それでは順番に実装していきます。
ParticleSystem用に無料の画像を取得してUnityにインポートする
最初にParticleSystemに適用する画像を入手します。２Ｄのテクスチャ画像を取得します。
以下のサイト様より、@RiuRixu 様の製作された無料のパーティクル画像がダウンロードできます。
ダウンロードするファイルは、パーティクル素材2alpha.zip です。
無料パーティクル
コガネブログ様
【Unity】Unity で使用できる、無料配布されているパーティクル素材集4つ紹介
https://baba-s.hatenablog.com/entry/2019/05/08/090...
フォルダをダウンロードして解凍後、フォルダごと、あるいは使いたい画像ファイルを選択して、UnityのProject内にあるSpritesフォルダにインポートしてください。
今回は1枚の画像に複数の画像がまとまっている状態のまま使用します。
参考画像
ParticleSystem用にMaterialを作成し、CueLineMaterialに名前を変えて設定を行う
Project内で右クリックしてメニューを表示し、Create => Folder を選択し、名前を Materials に変更します。
このMaterialsフォルダ内で、もう一度右クリックしてメニューを表示し、Create => Material を選択します。名前を CueLineMaterial に変更します。
CueLineMaterialを選択して、インスペクターを確認します。
CueLineMaterial インスペクター画像
初めに 右側にある Particle Texture という場所が None になっていますので、こちらに先ほどインポートした画像を設定します。
この画像は今回のように1枚の画像に複数の画像データが分割してまとめられているもの（アトラス画像といいます）を設定します。
Select ボタンを押すか、あるいは下記のように画像をドラッグアンドドロップしてアサインします。
Particle Texture アサイン動画
https://gyazo.com/7b7310b9c6a8d04edb23b212c06e684a
アサイン後のインスペクター画像
続いて、インスペクターの最上段にある Shader を変更します。Shader とは Material の持つ描画の設定情報です。この情報を元に Material は描画を行います。
今回は Mobile / Particle / Alpha Blended に設定します。これは画像に半透明の要素を加えながら描画をしてくれる設定の Shader です。
Shader設定動画
https://gyazo.com/a07f0e249710f0aed3ef64428feffca9
Shader設定後のインスペクター画像
この設定によって描画方法が変わりますので、画像の見え方が変わります。Alpha Blended を Additive にしてもいいと思います。
またこの辺りはゲーム再生中でも変更できますので、リアルタイムに描画を確認しながら、好みのShaderを選択してください。
Shaderによる比較� �Mobile / Particle / Alpha Blended
https://gyazo.com/88216947c8e83f5b8c808ecefaa5ef84
Shaderによる比較�◆�Mobile / Particle / Additive
https://gyazo.com/3867b68fc367446d540ea1d83f77342a
参考サイト
SamuraiBlog様
【Unity入門】Shaderってなんだ?誰でもわかるシェーダー解説!
https://www.sejuku.net/blog/66319
Canvas内に ParticleSystem ゲームオブジェクトを新しく作成し、CueLine に名前を変える
Canvasの上で右クリックしてメニューを表示し、Effect => Particle System を選択します。
名前を CueLine に変更してください。Canvas内でない部分に作成された場合には再度作り直してください。
CueLineゲームオブジェクトのヒエラルキー画像
CueLineゲームオブジェクトのParticleSystemコンポーネントの設定を行う
ParticleSystemコンポーネントには非常に多くの設定項目があります。これらの項目をモジュールと言います。今回はメインモジュール、Shape、TexutureSheetAnimation、Rendererの各モジュールを順番を設定していきます。
１．メインモジュール
CueLineゲームオブジェクトを選択し、インスペクターを確認します、
ParticleSystemの一番上のメインモジュールから設定を行います。
下記の画像のように、Duration、Looping、StartSizeなどの項目を設定していきます。
Durationはパーティクルの生成する時間です。パッと表示されて消えるように短めの時間を設定しています。
LoopingはDurationの時間経過後に、再度もう一度、パーティクルを再生するかどうかの設定です。今回はループさせませんので、チェックを外します。
StartSizeはパーティクルが生成された際の大きさです。これは使用する画像によって調整が必要です。
まずは画像の数字に設定しておいて、実際に再生されたパーティクルを見ながら適宜調整してください。
Scaling Mode を Shape に設定します。この設定では Scale に変更がなく、再生開始時の位置情報のみ利用されます。
他にも変更箇所がありますので、画像を参考に設定してください。
メインモジュール インスペクター画像
そのほかの基本モジュールについては、これらのサイトを参考に調べてみてください。
参考サイト
Unity公式マニュアル
メインモジュール
https://docs.unity3d.com/ja/2018.4/Manual/PartSysM...
XR-Hub様
【Unity】パーティクル徹底解説！基本的なモジュールの使用方法から応用例まで
https://xr-hub.com/archives/3522
２．Shapeモジュール
Shapeモジュールを設定します。一つ上の設定であるEmissionモジュールは、今回は変更せずにそのままで問題ありません。
下記のインスペクター画像のように設定してください。
ここでは Radius を変更し、半径を小さく設定しています。
Shapeモジュール インスペクター画像
Shapeモジュールでは、Shapeプロパティに設定した内容に応じて、その細部の設定が異なります。詳細は公式マニュアルを確認してください。
参考サイト
Unity公式マニュアル
Shapeモジュール
https://docs.unity3d.com/ja/2018.4/Manual/PartSysS...
３．TexutureSheetAnimationモジュール
このモジュールを変更することで画像をアニメーションさせて表示します。
最初はこのモジュールにはチェックがついていませんので、名前の左にあるチェックをクリックして使用許可します。
その後、TexutureSheetAnimation部分をクリックすると詳細な設定が開きます。
Mode は Grid のままで、次の Tiles の値を変更します。今回使用する画像は 8 * 8 の大きさで１枚の画像ファイルになっていますので
この値を x = 8、 y = 8 に変更して、画像の数と合わせます。
その下にある Animation の設定が Whole Sheet になっていると思います。これは、画像の一番左上から右方向に画像をアニメーションさせていき
その行が終了したら１行下の一番左からまた右方向にアニメーションをさせ、ずべての画像を１つにアニメーションとして繋げて再生する処理を行います。
Cycle の数だけ再生を繰り返しますので、この値は 1 のままにしておきます。
TexutureSheetAnimationモジュール インスペクター画像
参考サイト
Unity公式マニュアル
TexutureSheetAnimationモジュール
https://docs.unity3d.com/ja/2018.4/Manual/PartSysT...
４．Rendererモジュール
最後にRendererモジュールの設定を行います。
Material のプロパティに先ほど作成した CueLineMaterial をアサインします。こちらの設定とTexutureSheetAnimationモジュールの設定を行うことによって
1枚のアトラス画像をパラパラ漫画のように1枚のアニメーションとして再生することが可能になります。
また Order in Layer の値を 1 に変更します。これはパーティクルの描画の優先順位です。 0 のままですとCanvasと同じ優先順位のため、画面に表示されなくなってしまいます。
そのため、Canvasの設定値よりも大きな値にして、パーティクルをゲーム画面に表示出来るように設定します。
動画 Renderer欄のMaterialに作成した CueLineParticleをアサインする
https://gyazo.com/d7c1261b2c0c9a1adeb2eaba8da98808
Rendererモジュール インスペクター画像
今回はMaterialとTextureを利用しましたが、1枚のTexture画像を分割し、Spriteとして利用して再生する方法もあります。
こちらのサイト様が詳しいので確認してみてください。
参考サイト
Unity公式マニュアル
Rendererモジュール
https://docs.unity3d.com/ja/2018.4/Manual/PartSysR...
LIGHT11様
【Unity】ParticleSystemで連番アニメーションをする方法
https://light11.hatenadiary.com/entry/2018/12/06/2...
これでParticleSystemコンポーネントの設定は完成です。
最後にColliderをアタッチして手球と接触できるようにします。
CueLineゲームオブジェクトにBoxCollider2Dをアタッチする
CueLineゲームオブジェクトのインスペクターの一番下にある Add Component を選択して、BoxCollider2Dを追加します。
Colliderの大きさを適宜なサイズに調整してください。(設定した画像によってはそのままでも問題ないと思います)
CueLineゲームオブジェクト BoxCollider2D インスペクター画像
これでCueLineゲームオブジェクトは完成です。
１０．CueLineゲームオブジェクトをプレファブにし、Tag と Layer を設定する
CueLineゲームオブジェクトをプレファブにする
Project内にPrefabsフォルダを新しく作成し、その中にCueLineゲームオブジェクトをドラッグアンドドロップしてプレファブにします。
CueLineゲームオブジェクトをプレファブ化した際のインスペクター画像
プレファブのCueLineゲームオブジェクトを選択し、Open Prefabを選択します。
CueLineゲームオブジェクトにTagとLayerを設定する
Tag には新しく CueLine を作成して、設定します。Layerも同じように CueLine を新しく作成して設定します。
動画 新しくLayerを追加する手順
https://gyazo.com/fcc1683aebe0b4f11e63430186627570
Layerなどを変更する際に警告メッセージが表示された場合には Yes,Change Children を押してください。
これは自分だけではなく、子オブジェクトも一緒にTagやLayerを変更します、という確認です。
Layer変更時の警告メッセージ
TagとLayer設定後のCueLineゲームオブジェクトのインスペクター画像
パーティクルを確認する
インスペクターから Open Prefab を行うとSceneビューがプレファブの設定画面に切り替わり、ParticleEffectビューが表示されます。
動画 Open Prefabの手順
https://gyazo.com/d2af5e70cf4c5a82c5cd0b6b99dab063
Playボタンを押して、パーティクルが正常に再生されるか確認してみてください。
動画 ParticleEffectビュー
https://gyazo.com/24d7d50df1787460e558cf70e49d8c02
以上でこの手順は終了です。
コメントをかく