ゲーム開発奮闘記

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

Unity ParticleSystem Lesson:氷魔法

今回、氷魔法(アイスウォール)のエフェクト作成方法を紹介したいと思います。
f:id:KTK_kumamoto:20180201213943g:plain

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

今回は、モデルを1つとテクスチャーを4枚使います。
ⅰ.ice.fbx : 氷モデル

1.ice.png : 氷モデル用のテクスチャー
2.eff_ice_fragment.png : 氷の欠片テクスチャー
3.eff_par.png : 光テクスチャー
4.eff_smoke.png : 煙テクスチャー
※3.については、Unity ParticleSystem Lesson:爆発の記事で作成方法を紹介

※4.については、Unity ParticleSystem Lesson:舞い上がる煙の記事で作成方法を紹介

① 氷モデル

まずはテクスチャーから。

1.Substance Designer で テクスチャー作成:ice.png

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

・Crystal_2のノードから氷の模様を作っていきます。
Scale : 2
Disorder : 0.58
f:id:KTK_kumamoto:20180130212112j:plain
f:id:KTK_kumamoto:20180130212219j:plain

・トランスフォーム2Dを追加して表示領域を拡大してサイズを調整
オフセット:-0.2787
f:id:KTK_kumamoto:20180130212539j:plain
f:id:KTK_kumamoto:20180130212623j:plain
f:id:KTK_kumamoto:20180130212749j:plain

・タイリングが崩れるので、make_it_tile_photo_grayscaleでタイリングを修正
Mask Size H : 1
Mask Size V : 0.1
f:id:KTK_kumamoto:20180130212918j:plain
f:id:KTK_kumamoto:20180130213016j:plain
f:id:KTK_kumamoto:20180130213034j:plain

・見た目を少しぼかしたいのでブラーを追加
強度:3.67
f:id:KTK_kumamoto:20180130213220j:plain
f:id:KTK_kumamoto:20180130213244j:plain
f:id:KTK_kumamoto:20180130213305j:plain

・次にもう1つ別にCrystal_2を作成し、Gradient Mapで色を付ける。
Scale : 1
Disorder : 0
f:id:KTK_kumamoto:20180130213637j:plain
f:id:KTK_kumamoto:20180130212220j:plain

f:id:KTK_kumamoto:20180130213726j:plain
f:id:KTK_kumamoto:20180130213746j:plain
f:id:KTK_kumamoto:20180130213921j:plain

・作成された2つのノードを加減ブレンドします。
ブレンドモード:加減
f:id:KTK_kumamoto:20180130214059j:plain
f:id:KTK_kumamoto:20180130214119j:plain
f:id:KTK_kumamoto:20180130214138j:plain

・さらに別の模様をつけるために新たにBnw_spots_2のノイズを作成
Scale : 1
Disorder : 0
f:id:KTK_kumamoto:20180130214417j:plain
f:id:KTK_kumamoto:20180130214451j:plain

・トランスフォーム2Dノードで拡大と回転で形を調整
オフセット X : -0.0185 , Y : -0.0796
f:id:KTK_kumamoto:20180130214905j:plain
f:id:KTK_kumamoto:20180130214925j:plain
f:id:KTK_kumamoto:20180130215006j:plain

・またタイリングが崩れているので、make_it_tile_photo_grayscaleでタイリングを修正
Mask Size H : 0.1
Mask Size V : 0.1
f:id:KTK_kumamoto:20180130215235j:plain
f:id:KTK_kumamoto:20180130215331j:plain
f:id:KTK_kumamoto:20180130215354j:plain

・見た目を少しぼかしたいのでブラーを追加
強度:1
f:id:KTK_kumamoto:20180130215742j:plain
f:id:KTK_kumamoto:20180130215759j:plain
f:id:KTK_kumamoto:20180130215824j:plain

・Gradient Mapで色を付ける。
f:id:KTK_kumamoto:20180130215944j:plain
f:id:KTK_kumamoto:20180130220002j:plain
f:id:KTK_kumamoto:20180130220022j:plain

・先ほど作っていたものと乗算ブレンドします。
ブレンドモード:乗算
f:id:KTK_kumamoto:20180130220159j:plain
f:id:KTK_kumamoto:20180130220219j:plain
f:id:KTK_kumamoto:20180130220230j:plain

・明るくぼかしたいので、先ほどブレンドしたものとブラーをかけたものをScreenブレンドします。
ブラー:強度:9.25
f:id:KTK_kumamoto:20180130220401j:plainf:id:KTK_kumamoto:20180130220420j:plain
f:id:KTK_kumamoto:20180130220438j:plain

ブレンドモード:Screen
f:id:KTK_kumamoto:20180130220504j:plain
f:id:KTK_kumamoto:20180130220517j:plain

・完成です。(ice.pngで保存)
f:id:KTK_kumamoto:20180131125035p:plain

2.Blenderで モデル作成方法 : ice.fbx

・UV球を作成して、パラメーターを調整
セグメント:6
リング:6
f:id:KTK_kumamoto:20180131125057j:plain

・名前をice1に変更
f:id:KTK_kumamoto:20180131125212p:plain

・サイズや頂点の位置を修正
f:id:KTK_kumamoto:20180131125139p:plain

・ice.fbxで書き出し(今回マテリアルは、Unityで作成して割り当てます。)
f:id:KTK_kumamoto:20180131125256p:plain

PhotoShopでテクスチャー作成:eff_ice_fragment .pngの氷欠片

1.テクスチャー作成方法

・128x128 サイズで新規作成
f:id:KTK_kumamoto:20180131205952j:plain

・上下左右の中心にガイドを引く
f:id:KTK_kumamoto:20180131210357j:plain

・ペンツールで適当に氷片の形のシェイプを作成する
f:id:KTK_kumamoto:20180131210644j:plain
f:id:KTK_kumamoto:20180131210659j:plain

・背景レイヤーを非表示にして、pngで保存(eff_ice_fragment.png)
f:id:KTK_kumamoto:20180131210813j:plain
f:id:KTK_kumamoto:20180131210835j:plain

②Unityでエフェクト作成

1.Unity Material作成

Project Windowで、Create > Material
  ・Material名を「ice」と変える
  ShaderをMobile/Particle/Additiveに設定
  ①で作成した「ice .png」 テクスチャーを割り当てる。

 ・Material名を「eff_ice_fragment_add」と変える
  ShaderをMobile/Particle/Additiveに設定
  ① で作成した「eff_ice_fragment.png」 テクスチャーを割り当てる。

 ・Material名を「eff_par_add」と変える
  ShaderをMobile/Particle/Additiveに設定
  ① で作成した「eff_par.png」 テクスチャーを割り当てる。

 ・Material名を「eff_smoke_add」と変える
  ShaderをMobile/Particle/Additiveに設定
  ① で作成した「eff_smoke.png 」テクスチャーを割り当てる。

2.Unity Particle System設定

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

ParticleSystemを9つ作成します。
eff_icewall
L SmokeGround
L SmokeGround2
L ParGround
L Ice1
L Ice2
L flash1
L ice_fragment
L Ice_break


親:eff_icewallの下記が設定です。:上空から集まる冷気を表現
■ Mainモジュール
Duration:2.00
Start Lifetime: 1
Start Speed: -0.5
Start Size: 2, 3 (Random Between Tow Constants)
Start Rotation: 0, 360 (Random Between Tow Constants)
Start Color: FFFFFF32
Gravity Modifier : 0.1
f:id:KTK_kumamoto:20180131211304j:plain

■ Emission:
Rate over Time : Curve
time: 0 , value: 0
time: 0.3585358 , value: 1
time: 0.8439025 , value: 0
Rate: 20
f:id:KTK_kumamoto:20180131211347j:plain

■ Shape:
Shape: Hemisphere
Radius : 1.37
f:id:KTK_kumamoto:20180131211641j:plain

■ Color over Lifetime:
Alpha: 0, Location: 0%
Alpha: 88, Location: 33.5%
Alpha: 0, Location: 100%
f:id:KTK_kumamoto:20180131211823j:plain
f:id:KTK_kumamoto:20180131212105j:plain

■ Rotation over Lifetime
Angular Velocity : -45, 45 (Random Between Tow Constants)
■ Renderer
Material : eff_smoke_add
f:id:KTK_kumamoto:20180131212344j:plain


子:SmokeGroundの下記が設定です。
地面に集まる冷気を表現

■ Transform : 少し地面より浮かせて表示させたいので。
Position Z: 0.37
■ Mainモジュール
Duration:1.00
Start Lifetime: 1
Start Speed: -3, -2.09 (Random Between Tow Constants)
Start Size: 2, 1 (Random Between Tow Constants)
Start Rotation: 0, 360 (Random Between Tow Constants)
Start Color: FFFFFF32
f:id:KTK_kumamoto:20180131212722j:plain

■ Emission:
Rate over Time : Curve
time: 0 , value: 0
time: 0.35, value: 1
Rate: 30
f:id:KTK_kumamoto:20180131213413j:plain

■ Shape:
Shape: Cone
Angle : 90
Radius : 1.85
Radius Thickness : 1
Arc : 360
f:id:KTK_kumamoto:20180131213701j:plain

■ Color over Lifetime:
Alpha: 0, Location: 0%
Alpha: 255, Location: 33.5%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: 76DDFF, Location: 100%
f:id:KTK_kumamoto:20180131213834j:plain
f:id:KTK_kumamoto:20180131214105j:plain

■ Size over Lifetime:
time:0 value:0.5
time:1 value:1
Size : 2.0
f:id:KTK_kumamoto:20180131214208j:plain

■ Rotation over Lifetime
Angular Velocity : -45, 45 (Random Between Tow Constants)
■ Renderer
Material : eff_smoke_add
f:id:KTK_kumamoto:20180131214528j:plain


子:SmokeGround2の下記が設定です。
氷柱ができた後に地面から外へ広がる冷気を表現
※Start Delayに1を入れることで、1秒後に発生するようにしています。

■ Mainモジュール
Duration:1.20
Start Delay : 1
Start Lifetime : 1
Start Speed: 0.3, 1 (Random Between Tow Constants)
Start Size: 2, 1 (Random Between Tow Constants)
Start Rotation: 0, 360 (Random Between Tow Constants)
Start Color: FFFFFF32
■ Emission:
Rate over Time : 10
■ Shape:
Shape: Hemisphere
Radius : 0.92
Radius Thickness : 1
f:id:KTK_kumamoto:20180131214907j:plain

■ Color over Lifetime:
Alpha: 0, Location: 0%
Alpha: 255, Location: 33.5%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: BFEFFF, Location: 100%
f:id:KTK_kumamoto:20180131215431j:plain
f:id:KTK_kumamoto:20180131215607j:plain

■ Size over Lifetime:
time:0 value:0.5
time:1 value:1
Size : 2.0
f:id:KTK_kumamoto:20180131214208j:plain

■ Rotation over Lifetime
Angular Velocity : -45, 45 (Random Between Tow Constants)
■ Renderer
Material : eff_smoke_add
f:id:KTK_kumamoto:20180131214528j:plain


子:ParGroundの下記が設定です。
冷気が集まって発光する地面を表現しています。

■ Transform : 少し地面より浮かせて表示させたいので。
Position Z: 0.05
■ Mainモジュール
Duration:2.00
Start Lifetime : 2.5
Start Speed: 0
■ Emission:
Rate over Time : 0
Bursts
Time:0:00, Counts:1
f:id:KTK_kumamoto:20180201144357j:plain

■ Shape: Off
■ Color over Lifetime:
Alpha: 0, Location: 0%
Alpha: 255, Location: 52.9%
Alpha: 107, Location: 73.5%
Alpha: 0, Location: 100%
Color: FFFFFF, Location: 0%
Color: AEFFF8, Location: 100%
f:id:KTK_kumamoto:20180201144825j:plain
f:id:KTK_kumamoto:20180201145003j:plain

■ Size over Lifetime:
time :0.05853653 value: 0
time: 0.497566 value: 1
time: 1 value: 0.476
Size : 1.0
f:id:KTK_kumamoto:20180201145029j:plain

■ Renderer
Render Mode: Horizontal Billboard (Y軸方向に対してのビルボード平面)
Material : eff_par_add
f:id:KTK_kumamoto:20180201145228j:plain


子:Ice1の下記が設定です。
冷気が集まった後に、地面から飛び出すメインの太い氷柱を表現しています。

■ Transform : 氷のサイズを細長くするために。
Scale X: 0.5, Y: 0.5
■ Mainモジュール
Duration:2.00
Start Delay: 1
Start Lifetime : 1
Start Speed: 0
Start Size : 5
3D Start Rotation : ON
Z:0, 360 (Random Between Tow Constants)
■ Emission:
Rate over Time : 0
Bursts
Time:0:00, Counts:1
f:id:KTK_kumamoto:20180201164252j:plain

■ Shape: Off
■ Size over Lifetime:
time : 0 value: 0
time: 0.1435699 value: 1
Size : 1.0
f:id:KTK_kumamoto:20180201164624j:plain

■ Renderer
Render Mode: Mesh
Mesh : ice1
Material : ice
f:id:KTK_kumamoto:20180201165118j:plain


子:Ice2の下記が設定です。
冷気が集まった後に、地面から飛び出すメインの回りの小さな氷柱を表現しています。

■ Transform : 氷のサイズを細長くするために。少し位置を下げる
Position: Y: -0.115
Scale X: 0.5, Y: 0.5
■ Mainモジュール : メインの柱より少し小さい柱を5本出すように設定します。
Duration:2.00
Start Delay: 1
Start Lifetime : 1
Start Speed: 0
Start Size : 3, 4 (Random Between Tow Constants)
3D Start Rotation : ON
X: -5, 5
Y: -5 , 5
Z: 0, 360 (Random Between Tow Constants)
■ Emission: 柱を5本出すように設定します。
Rate over Time : 0
Bursts
Time:0:00, Counts:5
f:id:KTK_kumamoto:20180201170120j:plain

■ Shape
Shape : Cone
Angle : 24.5
Radius : 0.62
f:id:KTK_kumamoto:20180201170608j:plain

■ Size over Lifetime:
time : 0 value: 0
time: 0.1435699 value: 1
Size : 1.0
f:id:KTK_kumamoto:20180201164624j:plain

■ Renderer
Render Mode: Mesh
Mesh : ice1
Material : ice
f:id:KTK_kumamoto:20180201165118j:plain


子:flash1の下記が設定です。
氷柱が発生する際に、一瞬発光するフラッシュを表現しています。

■ Mainモジュール : 氷が発生するタイミングに合わせる
Duration:2.00
Start Delay: 1
Start Lifetime : 0.2
Start Speed: 0
Start Size : 3
■ Emission
Rate over Time : 0
Bursts
Time:0:00, Counts:1
f:id:KTK_kumamoto:20180201171244j:plain

■ Color over Lifetime:
Alpha: 255, Location: 0%
Alpha: 0, Location: 100%
f:id:KTK_kumamoto:20180201171415j:plain
f:id:KTK_kumamoto:20180201171536j:plain

■ Size over Lifetime:
time : 0 value : 0.5
time : 1 value : 1
Size : 2.0
f:id:KTK_kumamoto:20180201171611j:plain

■ Renderer
Material : eff_par_add
f:id:KTK_kumamoto:20180201171804j:plain


子:ice_fragmentの下記が設定です。
氷柱が出るときに、一緒に発生する小さな氷の欠片達を表現しています。

■ Mainモジュール : 氷が発生するタイミングに合わせる、初速と重力を強く入れて飛び散って消える動きを出す
Duration:2.00
Start Delay: 1
Start Lifetime : 0.5
Start Speed: 30, 5 (Random Between Tow Constants)
Start Size : 0.05, 0.1 (Random Between Tow Constants)
Start Rotation : 0.05, 0.1 (Random Between Tow Constants)
Start Color : 5ADDFFFF
Gravity Modifier : 5
■ Emission : 飛び散る氷を50個に設定
Rate over Time : 0
Bursts
Time:0:00, Counts: 50
f:id:KTK_kumamoto:20180201210535j:plain

■ Shape
Shape : Cone
Angle : 30
Radius : 0.74
Radius Thickness : 1
f:id:KTK_kumamoto:20180201211140j:plain

■ Limit Velocity over Lifetime : 減速する処理
Speed : Curve
Dampen : 0.2
time : 0 value : 1
time : 1 value : 0
Size : 1.0
f:id:KTK_kumamoto:20180201211329j:plain

■ Size over Lifetime:
time : 0 value : 0.5
time : 1 value : 1
Size : 2.0
f:id:KTK_kumamoto:20180201211704j:plain

■ Rotation over Lifetime
Angular Velocity : -45, 45 (Random Between Tow Constants)
■ Texture Sheet Animation : アトラス化したテクスチャーシートを設定。
ここでは、2 x 2 の破片テクスチャーを使用する。
Tiles : X 2, Y 2
Animation : Whole Sheet
Frame over Time : 0, 3
■ Renderer
Material : eff_ice_fragment_add
f:id:KTK_kumamoto:20180201211852j:plain


子:Ice_breakの下記が設定です。
氷柱が最後に消えるときの氷の塊を表現しています。

■ Transform : 氷柱が出来ているあたりの地面より少し上の位置に配置
Position: Z: 0.53
■ Mainモジュール : 氷柱が消えるタイミングのStart Delay : 2にする
Duration:2.00
Start Delay: 2
Start Lifetime : 0.5
Start Speed: 1
Start Size : 1.5, 1 (Random Between Tow Constants)
3D Start Rotation : ON
X: 0, 360
Y: 0, 360
Z: 0, 360 (Random Between Tow Constants)
Gravity Modifier : 1
■ Emission: 氷の欠片が8個出るように設定します。
Rate over Time : 0
Bursts
Time:0:00, Counts: 8
f:id:KTK_kumamoto:20180201212854j:plain

■ Shape : 全方位に広がるように Shape : Sphereに設定
Shape : Sphere
Radius : 0.62
f:id:KTK_kumamoto:20180201213241j:plain

■ Size over Lifetime:
time : 0.4878044 value : 1
time : 0 value : 1
Size : 1.0
f:id:KTK_kumamoto:20180201213432j:plain

■ Renderer
Render Mode: Mesh
Mesh : ice1
Material : ice
f:id:KTK_kumamoto:20180201213617j:plain

3.完成!

f:id:KTK_kumamoto:20180201213943g:plain


今回は、簡単なモデルですがBlenderで氷の塊を作りました。
長文になりましたが最後まで読んでくださいまして、ありがとうございます!

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