ゲーム開発奮闘記

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

Unity ParticleSystem Lesson:水魔法

今回、水魔法(スプラッシュ)のエフェクト作成方法を紹介したいと思います。
f:id:KTK_kumamoto:20180227100457g:plain

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

制作の流れ

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

1.イメージ絵作成

f:id:KTK_kumamoto:20180227101038p:plain

2.必要素材をリスト化

・立ち上る水柱
・地面の水波紋

今回は、モデルを2つとテクスチャーを1枚使います。

  1. water1.fbx : 舞い上がる水の板モデル
  2. water2.fbx : 水の床モデル
  3. eff_water.png : 水モデル用のテクスチャー

3.素材作成

1. 舞い上がる水の板モデル water1.fbx

Blenderを起動
・Gridを作成 ツールシェルフでパラメータをX Subdivisions : 5, Y Subdivisions : 5に設定
f:id:KTK_kumamoto:20180226141652p:plain
f:id:KTK_kumamoto:20180226141705p:plain

・オブジェクトをwater1にリネーム
f:id:KTK_kumamoto:20180226144239p:plain

・頂点を移動して縦長の楕円形に整える
f:id:KTK_kumamoto:20180226141828p:plain

・Materialを作成
f:id:KTK_kumamoto:20180226142040p:plain

・リネーム:water1_alpha
f:id:KTK_kumamoto:20180226142052p:plain

・UV展開します。(UV Unwrap > Cube Projection)
f:id:KTK_kumamoto:20180226142327p:plain

・頂点アルファを塗ります。
※頂点アルファのアドオン導入方法は、下記の記事に説明しています。
ktk-kumamoto.hatenablog.com

メッシュの縁部分を黒く塗ります。
f:id:KTK_kumamoto:20180226142650p:plain

・FBXで書き出しします。File > Export > FBX(.fbx) 名前:water1.fbx
f:id:KTK_kumamoto:20180226142933p:plain

・※追記Unityにもっていった際にサイズが小さすぎたのでEditモードでスケールを100倍します。
f:id:KTK_kumamoto:20180226150544p:plain

2. 水の床モデル water2.fbx

Blenderを起動
・Planeを作成
f:id:KTK_kumamoto:20180226153238p:plain

・オブジェクトをwater2にリネーム
f:id:KTK_kumamoto:20180226144303p:plain

・EditモードでWキーを押してSubdivideを5回繰り返してセグメントを増やす
f:id:KTK_kumamoto:20180226153425p:plain

・UV Unwrap > Unwrap ※ここで先にUV Unwrapする事が重要です!
f:id:KTK_kumamoto:20180226160942p:plain

・Z軸に90度回転
f:id:KTK_kumamoto:20180226153909p:plain

・X軸に90度回転
f:id:KTK_kumamoto:20180226155905p:plain

・Topビューに切り替えて、少し上に移動させる
f:id:KTK_kumamoto:20180226160021p:plain

・Spaceキーを押して、検索窓にWarpと入力、Transform: Warpを選択
f:id:KTK_kumamoto:20180226160209p:plain

Warp Angle : 180
f:id:KTK_kumamoto:20180226160318p:plain

・Spaceキーを押して、検索窓にWarpと入力、Transform: Warpを選択
f:id:KTK_kumamoto:20180226160631p:plain

Warp Angle : 360
f:id:KTK_kumamoto:20180226160749p:plain

・下半分の面を削除
f:id:KTK_kumamoto:20180226143400p:plain

・厚みを無くして(スケール変更でZ軸を縮小を繰り返す)、全ての頂点のZ位置を0に移動する
f:id:KTK_kumamoto:20180226143816p:plain
f:id:KTK_kumamoto:20180226143827p:plain

・Materialを作成
f:id:KTK_kumamoto:20180226142040p:plain

・リネーム:water1_alpha
f:id:KTK_kumamoto:20180226142052p:plain

・頂点アルファを塗ります。
※頂点アルファのアドオン導入方法は、下記の記事に説明しています。
ktk-kumamoto.hatenablog.com

メッシュの縁部分を黒く塗ります。
f:id:KTK_kumamoto:20180226161558p:plain

・FBXで書き出しします。File > Export > FBX(.fbx) 名前:water2.fbx
f:id:KTK_kumamoto:20180226142933p:plain

・※追記Unityにもっていった際にサイズが小さすぎたのでEditモードでwarter1.fbxと同じぐらいのサイズに大きく調整
f:id:KTK_kumamoto:20180226162244p:plain

3.eff_water.png : 水モデル用のテクスチャー

Substance Designerを起動
・新規Substance Graph :Empty
Graph Name: wingLine1
Size Mode: Absolute
Width: 512px
Height: 512px
Format: Relative to parent

・Grunge_map_002のノードから水の模様を作っていきます。
Balance : 0.27
Invert : 0.7
f:id:KTK_kumamoto:20180226164847p:plain

・指向性ブラー作成
強度:20.91
f:id:KTK_kumamoto:20180226165040p:plain

・トランスフォーム2D作成
オフセットX : 0.532
オフセットY : 0.7679
f:id:KTK_kumamoto:20180226165239p:plain

ブレンドを作成 最初のGrunge_map_002をフォアグランドに繋ぐ。トランスフォーム2Dをバックグラウンドに繋ぐ
ブレンドモード : 最大(明)
f:id:KTK_kumamoto:20180226165523p:plain

ブレンドを作成 最初のを指向性ブラーをフォアグランドに繋ぐ。上で作ったブレンドをバックグラウンドに繋ぐ
ブレンドモード :Screen
f:id:KTK_kumamoto:20180226165838p:plain

・Tile_Generatorを作成 タイリングする
X Amount : 2
Y Amount : 2
f:id:KTK_kumamoto:20180226170007p:plain

・eff_water.pngで書き出し
f:id:KTK_kumamoto:20180226170154p:plain

PhotoShopでアクションの「UnMultiply」を使用して、黒部分の情報を透明にする
※「UnMultiply」の使用方法は、下記記事にて。
ktk-kumamoto.hatenablog.com

eff_water.pngで上書き保存
f:id:KTK_kumamoto:20180226170111p:plain

4.Unityで組み立てる

Unity Material作成

Project Windowで、Create > Material
 ・Material名をwater1_addと変える
  ShaderをMobile/Particle/Additiveに設定
  2.で作成したeff_water.png テクスチャーを割り当てる。
f:id:KTK_kumamoto:20180227071232j:plain

 ・water1.fbxとwater2.fbxにBlenderから割り当てられていたマテリアルwater1_alpha
  ShaderをMobile/Particle/Additiveに設定
  2.で作成したeff_water.png テクスチャーを割り当てる。
  (一からマテリアル作成しても問題ありません!)
f:id:KTK_kumamoto:20180227071210j:plain

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

ParticleSystemを4つ作成します。
eff_splash
L splash_sub
L splash_add
L water_ground
f:id:KTK_kumamoto:20180227071706j:plain

  1. eff_splash : 厚みのある水しぶき。白よりの青
  2. splash_sub : eff_splashから追加で発生させる、量を増やすサブパーティクル
  3. splash_add : 水柱の根元に少し明るめに立ち上る加算の水柱
  4. water_ground : 地面に広がる大きめの波紋

1. eff_splashの下記が設定です。
厚みのある水しぶき。白よりの青

■ Transform : ParticleSystemを作成した際の初期のトランスフォーム
Rotation : X -90
f:id:KTK_kumamoto:20180227072334j:plain

■ Mainモジュール
Duration:1.00
Start Lifetime: 0.5
Start Speed: Random Between Tow Curves
Start Speed : 70
key : time 0, value 1
key : time 1, value 0.2786893
key : time 0, value 0.09999847
key : time 0, value 0.09999847
f:id:KTK_kumamoto:20180227073412j:plain

Start Size: 8, 5 (Random Between Tow Constants)
Start Color: Random Between Tow Gradients
1つ目:
Alpha: 0, Location: 0%
Alpha: 255, Location: 15.0%
Alpha: 255, Location: 35.3%
Alpha: 0, Location: 100%
Color: 0061FF, Location: 0%
Color: 0061FF, Location: 100%
f:id:KTK_kumamoto:20180227073131j:plain

2つ目:
Alpha: 0, Location: 0%
Alpha: 255, Location: 15.0%
Alpha: 255, Location: 50.0%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
f:id:KTK_kumamoto:20180227073302j:plain

f:id:KTK_kumamoto:20180227073437j:plain

■ Emission:
Rate over Time : 100
■ Shape:
Shape: Cone
Angle : 0
Radius : 2
Radius Thickness : 1
Arc : 360
f:id:KTK_kumamoto:20180227073911j:plain

■ Color over Lifetime:
Alpha: 255, Location: 0%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
f:id:KTK_kumamoto:20180227074113j:plain
f:id:KTK_kumamoto:20180227074133j:plain

■ Sub Emitters
Birth : splash_sub
f:id:KTK_kumamoto:20180227074227j:plain

■ Renderer
Render Mode: Mesh
Mesh : water1
Material : water1_alpha
Sort Mode : Youngest in Front
Sorting Fudge : 10
f:id:KTK_kumamoto:20180227074504j:plain


子:splash_subの下記が設定です。
eff_splashから追加で発生させる、量を増やすサブパーティクル

■ Mainモジュール
Duration : 0.1
Start Lifetime : 1
Start Speed : 0
Start Size : 2, 10 (Random Between Tow Constants)
Start Color : FFFFFFFF, 24D2FFFF (Random Between Tow Colors)
Gravity Modifier : 2
■ Emission
Rate over Time : 30
f:id:KTK_kumamoto:20180227091221p:plain

■ Shape
Shape : Cone
Angle : 33.01
Radius : 0.7
Radius Thickness : 1
Arc : 360
■ Inherit Velocity
Mode : Initial
Multiplier : 0.5, 0.78 (Random Between Tow Constants)
f:id:KTK_kumamoto:20180227091506p:plain

■ Color over Lifetime
Alpha: 0, Location: 0%
Alpha: 255, Location: 20.7%
Alpha: 255, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
f:id:KTK_kumamoto:20180227091946p:plain
f:id:KTK_kumamoto:20180227091952p:plain

■ Size over Lifetime:
time : 0 value: 0.557373
time: 1 value: 1
Size : 1.0
f:id:KTK_kumamoto:20180227100148p:plain

■ Rotation over Lifetime
Angular Velocity : -45, 45 (Random Between Tow Constants)
■ Renderer
Render Mode: Mesh
Mesh : water1
Material : water1_alpha
Sort Mode : Oldest in Front
Sorting Fudge : 0
f:id:KTK_kumamoto:20180227092358p:plain

子:splash_subの下記が設定です。
eff_splashから追加で発生させる、量を増やすサブパーティクル

■ Transform : メッシュを少し縦に伸ばしたいので、Scale Y:2とします。
f:id:KTK_kumamoto:20180227094209p:plain

■ Mainモジュール
Duration : 1.8
Start Lifetime : Curve
Start Lifetime : 0.50
tme : 0 , value : 1
tme : 1 , value : 0.3825073
f:id:KTK_kumamoto:20180227092750p:plain

Start Speed : Random Between two Curves
Start Speed : 40
tme : 0 , value : 1
tme : 1 , value : 1
tme : 0 , value : 0.2878113
tme : 1 , value : 0.2878113
f:id:KTK_kumamoto:20180227093002p:plain

Start Size : Random Between two Curves
Start Size : 6
tme : 0.5454545, value : 1
tme : 1 , value : 0.1475403
tme : 0.5454545, value : 0.8087463
tme : 1 , value : 0
f:id:KTK_kumamoto:20180227093147p:plain

Start Color : Random Color
Alpha: 255, Location: 0%
Alpha: 255, Location: 100%
Color: 727FFF, Location: 0%
Color: 00FFF4, Location: 100%
f:id:KTK_kumamoto:20180227093344p:plain

f:id:KTK_kumamoto:20180227093407p:plain

■ Emission
Rate over Time : Curve 100
tme : 0, value : 1
tme : 1 , value : 0
f:id:KTK_kumamoto:20180227093657p:plain

■ Shape
Shape : Cone
Angle : 33.01
Radius : 0.7
Radius Thickness : 1
Arc : 360
f:id:KTK_kumamoto:20180227093711p:plain

■ Color over Lifetime
Alpha: 0, Location: 0%
Alpha: 255, Location: 20.7%
Alpha: 255, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
f:id:KTK_kumamoto:20180227091946p:plain
f:id:KTK_kumamoto:20180227091952p:plain

■ Renderer
Render Mode: Mesh
Mesh : water1
Material : water1_alpha
Sort Mode : None
Sorting Fudge : -50
f:id:KTK_kumamoto:20180227093903p:plain

子:water_ground の下記が設定です。
地面に広がる大きめの波紋

■ Transform : 地面にめり込まないように少し浮かせる
Positon Z : 0.01
f:id:KTK_kumamoto:20180227094340p:plain

■ Mainモジュール
Duration : 1.5
Start Lifetime : Curve
Start Lifetime : 1.0
tme : 0 , value : 0.5081944
tme : 1 , value : 1
f:id:KTK_kumamoto:20180227095125p:plain

Start Speed : 0
Start Size : 10
Start Rotation : 0, 360 (Random Between Tow Constants)
Start Color : Gradient
Alpha: 255, Location: 24.1%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: 8EFFFA, Location: 100%
f:id:KTK_kumamoto:20180227095408p:plain

f:id:KTK_kumamoto:20180227095425p:plain

■ Emission
Rate over Time : 40
Bursts : Time : 0.00, Count : 1
Bursts : Time : 0.01, Count : 1
Bursts : Time : 0.02, Count : 1
f:id:KTK_kumamoto:20180227095703p:plain

■ Color over Lifetime
Alpha: 255, Location: 50.0%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: FFFFFF, Location: 100%
f:id:KTK_kumamoto:20180227095853p:plain
f:id:KTK_kumamoto:20180227095904p:plain

■ Size over Lifetime:
time : 0 value: 0
time: 1 value: 1
Size : 1.0
f:id:KTK_kumamoto:20180227100209p:plain

■ Renderer
Render Mode: Mesh
Mesh : water2
Material : water1_alpha
Sort Mode : Oldest in Front
Sorting Fudge : -10
f:id:KTK_kumamoto:20180227100345p:plain


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

今回は、Blenderで頂点アルファを使用したモデルを作成しました。
長文になりましたが最後まで読んでくださいまして、ありがとうございます!

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