Unityに関連する記事です

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

手順5 −パーティクルを作成−
 9.キューライン用ゲームオブジェクト CueLine を作成する
10.CueLineゲームオブジェクトをプレファブにし、Tag と Layer を設定する



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

・ParticleSystemのTextureSheetAnimation機能を使って、テクスチャをアニメーション表示する



9.キューライン用ゲームオブジェクト CueLine を作成する

設計


 手球を弾くためのゲームオブジェクトを作成し、完成後にプレファブにします。

 今回はスワイプした場所に、ParticleSystemを使った演出を持つゲームオブジェクトを複数生成し、それと接触することで手球を弾くようにします。

 ParticleSystemでは3D以外にも2Dのテクスチャをアニメーションさせて演出を作ることができますので、
その手法でキューライン用のゲームオブジェクトを作成します。

 また接触できるようにParticleSystemにコライダーを設定します。


完成動画
https://gyazo.com/47c2cc070ba6367b64c8667d50c597fd

 これを複数つなげて生成することで、次の手順で1つのラインのように見せる演出で、手球を弾くようにしています。
 

動画 複数生成した場合(次の手順で実装)
https://gyazo.com/4b6e32e23f8c0ac3990601f3b79664db


 それでは順番に実装していきます。


 

ParticleSystem用に無料の画像を取得してUnityにインポートする


 最初にParticleSystemに適用する画像を入手します。2Dのテクスチャ画像を取得します。

 以下のサイト様より、@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の各モジュールを順番を設定していきます。


1.メインモジュール

 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


2.Shapeモジュール

 Shapeモジュールを設定します。一つ上の設定であるEmissionモジュールは、今回は変更せずにそのままで問題ありません。

 下記のインスペクター画像のように設定してください。
ここでは Radius を変更し、半径を小さく設定しています。


Shapeモジュール インスペクター画像



 Shapeモジュールでは、Shapeプロパティに設定した内容に応じて、その細部の設定が異なります。詳細は公式マニュアルを確認してください。

参考サイト
Unity公式マニュアル
Shapeモジュール
https://docs.unity3d.com/ja/2018.4/Manual/PartSysS...


3.TexutureSheetAnimationモジュール

 このモジュールを変更することで画像をアニメーションさせて表示します。
最初はこのモジュールにはチェックがついていませんので、名前の左にあるチェックをクリックして使用許可します。

 その後、TexutureSheetAnimation部分をクリックすると詳細な設定が開きます。

 Mode は Grid のままで、次の Tiles の値を変更します。今回使用する画像は 8 * 8 の大きさで1枚の画像ファイルになっていますので
この値を x = 8、 y = 8 に変更して、画像の数と合わせます。

 その下にある Animation の設定が Whole Sheet になっていると思います。これは、画像の一番左上から右方向に画像をアニメーションさせていき
その行が終了したら1行下の一番左からまた右方向にアニメーションをさせ、ずべての画像を1つにアニメーションとして繋げて再生する処理を行います。

 Cycle の数だけ再生を繰り返しますので、この値は 1 のままにしておきます。


TexutureSheetAnimationモジュール インスペクター画像


参考サイト
Unity公式マニュアル
TexutureSheetAnimationモジュール
https://docs.unity3d.com/ja/2018.4/Manual/PartSysT...


4.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ゲームオブジェクトは完成です。


10.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



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

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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