ゲーム開発奮闘記

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

Unity ParticleSystem Lesson : 魔法陣(MagicCircle)

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

f:id:KTK_kumamoto:20180501202211g:plain

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

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

1.イメージ絵作成

地面から舞い上がる光の粒

地面に瞬く魔法陣

地面のオーラ

f:id:KTK_kumamoto:20180425112548j:plain


2.必要素材をリスト化

ここでは、下記の要素で組み立てることにします。
  1. 舞い上がる光の粒
  2. 地面の広がる回転する魔法陣
  3. 地面の広がる光
  4. 地面に広がるオーラ

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

  1. 魔法陣テクスチャー:magiccircle.png
  2. 光テクスチャー:par.png
  3. オーラテクスチャー:aura.png
  4. オーラモデル:aura.fbx


3.素材作成

  1. 魔法陣テクスチャー:magiccircle.png
  2. 光テクスチャー:par.png
  3. オーラテクスチャー:aura.png
  4. オーラモデル:aura.fbx

i. 魔法陣テクスチャー:magiccircle.png

  1. Substance Designerを起動
  2. 新規Substance Graph :Empty
  3.  Graph Name: magiccricle
     Size Mode: Absolute
     Width: 1024px
     Height: 1024px
     Format: Relative to parent
  4. グラフが複雑なので説明は省略します
  5. 魔法陣の模様を、三角、円、ぼかした円、模様を複数組み合わせて作成します
    f:id:KTK_kumamoto:20180507171403j:plain:w500 f:id:KTK_kumamoto:20180507171450j:plain:w500 f:id:KTK_kumamoto:20180507171517j:plain:w500 f:id:KTK_kumamoto:20180507171537j:plain:w500 f:id:KTK_kumamoto:20180507171554j:plain:w500 f:id:KTK_kumamoto:20180507171611j:plain:w500
  6. magiccircle.pngで書き出し
  7. f:id:KTK_kumamoto:20180507172012p: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. 新規Substance Graph :Empty
  2.  Graph Name: aura  Size Mode: Absolute  Width: 1024px  Height: 1024px  Format: Relative to parent
  3. Perlin Noise作成:ノイズを元に波を作成。
  4. Scale: 7
    f:id:KTK_kumamoto:20180508134826j:plain
  5. Slope Blur Grayscale作成:
  6. Samples: 8
    強度: 10
    f:id:KTK_kumamoto:20180508135414j:plain
  7. Blur HQ Grayscale作成:
  8. 強度: 19.24
    f:id:KTK_kumamoto:20180508135511j:plain
  9. Invert Grayscale作成:反転
  10. Invert : True
    f:id:KTK_kumamoto:20180508135648j:plain
  11. Curve作成:明るさを調整
  12. Curveを編集
    f:id:KTK_kumamoto:20180508135812p:plain
  13. aura.pngで書き出し
  14. f:id:KTK_kumamoto:20180508135913p:plain:w300

iv. オーラモデル:aura.fbx

  1. Blenderを起動
  2. Planeから形状を変えてリング状にする
  3. f:id:KTK_kumamoto:20180508140138j:plain
  4. aura.fbxで書き出し


4.Unityで組み立てる

Unity Material作成

Create > Material
 ・Material名:magiccircle_add
 ・Shader:Mobile/Particle/Additive
 ・テクスチャー:magiccircle.png
f:id:KTK_kumamoto:20180508140916j: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:20180508140849j:plain

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

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

eff_magiccircle ← 空のGameObject
 L par_up ← ParticleSystem
  L magiccircle_ground ← ParticleSystem
  L par_ground ← ParticleSystem
  L aura_ground ← ParticleSystem

f:id:KTK_kumamoto:20180508141055j:plain

  1. eff_magiccircle : 空のGameObject
  2. par_up : 舞い上がる光の粒
  3. magiccircle_ground: 地面に出現する魔法陣
  4. par_ground : 地面の広がる光
  5. aura_ground : 地面の広がるオーラ

i. eff_magiccircle : 空のGameObject 詳細

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


ii. par_up : 舞い上がる光の粒

  • Transform : ParticleSystemを作成した際の初期のトランスフォーム
  • Rotation : X -90
    f:id:KTK_kumamoto:20180508141544j:plain
  • Mainモジュール
  • Start Lifetime: 1, 2
    Start Speed: 0
    Start Size: 0.1, 0.2
    Start Color: #C556FFFF
    Gravity Modifier: 0, -0.2
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180508143451j:plain
  • Emission
  • Rate over Time : 20
    Bursts Count: 10
    f:id:KTK_kumamoto:20180508141817j:plain
  • Shape
  • Shape: Cone
    Angle: 0
    Radius: 1
    Radius Thickness: 1
    Arc: 360
    Length: 0.58
    Emit from: Volume
    f:id:KTK_kumamoto:20180508141941j:plain
  • 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:20180508142139j:plain
  • Renderer
  • Material : par_add
    f:id:KTK_kumamoto:20180508142227j:plain


iii. magiccircle_ground: 地面に出現する魔法陣

  • Transform : 地面にめり込まないように少し浮かせる調整
  • Position : Z 0.06
    Rotation : X 0
    f:id:KTK_kumamoto:20180508142511j:plain
  • Mainモジュール
  • Start Lifetime: 2
    Start Speed: 0
    Start Size: 5
    Start Rotation: 0, 360
    Start Color: #C556FFFF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180508143651j:plain
  • Emission
  • Rate over Time : 1
    Bursts Count: 1
    f:id:KTK_kumamoto:20180508142843j: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:20180508143011j:plain f:id:KTK_kumamoto:20180508143117j:plain
  • Rotation over Lifetime
  • Angular Velocity: 60
    f:id:KTK_kumamoto:20180508143738j:plain
  • Renderer
  • Render Mode: Horizontal Billboard
    Material : magiccircle_add
    f:id:KTK_kumamoto:20180508143859j:plain

v. par_ground : 地面の広がる光

  • Transform : 地面にめり込まないように、少しだけ浮かします
  • Pozition Z : 0.06
    f:id:KTK_kumamoto:20180420111158j:plain
  • Mainモジュール
  • Duration:5.00
    Start Lifetime: 1
    Start Speed: 0
    Start Size: 15
    Start Color: #C556FF32
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180508144217j: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. aura_ground : 地面の広がるオーラ

  • Transform : 地面にめり込まないように、少しだけ浮かします
  • Pozition Z : 0.06
    f:id:KTK_kumamoto:20180508144916j:plain
  • Mainモジュール
  • Start Lifetime: 2
    Start Speed: 0
    Start Size: 1.75, 2
    Start Color: #C556FFFF
    Scaling Mode: Hierarchy
    f:id:KTK_kumamoto:20180508145052j:plain
  • Emission
  • Rate over Time : 2
    Bursts Count: 1
    f:id:KTK_kumamoto:20180508145205j:plain
  • Shape : Off
  • Color over Lifetime
  • Alpha: 0, Location: 0%
    Alpha: 100, Location: 50%
    Alpha: 0, Location: 100%
    Color: FFFFFF, Location: 0%
    Color: FFFFFF, Location: 100%
    f:id:KTK_kumamoto:20180508145349j:plain f:id:KTK_kumamoto:20180508145336j:plain
  • Size over Lifetime
  • Size X : 1.5
    time : 0, value : 0.2531646
    time : 1, value : 1
    f:id:KTK_kumamoto:20180424130340j:plain
  • Renderer
  • Render Mode : Mesh
    Mesh : aura
    Material : aura_add
    Render Alignment : Local
    f:id:KTK_kumamoto:20180508145533j:plain
  • UVScroll(自作スクリプト)のコンポーネントを追加
  • Scroll Speed_u: -0.1
    Scroll Speed_v: -0.4
    f:id:KTK_kumamoto:20180508145706j:plain

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

今回は、Blenderでモデルの作成とスクリプトによるUVアニメを作成しました。
テクスチャーについてもすべてSubstance Designerで作成しました。
長文になりましたが最後まで読んでくださいまして、ありがとうございます!

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

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

ktkkumamoto.booth.pm