ゲーム開発奮闘記

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

Unity ParticleSystem Lesson : 魔法陣（MagicCircle)

エフェクト Unity Unity Effect Tutorial

今回、魔法詠唱（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
  3. グラフが複雑なので説明は省略します
    4. 魔法陣の模様を、三角、円、ぼかした円、模様を複数組み合わせて作成します
    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
  4. magiccircle.pngで書き出し
    5. 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
  3. Shape作成：ぼかした光を作っていきます。
    4. パターン: 放物面 f:id:KTK_kumamoto:20180419161310j:plain
  4. curve作成：Shapeノードの光の領域をカーブで調整
    5. カーブ具合は、画像を参照 f:id:KTK_kumamoto:20180419161456j:plain
  5. par.pngで書き出し
    6. 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
  2. Perlin Noise作成：ノイズを元に波を作成。
    3. Scale: 7
    f:id:KTK_kumamoto:20180508134826j:plain
  3. Slope Blur Grayscale作成：
    4. Samples: 8
    強度: 10
    f:id:KTK_kumamoto:20180508135414j:plain
  4. Blur HQ Grayscale作成：
    5. 強度: 19.24
    f:id:KTK_kumamoto:20180508135511j:plain
  5. Invert Grayscale作成：反転
    6. Invert : True
    f:id:KTK_kumamoto:20180508135648j:plain
  6. Curve作成：明るさを調整
    7. Curveを編集
    f:id:KTK_kumamoto:20180508135812p:plain
  7. aura.pngで書き出し
    8. f:id:KTK_kumamoto:20180508135913p:plain:w300

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

  1. Blenderを起動
  2. Planeから形状を変えてリング状にする
    3. f:id:KTK_kumamoto:20180508140138j:plain
  3. 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が１つと、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
よかったら試してみてください！

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

Unity ゲームエフェクト入門 Shurikenで作る! ユーザーを引き込む演出手法 (Smart Game Developer)

Unity ゲームエフェクト入門 Shurikenで作る! ユーザーを引き込む演出手法 (Smart Game Developer)

ktkkumamoto.booth.pm