ゲーム開発奮闘記

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

Unity ParticleSystem Lesson:回復魔法

今回、回復魔法(ヒール)のエフェクト作成方法を紹介します。

f:id:KTK_kumamoto:20180419104819g:plain

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

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

1.イメージ絵作成

地面からキラキラが舞い上がって、キラキラがプレイヤーの位置からはじける動き

f:id:KTK_kumamoto:20180411151729j:plain:w300


2.必要素材をリスト化

ここでは、下記の要素で組み立てることにします。
  1. 舞い上がるキラキラ
  2. 地面の広がるリング
  3. 地面の広がる光
  4. 回復したを表す、遅れてはじけるキラキラ

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

  1. リングテクスチャー:ring.png
  2. キラキラテクスチャー:glitter.png
  3. 光テクスチャー:par.png


3.素材作成

  1. リングテクスチャー:ring.png
  2. キラキラテクスチャー:glitter.png
  3. 光テクスチャー:par.png

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. パターン: 放物面 f:id:KTK_kumamoto:20180419153349j:plain
  6. curve作成:Shapeノードの光の領域をカーブで調整
  7. カーブ具合は、画像を参照 f:id:KTK_kumamoto:20180419153441j:plain
  8. Shape作成:先ほどのと別にぼかした光を作っていきます。
  9. パターン: ディスク Scale : 0.63 f:id:KTK_kumamoto:20180419153808j:plain
  10. Invert作成:Shapeノードを反転させます
  11. f:id:KTK_kumamoto:20180419154012j:plain
  12. Blend作成:Shapeから作成した2つのノードを乗算ブレンドして、中心をくりぬく
  13. ブレンドモード:乗算 f:id:KTK_kumamoto:20180419154251j:plain
  14. ring.pngで書き出し
  15. f:id:KTK_kumamoto:20180419154512p:plain:w300

ii. キラキラテクスチャー:glitter.png

  1. Substance Designerを起動
  2. 新規Substance Graph :Empty
  3.  Graph Name: glitter  Size Mode: Absolute  Width: 1024px  Height: 1024px  Format: Relative to parent
  4. Starburst作成:十字を作る
  5. Branches : 4 f:id:KTK_kumamoto:20180419160209j:plain
  6. Glow_grayscale作成:十字に対して少しグローをかける
  7. Glow Amount : 1 Clear Amount : 0.6 f:id:KTK_kumamoto:20180419160531j:plain
  8. Shape作成:新たにShapeで丸い光を作る
  9. パターン:放物面 f:id:KTK_kumamoto:20180419160806j:plain
  10. curve作成:Shapeノードの光の領域をカーブで調整
  11. カーブ具合は、画像を参照 f:id:KTK_kumamoto:20180419160939j:plain
  12. Blend作成:2つのノードを加算ブレンドする
  13. ブレンドモード:加算(覆い焼き) f:id:KTK_kumamoto:20180419161032j:plain
  14. glitter.pngで書き出し
  15. f:id:KTK_kumamoto:20180419161215p:plain:w300

iii. 光テクスチャー:par.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. パターン: 放物面 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

4.Unityで組み立てる

Unity Material作成

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

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

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

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

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

eff_heal ← 空のGameObject
 L glitter ← ParticleSystem
  L glitter_burst ← ParticleSystem
  L ring_ground ← ParticleSystem
  L par_ground ← ParticleSystem
f:id:KTK_kumamoto:20180419170627j:plain

  1. eff_heal : 空のGameObject
  2. glitter : 舞い上がるキラキラ
  3. glitter_burst : 回復したを表す、遅れてはじけるキラキラ
  4. ring_ground : 地面の広がるリング
  5. par_ground : 地面の広がる光

i. eff_heal : 空のGameObject 詳細

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


ii. glitter : 舞い上がるキラキラ 詳細

  • Transform : ParticleSystemを作成した際の初期のトランスフォーム
  • Rotation : X -90
    f:id:KTK_kumamoto:20180419171743j:plain
  • Mainモジュール
  • Duration:2.00
    Start Lifetime: 1, 1.2
    Start Speed: 0.5
    Start Size: 0.7, 1
    Start Color: #56FFFFFF
    Gravity Modifier: -0.75, -0.5
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180419172314j:plain
  • Emission
  • Rate over Time : Curve 50
    time : 0.06483535, value : 0
    time : 0.2096585 , value : 0.7480959
    time : 0.4365051 , value : 1
    time : 0.55 , value : 1
    f:id:KTK_kumamoto:20180420102655j:plain
  • Shape
  • Angle : 5
    Radius : 1
    Radius Thickness : 1
    Arc : 360
    f:id:KTK_kumamoto:20180420103049j:plain
  • Size over Lifetime
  • time : 0, value : 0
    time : 0.2314453, value : 1
    time : 0.4005935, value : 0
    time : 0.5341246, value : 1
    time : 0.7359051, value : 0
    time : 0.8456973, value : 1
    time : 1, value : 0
    f:id:KTK_kumamoto:20180420103232j:plain
  • Renderer
  • Material : glitter_add
    f:id:KTK_kumamoto:20180420103602j:plain


iii. glitter_burst : 回復したを表す、遅れてはじけるキラキラ

  • Transform : キラキラが広がる位置に少し高さを調整
  • Position : Z 1
    Rotation : X 0
    f:id:KTK_kumamoto:20180420103908j:plain
  • Mainモジュール
  • Duration:2.00
    Start Lifetime: 1.5, 0.5
    Start Speed: 5, 7
    Start Size: 0.5
    Start Color: #56FFFFFF
    Gravity Modifier: -0.4, -0.3
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180420104717j:plain
  • Emission
  • Bursts
    Time : 1.2000
    Count : 60
    f:id:KTK_kumamoto:20180420104757j:plain
  • Shape
  • Shape : Sphere
    Radius : 0.5
    Radius Thickness : 1
    f:id:KTK_kumamoto:20180420104814j:plain
  • Limit Velocity over Lifetime
  • Speed : Curve
    Speed : 2.0
    time : 0, value : 1
    time : 1, value : 0
    f:id:KTK_kumamoto:20180420105258j:plain
  • Size over Lifetime
  • time : 0, value : 0
    time : 0.2314453, value : 1
    time : 0.4005935, value : 0
    time : 0.5341246, value : 1
    time : 0.7359051, value : 0
    time : 0.8456973, value : 1
    time : 1, value : 0
    f:id:KTK_kumamoto:20180420103232j:plain
  • Renderer
  • Material : glitter_add
    f:id:KTK_kumamoto:20180420103602j:plain

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

  • Transform : 地面にめり込まないように、少しだけ浮かします
  • Pozition Z : 0.06
    f:id:KTK_kumamoto:20180420105902j:plain
  • Mainモジュール
  • Duration:2.00
    Start Lifetime: 1
    Start Speed: 0
    Start Size: 15
    Start Color: #56FFFFFF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180420110111j:plain
  • Emission
  • Rate over Time : Curve 3
    time : 0, value : 0
    time : 0.09866333 , value : 1
    time : 0.6 , value : 1
    time : 0.7 , value : 0
    f:id:KTK_kumamoto:20180420110252j: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
    time : 1, value : 1
    f:id:KTK_kumamoto:20180420110839j: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: #56FFFFFF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180420110111j:plain
  • Emission
  • Rate over Time : Curve 3
    time : 0, value : 0
    time : 0.09866333 , value : 1
    time : 0.5 , value : 1
    time : 0.65 , value : 0
    f:id:KTK_kumamoto:20180420111401j: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

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

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

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

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

ktkkumamoto.booth.pm