Unity ParticleSystem Lesson:回復魔法
今回、回復魔法(ヒール)のエフェクト作成方法を紹介します。
※使用ソフトとバージョン
Substance Designer 2017.2.2
Unity 2017.3.0f3
制作の流れ
1.イメージ絵作成
地面からキラキラが舞い上がって、キラキラがプレイヤーの位置からはじける動き2.必要素材をリスト化
ここでは、下記の要素で組み立てることにします。- 舞い上がるキラキラ
- 地面の広がるリング
- 地面の広がる光
- 回復したを表す、遅れてはじけるキラキラ
要素を組み立てるのに必要な素材は、下記のものです。
3.素材作成
i. リングテクスチャー:ring.png
- Substance Designerを起動
- 新規Substance Graph :Empty Graph Name: ring Size Mode: Absolute Width: 1024px Height: 1024px Format: Relative to parent
- Shape作成:ぼかした光を作っていきます。 パターン: 放物面
- curve作成:Shapeノードの光の領域をカーブで調整 カーブ具合は、画像を参照
- Shape作成:先ほどのと別にぼかした光を作っていきます。 パターン: ディスク Scale : 0.63
- Invert作成:Shapeノードを反転させます
- Blend作成:Shapeから作成した2つのノードを乗算ブレンドして、中心をくりぬく ブレンドモード:乗算
- ring.pngで書き出し
![f:id:KTK_kumamoto:20180419153349j:plain f:id:KTK_kumamoto:20180419153349j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419153349.jpg)
![f:id:KTK_kumamoto:20180419153441j:plain f:id:KTK_kumamoto:20180419153441j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419153441.jpg)
![f:id:KTK_kumamoto:20180419153808j:plain f:id:KTK_kumamoto:20180419153808j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419153808.jpg)
![f:id:KTK_kumamoto:20180419154012j:plain f:id:KTK_kumamoto:20180419154012j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419154012.jpg)
![f:id:KTK_kumamoto:20180419154251j:plain f:id:KTK_kumamoto:20180419154251j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419154251.jpg)
![f:id:KTK_kumamoto:20180419154512p:plain:w300 f:id:KTK_kumamoto:20180419154512p:plain:w300](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419154512.png)
ii. キラキラテクスチャー:glitter.png
- Substance Designerを起動
- 新規Substance Graph :Empty Graph Name: glitter Size Mode: Absolute Width: 1024px Height: 1024px Format: Relative to parent
- Starburst作成:十字を作る Branches : 4
- Glow_grayscale作成:十字に対して少しグローをかける Glow Amount : 1 Clear Amount : 0.6
- Shape作成:新たにShapeで丸い光を作る パターン:放物面
- curve作成:Shapeノードの光の領域をカーブで調整 カーブ具合は、画像を参照
- Blend作成:2つのノードを加算ブレンドする ブレンドモード:加算(覆い焼き)
- glitter.pngで書き出し
![f:id:KTK_kumamoto:20180419160209j:plain f:id:KTK_kumamoto:20180419160209j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419160209.jpg)
![f:id:KTK_kumamoto:20180419160531j:plain f:id:KTK_kumamoto:20180419160531j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419160531.jpg)
![f:id:KTK_kumamoto:20180419160806j:plain f:id:KTK_kumamoto:20180419160806j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419160806.jpg)
![f:id:KTK_kumamoto:20180419160939j:plain f:id:KTK_kumamoto:20180419160939j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419160939.jpg)
![f:id:KTK_kumamoto:20180419161032j:plain f:id:KTK_kumamoto:20180419161032j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419161032.jpg)
![f:id:KTK_kumamoto:20180419161215p:plain:w300 f:id:KTK_kumamoto:20180419161215p:plain:w300](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419161215.png)
iii. 光テクスチャー:par.png
- Substance Designerを起動
- 新規Substance Graph :Empty Graph Name: ring Size Mode: Absolute Width: 1024px Height: 1024px Format: Relative to parent
- Shape作成:ぼかした光を作っていきます。 パターン: 放物面
- curve作成:Shapeノードの光の領域をカーブで調整 カーブ具合は、画像を参照
- par.pngで書き出し
![f:id:KTK_kumamoto:20180419161310j:plain f:id:KTK_kumamoto:20180419161310j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419161310.jpg)
![f:id:KTK_kumamoto:20180419161456j:plain f:id:KTK_kumamoto:20180419161456j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419161456.jpg)
![f:id:KTK_kumamoto:20180419161556p:plain:w300 f:id:KTK_kumamoto:20180419161556p:plain:w300](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419161556.png)
4.Unityで組み立てる
Unity Material作成
Create > Material・Material名:ring_add
・Shader:Mobile/Particle/Additive
・テクスチャー:ring.png
![f:id:KTK_kumamoto:20180419170153j:plain f:id:KTK_kumamoto:20180419170153j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419170153.jpg)
Create > Material
・Material名:glitter_add
・Shader:Mobile/Particle/Additive
・テクスチャー:glitter.png
Create > Material
・Material名:par_add
・Shader:Mobile/Particle/Additive
・テクスチャー:par.png
パーティクルシステムを作成する
親の空のGameObjectが1つと、ParticleSystemを4つ作成します。
eff_heal ← 空のGameObject
L glitter ← ParticleSystem
L glitter_burst ← ParticleSystem
L ring_ground ← ParticleSystem
L par_ground ← ParticleSystem
- eff_heal : 空のGameObject
- glitter : 舞い上がるキラキラ
- glitter_burst : 回復したを表す、遅れてはじけるキラキラ
- ring_ground : 地面の広がるリング
- par_ground : 地面の広がる光
i. eff_heal : 空のGameObject 詳細
- 空のGameObjectを作成する Hierarchy上で、右クリック > Create > Create Empty
- 名前をeff_healと変更する
ii. glitter : 舞い上がるキラキラ 詳細
- Transform : ParticleSystemを作成した際の初期のトランスフォーム Rotation : X -90
- Mainモジュール Duration:2.00
- Emission Rate over Time : Curve 50
- Shape Angle : 5
- Size over Lifetime time : 0, value : 0
- Renderer Material : glitter_add
![f:id:KTK_kumamoto:20180419171743j:plain f:id:KTK_kumamoto:20180419171743j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419171743.jpg)
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 f:id:KTK_kumamoto:20180419172314j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180419/20180419172314.jpg)
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 f:id:KTK_kumamoto:20180420102655j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420102655.jpg)
Radius : 1
Radius Thickness : 1
Arc : 360
![f:id:KTK_kumamoto:20180420103049j:plain f:id:KTK_kumamoto:20180420103049j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420103049.jpg)
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 f:id:KTK_kumamoto:20180420103232j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420103232.jpg)
![f:id:KTK_kumamoto:20180420103602j:plain f:id:KTK_kumamoto:20180420103602j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420103602.jpg)
iii. glitter_burst : 回復したを表す、遅れてはじけるキラキラ
- Transform : キラキラが広がる位置に少し高さを調整 Position : Z 1
- Mainモジュール Duration:2.00
- Emission Bursts
- Shape Shape : Sphere
- Limit Velocity over Lifetime Speed : Curve
- Size over Lifetime time : 0, value : 0
- Renderer Material : glitter_add
Rotation : X 0
![f:id:KTK_kumamoto:20180420103908j:plain f:id:KTK_kumamoto:20180420103908j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420103908.jpg)
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 f:id:KTK_kumamoto:20180420104717j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420104717.jpg)
Time : 1.2000
Count : 60
![f:id:KTK_kumamoto:20180420104757j:plain f:id:KTK_kumamoto:20180420104757j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420104757.jpg)
Radius : 0.5
Radius Thickness : 1
![f:id:KTK_kumamoto:20180420104814j:plain f:id:KTK_kumamoto:20180420104814j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420104814.jpg)
Speed : 2.0
time : 0, value : 1
time : 1, value : 0
![f:id:KTK_kumamoto:20180420105258j:plain f:id:KTK_kumamoto:20180420105258j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420105258.jpg)
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 f:id:KTK_kumamoto:20180420103232j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420103232.jpg)
![f:id:KTK_kumamoto:20180420103602j:plain f:id:KTK_kumamoto:20180420103602j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420103602.jpg)
iv. ring_ground : 地面の広がるリング
- Transform : 地面にめり込まないように、少しだけ浮かします Pozition Z : 0.06
- Mainモジュール Duration:2.00
- Emission Rate over Time : Curve 3
- Shape : Off
- Color over Lifetime Alpha: 255, Location: 0%
- Size over Lifetime time : 0, value : 0
- Renderer Render Mode : Horizontal Billboard
![f:id:KTK_kumamoto:20180420105902j:plain f:id:KTK_kumamoto:20180420105902j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420105902.jpg)
Start Lifetime: 1
Start Speed: 0
Start Size: 15
Start Color: #56FFFFFF
Scaling Mode: Hierarchy
![f:id:KTK_kumamoto:20180420110111j:plain f:id:KTK_kumamoto:20180420110111j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110111.jpg)
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 f:id:KTK_kumamoto:20180420110252j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110252.jpg)
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
![f:id:KTK_kumamoto:20180420110728j:plain f:id:KTK_kumamoto:20180420110728j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110728.jpg)
![f:id:KTK_kumamoto:20180420110716j:plain f:id:KTK_kumamoto:20180420110716j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110716.jpg)
time : 1, value : 1
![f:id:KTK_kumamoto:20180420110839j:plain f:id:KTK_kumamoto:20180420110839j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110839.jpg)
Material : ring_add
![f:id:KTK_kumamoto:20180420110949j:plain f:id:KTK_kumamoto:20180420110949j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110949.jpg)
v. par_ground : 地面の広がる光
- Transform : 地面にめり込まないように、少しだけ浮かします Pozition Z : 0.06
- Mainモジュール Duration:2.00
- Emission Rate over Time : Curve 3
- Shape : Off
- Color over Lifetime Alpha: 255, Location: 0%
- Size over Lifetime time : 0, value : 0.1860638
- Renderer Render Mode : Horizontal Billboard
![f:id:KTK_kumamoto:20180420111158j:plain f:id:KTK_kumamoto:20180420111158j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420111158.jpg)
Start Lifetime: 1
Start Speed: 0
Start Size: 15
Start Color: #56FFFFFF
Scaling Mode: Hierarchy
![f:id:KTK_kumamoto:20180420110111j:plain f:id:KTK_kumamoto:20180420110111j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110111.jpg)
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 f:id:KTK_kumamoto:20180420111401j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420111401.jpg)
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
![f:id:KTK_kumamoto:20180420110728j:plain f:id:KTK_kumamoto:20180420110728j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110728.jpg)
![f:id:KTK_kumamoto:20180420110716j:plain f:id:KTK_kumamoto:20180420110716j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420110716.jpg)
time : 1, value : 1
![f:id:KTK_kumamoto:20180420111558j:plain f:id:KTK_kumamoto:20180420111558j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420111558.jpg)
Material : par_add
![f:id:KTK_kumamoto:20180420111720j:plain f:id:KTK_kumamoto:20180420111720j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/K/KTK_kumamoto/20180420/20180420111720.jpg)
完成です!
今回は、テクスチャーをすべてSubstance Designerで作成しました。
長文になりましたが最後まで読んでくださいまして、ありがとうございます!
サンプルは、下記にアップしています。
eff_heal_sample.unitypackage
よかったら試してみてください!
こちらの本もよろしくお願いいたします!
![Unity ゲームエフェクト入門 Shurikenで作る! ユーザーを引き込む演出手法 (Smart Game Developer) Unity ゲームエフェクト入門 Shurikenで作る! ユーザーを引き込む演出手法 (Smart Game Developer)](https://images-fe.ssl-images-amazon.com/images/I/61RkJN-U0BL._SL160_.jpg)
Unity ゲームエフェクト入門 Shurikenで作る! ユーザーを引き込む演出手法 (Smart Game Developer)
- 作者: ktk.kumamoto
- 出版社/メーカー: 翔泳社
- 発売日: 2016/04/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る