ゲーム開発奮闘記

Unity・エフェクト・アプリ開発に関係した記事を書いています

Unity ParticleSystem Lesson : 詠唱(Singing)

今回、魔法詠唱(Singing)のエフェクト作成方法を紹介します。

f:id:KTK_kumamoto:20180424125131g:plain

※使用ソフトとバージョン
Substance Designer 2017.2.2
Blender 2.79
Unity 2017.3.0f3

制作の流れ
  1. イメージ絵作成
  2. 必要素材をリスト化
  3. 素材作成
  4. Unityで組み立てる

1.イメージ絵作成

地面から回転しながら舞い上がるリング。

地面に広がる回転するリング。

f:id:KTK_kumamoto:20180423134019j:plain:w300


2.必要素材をリスト化

ここでは、下記の要素で組み立てることにします。
  1. 舞い上がる回転するリング
  2. 地面の広がる回転するリング
  3. 地面の広がる光
  4. 詠唱プレイヤーの位置に発光する光
  5. 地面の広がる衝撃波

要素を組み立てるのに必要な素材は、下記のものです。

  1. リングテクスチャー:ring.png
  2. 光テクスチャー:par.png
  3. 衝撃波テクスチャー:aura.png
  4. 衝撃波モデル:aura.fbx


3.素材作成

  1. リングテクスチャー:ring.png
  2. 光テクスチャー:par.png
  3. 衝撃波テクスチャー:aura.png
  4. 衝撃波モデル:aura.fbx

i. リングテクスチャー:ring.png

  1. Substance Designerを起動
  2. 新規Substance Graph :Empty
  3.  Graph Name: ring
     Size Mode: Absolute
     Width: 1024px
     Height: 1024px
     Format: Relative to parent
  4. Shape作成:横長にぼかした光を作っていきます。
  5. パターン: ガウス
    Size X:0.59, Y:0.26
    f:id:KTK_kumamoto:20180423135941j:plain
  6. Transform2D作成:Shapeノードの光を少し下に移動
  7. オフセット:Y -0.38
    f:id:KTK_kumamoto:20180423140337j:plain
  8. Cartesian_to_polar_grayscale作成:極座標でリング状に形状を変える
  9. f:id:KTK_kumamoto:20180423140409j:plain
  10. Transform2D作成:90度回転させる
  11. 回転:角度 90
    f:id:KTK_kumamoto:20180423140616j:plain
  12. Blend作成:2つの半円リングノードを加算ブレンドして、1つのリングにする
  13. ブレンドモード:加算(覆い焼き)
    f:id:KTK_kumamoto:20180423140734j:plain
  14. Curve作成:明るさを調整
  15. f:id:KTK_kumamoto:20180423140856j:plain
  16. ring.pngで書き出し
  17. f:id:KTK_kumamoto:20180423141000p:plain:w300

ii. 光テクスチャー:par.png

  1. Substance Designerを起動
  2. 新規Substance Graph :Empty
  3.  Graph Name: par  Size Mode: Absolute  Width: 1024px  Height: 1024px  Format: Relative to parent
  4. Shape作成:ぼかした光を作っていきます。
  5. パターン: 放物面 f:id:KTK_kumamoto:20180419161310j:plain
  6. curve作成:Shapeノードの光の領域をカーブで調整
  7. カーブ具合は、画像を参照 f:id:KTK_kumamoto:20180419161456j:plain
  8. par.pngで書き出し
  9. f:id:KTK_kumamoto:20180419161556p:plain:w300


iii. 衝撃波テクスチャー:aura.png

  1. こちらは、適当に作ってしまったので詳細は割愛します!
  2. aura.pngで書き出し
  3. f:id:KTK_kumamoto:20180424125559p:plain:w300

iv. 衝撃波モデル:aura.fbx

  1. Blenderを起動
  2. Cylinderから形状を変える
  3. aura.fbxで書き出し
  4. f:id:KTK_kumamoto:20180424131748j:plain


4.Unityで組み立てる

Unity Material作成

Create > Material
 ・Material名:ring_add
 ・Shader:Mobile/Particle/Additive
 ・テクスチャー:ring.png
f:id:KTK_kumamoto:20180424092343j:plain

Create > Material
 ・Material名:par_add
 ・Shader:Mobile/Particle/Additive
 ・テクスチャー:par.png
f:id:KTK_kumamoto:20180419170238j:plain

Create > Material
 ・Material名:aura_add
 ・Shader:Mobile/Particle/Additive
 ・テクスチャー:aura.png
f:id:KTK_kumamoto:20180424125642j:plain

パーティクルシステムを作成する

親の空のGameObjectが1つと、ParticleSystemを5つ作成します。

eff_singing ← 空のGameObject
 L ring_up ← ParticleSystem
  L par ← ParticleSystem
  L ring_ground ← ParticleSystem
  L par_ground ← ParticleSystem
  L shock_cone ← ParticleSystem

f:id:KTK_kumamoto:20180424125751j:plain

  1. eff_singing : 空のGameObject
  2. ring_up : 舞い上がる回転するリング
  3. par: 詠唱プレイヤーの位置に発光する光
  4. ring_ground : 地面の広がる回転するリング
  5. par_ground : 地面の広がる光
  6. shock_cone : 地面の広がる衝撃波

i. eff_singing : 空のGameObject 詳細

  • 空のGameObjectを作成する
  • Hierarchy上で、右クリック > Create > Create Empty
  • 名前をeff_singingと変更する


ii. ring_up : 舞い上がる回転するリング

  • Transform : ParticleSystemを作成した際の初期のトランスフォーム
  • Rotation : X -90
    f:id:KTK_kumamoto:20180423141851j:plain
  • Mainモジュール
  • Start Lifetime: 0.3, 0.5
    Start Speed: 10
    Start Size: 3
    3D Start Rotation : On
    X : 50, -50 Y : 50, -50 Z : 0, 0
    Start Color: #8DFF56FF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180423142007j:plain
  • Emission
  • Rate over Time : 10
    f:id:KTK_kumamoto:20180423142216j:plain
  • Shape : Off
  • Color over Lifetime
  • Alpha: 255, Location: 0%
    Alpha: 0, Location: 100%
    Color: FFFFFF, Location: 0%
    Color: FFFFFF, Location: 100%
    f:id:KTK_kumamoto:20180420110728j:plain f:id:KTK_kumamoto:20180420110716j:plain
  • Size over Lifetime
  • time : 0, value : 0.65
    time : 1, value : 1
    f:id:KTK_kumamoto:20180423142417j:plain
  • Rotation over Lifetime
  • Angular Velocity : 360
    f:id:KTK_kumamoto:20180423142515j:plain
  • Renderer
  • Material : ring_add
    Render Alignment : Local
    f:id:KTK_kumamoto:20180423142800j:plain


iii. par: 詠唱プレイヤーの位置に発光する光

  • Transform : プレイヤー位置の高さに調整
  • Position : Z 1
    Rotation : X 0
    f:id:KTK_kumamoto:20180423142948j:plain
  • Mainモジュール
  • Start Lifetime: 1
    Start Speed: 0
    Start Size: 5
    Start Color: #8DFF56FF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180423143048j:plain
  • Emission
  • Rate over Time : 3
    f:id:KTK_kumamoto:20180423143224j:plain
  • Shape : Off
  • Color over Lifetime
  • Alpha: 255, Location: 0%
    Alpha: 0, Location: 100%
    Color: FFFFFF, Location: 0%
    Color: FFFFFF, Location: 100%
    f:id:KTK_kumamoto:20180420110728j:plain f:id:KTK_kumamoto:20180420110716j:plain
  • Size over Lifetime
  • time : 0, value : 0.1860638
    time : 1, value : 1
    f:id:KTK_kumamoto:20180423143329j:plain
  • Renderer
  • Material : par_add
    f:id:KTK_kumamoto:20180423143448j:plain

iv. ring_ground : 地面の広がる回転するリング

  • Transform : 地面にめり込まないように、少しだけ浮かします
  • Pozition Z : 0.06
    f:id:KTK_kumamoto:20180420105902j:plain
  • Mainモジュール
  • Start Lifetime: 0.3, 0.4
    Start Speed: 0
    Start Size: 5
    Start Rotation: 0, 360
    Start Color: #8DFF56FF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180423143729j:plain
  • Emission
  • Rate over Time : 15
    f:id:KTK_kumamoto:20180423143830j:plain
  • Shape : Off
  • Color over Lifetime
  • Alpha: 0, Location: 0%
    Alpha: 255, Location: 50%
    Alpha: 0, Location: 100%
    Color: FFFFFF, Location: 0%
    Color: FFFFFF, Location: 100%
    f:id:KTK_kumamoto:20180423144012j:plain f:id:KTK_kumamoto:20180423144116j:plain
  • Size over Lifetime
  • Size : 1.5
    time : 0, value : 0.2
    time : 0.95, value : 0.8
    f:id:KTK_kumamoto:20180423144347j:plain
  • Renderer
  • Render Mode : Horizontal Billboard
    Material : ring_add
    f:id:KTK_kumamoto:20180420110949j:plain

v. par_ground : 地面の広がる光

  • Transform : 地面にめり込まないように、少しだけ浮かします
  • Pozition Z : 0.06
    f:id:KTK_kumamoto:20180420111158j:plain
  • Mainモジュール
  • Duration:2.00
    Start Lifetime: 1
    Start Speed: 0
    Start Size: 15
    Start Color: #8DFF56FF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180424092822j:plain
  • Emission
  • Rate over Time : 3
    f:id:KTK_kumamoto:20180424092937j:plain
  • Shape : Off
  • Color over Lifetime
  • Alpha: 255, Location: 0%
    Alpha: 0, Location: 100%
    Color: FFFFFF, Location: 0%
    Color: FFFFFF, Location: 100%
    f:id:KTK_kumamoto:20180420110728j:plain f:id:KTK_kumamoto:20180420110716j:plain
  • Size over Lifetime
  • time : 0, value : 0.1860638
    time : 1, value : 1
    f:id:KTK_kumamoto:20180420111558j:plain
  • Renderer
  • Render Mode : Horizontal Billboard
    Material : par_add
    f:id:KTK_kumamoto:20180420111720j:plain

vi. shock_cone : 地面の広がる衝撃波

  • Mainモジュール
  • Start Lifetime: 0.3, 0.4
    Start Speed: 0
    Start Size: 1.3, 1.5
    Start Color: #8DFF56FF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180424130039j:plain
  • Emission
  • Rate over Time : 7
    f:id:KTK_kumamoto:20180424130252j:plain
  • Shape : Off
  • Color over Lifetime
  • Alpha: 255, Location: 0%
    Alpha: 0, Location: 100%
    Color: FFFFFF, Location: 0%
    Color: FFFFFF, Location: 100%
    f:id:KTK_kumamoto:20180420110728j:plain f:id:KTK_kumamoto:20180420110716j:plain
  • Size over Lifetime
  • Size X : 1.5
    time : 0, value : 0.2531646
    time : 1, value : 1
    f:id:KTK_kumamoto:20180424130340j:plain
  • Rotation over Lifetime
  • Angular Velocity : 360
    f:id:KTK_kumamoto:20180424130514j:plain
  • Renderer
  • Render Mode : Mesh
    Mesh : shock_cone
    Material : aura_add
    Render Alignment : Local
    f:id:KTK_kumamoto:20180424130708j:plain

完成です!
f:id:KTK_kumamoto:20180424125131g:plain

今回も、テクスチャーをすべてSubstance Designerで作成しました。
長文になりましたが最後まで読んでくださいまして、ありがとうございます!

サンプルは、下記にアップしています。
eff_singing_sample.unitypackage
よかったら試してみてください!

こちらの本もよろしくお願いいたします!

ktkkumamoto.booth.pm