【Unity道場】エフェクト実践編

Transcript

1. 【Unity道場】 パーティクルエフェクト実践編 -ヒットエフェクト制作ブレイクダウン- 株式会社アグニフレア 下澤章吾 1
2. 本日の流れ • 会社概要、自己紹介 • ヒットエフェクト制作のブレイクダウン • まとめ • 告知 • Q&A 2
3. 会社概要 • 株式会社アグニ・フレア – エフェクトデザイナーを増やそうとしてます 3
4. 自己紹介 • アグニ・フレアでエフェクトデザイナーをやって ます 4
5. ヒットエフェクト制作のブレイクダウン 5
6. 想定している対象者 • 前回のパーティクル講座を把握している方 – 【2/21Unity道場】パーティクル講座 by unitydojo – https://speakerdeck.com/unitydojo/21unitydao- chang-pateikurujiang-zuo • 実際にどのようにエフェクト制作を進めるか、い まいちピンとこない方 • Unityでのエフェクト制作初心者、興味がある方 6
7. (参考用データ) • 動画 – ポイントごとの確認用動画です – https://youtu.be/FcaSq49EwOk • アセットデータ – ヒットエフェクトプロトタイプ版(発展編前のものです) – Stretched billboard確認用 – https://www.dropbox.com/s/cwgr2mld1vu20y2/unity dojo_170128_sample.unitypackage?dl=0 7
8. とっかかりとしての ヒットエフェクト制作のススメ • 尺が短い(1秒もかからない) – 作るのに必要な時間が比較的少ない – 再生してすぐその場で確認できる – 作成と並行してツールを覚えるのに最適 • ゲームの仕組みがまだ整っていなくてもUnity環境だけで制作でき る • 殆どのゲームで必要とされる – 先行事例も豊富、調べやすい • (奥深さもある) – 開発プロセスの中で随時調整が必要、ゲームと密接に結びつく部分 8
9. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なアセットを用意する 4. Unityで編集する 9
10. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なアセットを用意する 4. Unityで編集する 10
11. 1. イメージを想定する • これから作るエフェクトの方向性(アイディア、発想)を策定する – 実は最も大事、エフェクト制作の核 – 正解は無い(最適はある) • どんな動きかを具体的に考えるのが大事 – 紙と鉛筆でラフにササッと描く – Flash、photoshopなどで色味含めて描く – 動画(リファレンス)を探す • 慣れていなければ、まずは既存のゲームを参考にするのも手 • (ツール上で作りながら考える) – 経験者よりの方法(ただし詰まったら紙上で考える) – プロジェクト中盤以降は蓄積されたアセットから組み合わせる、など 11
12. 1. イメージを想定する • RoughAnimator(iOS・android) – iPad proとapple pencilでラフに動きを作成、確認 するのに結構便利 12
13. 1. イメージを想定する • 今回はよくありそうなヒットエフェクト、というイメー ジを考えました 13
14. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なアセットを用意する 4. Unityで編集する 14
15. 2. 要素に分解する • イメージがいくつの要素で構成さ れているか書き出す 1. 中心発光 2. リング 3. グロウ 4. 細い集中線 5. 小さい粒子 6. 衝撃 15
16. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なアセットを用意する 4. Unityで編集する 16
17. 3. 要素毎に必要なアセットを用意する • Unityにimportするためのリソー ス(テクスチャ)を一つずつ仕込む – Phoshop/AfterEffectsなどのツール を利用する – アセットストアを利用する 17
18. ① 中心の発光 • ヒットした場所を示す ための光の要素 • Optical Flaresを利用 18
19. いきなりプラグイン？ 19
20. 結構プラグイン役に立つ • 経験的にプラグイン利用が品質、時間のコストパ フォーマンスが良い • レンズフレア系のプラグイン – Optical flares(VIDEO COPILOT社) • AfterEffects用 – Knoll Lightfactory(Red Giant社) • Photoshop、AE両方で使用可能 • モチロンPhotoshopなどで自作する手も – 望みの結果が得られれば大丈夫 20
21. ② リング • 中心から広がって衝撃の速 さを出す要素 – AE、PSなどの基本的な操作 経験があれば容易に作成で きるそう 21
22. • 線幅細目で用意 • 少しグロウさせて おく ② リング 22
23. ③ グロウ • エフェクト全体に発光感 を加えるための要素 • ボケ幅の広い円形のテク スチャを用意 – 中心から距離が離れると 下がる輝度の割合に注 意して調整する – ボケの一番低い輝度が テクスチャ端になっている のがベスト 23
24. ④ 細い集中線 • AEでフラクタルノイズ→極座標で作成 24
25. • 輪郭を少しばらつかせておく – きれいな円形でくりぬかれたように見えないよう に ④ 細い集中線 25
26. ⑤ 小さい粒子 • リングやグロウのバリエーション で作成 – 一定範囲塗りつぶした円をグロウ させたもの – テクスチャ端ギリギリでグロウのボ ケ幅が終わるようにする 26
27. ⑤ 小さい粒子 • 無駄なテクスチャ領域が 無いように注意 – 赤領域が無駄 • 見た目には影響ないのに 描画処理のための負荷は かかっている • モバイルでは特に気を付け るところ NG例 27
28. ⑥ 衝撃 • 細い集中線と同様に – フラクタルノイズとタービュ レントディスプレイスで細い 縦線を重ねたような絵に – 複製して中央付近が濃くな るように重ねる 28
29. ⑥ 衝撃 • CC Power Pinで扇形状に変形 • 90度回転しておく(理由は後述) 29
30. 以上でリソースの用意はひと段落 30
31. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なアセットを用意する 4. Unityで編集する 31
32. Unityで編集する • 作成したテクスチャアセットを Unityへ読み込む • 各テクスチャごとにマテリアルを 作成する • Shaderはとりあえず2つ – 加算はMobile/Particle/Additive – 半透明は Mobile/Particle/Additive – を使用する – (その他のshaderは後で把握し ておきましょう) 32
33. 制作するにあたって抑えておくところ • Syuriken用ショートカットキー • HieralchyでParticle Systemを選択状態で 「.」(ピリオド)…停止 「,」(カンマ)…再生/一時停止 「m」…コマ送り 「n」…コマ戻し • 「.」→「,」その場で何度も再生 • 「.」→「m」その場で何度もコマ送り 知ってお きたい ポイント 33
34. 制作するにあたって抑えておくところ • サイズ感の分かる物を用意する – 可能なら最初にスケールのテンプレートになるものを用意 – 後で調整はできるものの、後々尾を引く手間を生むことが ある 34
35. ① 中心の発光 • ヒットエフェクト中心で 発光させる – きらっと光って消える光 を作成する • 1shot(1回再生用)のパーティクルはBurstsで制御 • shapeモジュールをオフにすると原点に生成 • Max Particle Sizeはdefaultで0.5になっているので注意 知ってお きたい ポイント 35
36. ① 中心の発光 • 輝度のあるものを消 すときは、色相の変 化で消すと自然 – 輝度の高い部分がそ のままアルファフェー ドで消えないように NG例 36
37. ② リング • 衝撃で広がるリング – 拡縮のタメツメに気を付 けて、余韻がつくように • 2つ以上のParticlesystemを同時プレビューするには親子構造を組む • Rendererモジュールをオフにすると一時的に非表示にできる 知ってお きたい ポイント 37
38. ③ グロウ • 発生後収縮する動 きをつける • Particlesystemのカーブの縦軸値はEnterで変更できる • キーフレームを選択した状態でEnterで数値入力ができる • カーブをクリックすることで編集画面表示のon/offができる 知ってお きたい ポイント 38
39. ④ 細い放射線 • 衝撃で一気に広がる 放射線 – ここまで作成した要 素と同様 39
40. • パッと飛び散る粒子 – 速度、大きさ、寿命に ばらつきを持たせる ⑤ 小さい粒子 40
41. • 作成前に、Stretched billboardの仕組みを確認 • 新規にParticlesystemを２つ作成し、片方をデフォルトのまま、もう 片方はrendererをstrechedbillboardにする • ２つのParticleSystemのランダム出現を同期させるには、Auto Random Seedのチェックを外し、任意の同じseed値を指定する • stretchedbillboardには方向性の分かるテクスチャをアサイン ⑥ 衝撃 41 • Seed値を直接指定するとランダムを固定化できる 知ってお きたい ポイント
42. • 進行方向とテクスチャの向 きを確認する – 赤い矢印方向が進行方向 – テクスチャを90度回転させ た理由はコレ ⑥ 衝撃 • デフォルトでは進行方向後ろに伸びる • Stretched billboardのlengthにはマイナスを入れられる 知ってお きたい ポイント 42
43. • 方向性を持った衝撃 を放射状に散らせる – Stretchedbillboardの 仕組みを把握できて いれば比較的容易な はず ⑥ 衝撃 43
44. 完成 • すべての要素のバラ ンスを確認する – 当初のイメージと比較 するとどうか • 可能であればキャラ ののけぞりモーション と合わせて確認する 44
45. ここまでで、完成、としてもよいのですが、、、 45
46. もうちょっとだけ、手を入れてみましょう 46
47. ヒットエフェクトを発展させる 47
48. ヒットエフェクトを発展させる 1. 衝撃の動きにディテールをつける 2. 光の動きを立体的に 3. 明るい背景への対応 48
49. • どうしても動きが欲しい – 連番テクスチャの出番 • 連番テクスチャをどう作成するか – 今回はAEのプラグイン、 particular(trapcode社)を使用 – 手描きで作成する場合 • 癖のないテクスチャを描く必要あり • 同時に複数枚出たときに、絵の特徴が 悪目立ちしないように 1. 衝撃の動きにディテールをつける 49
50. • Particularで後ろに尾 を引いて噴出する軌 跡を作成 – 中心に近いほど密度 高く、最後まで残るよう にする • CC Power Pin(標準) で 扇形に変形 1. 衝撃の動きにディテールをつける 50
51. • タイムリマップで任意のフ レームを選択して、必要な 枚数をレンダリングする – テクスチャ縦横の長さは2 のべき乗なので、２枚か４ 枚か８枚か、、、 – 今回は8枚用意 • レンダリングする手前で90 度回転して進行方向を右 方向にしておく 1. 衝撃の動きにディテールをつける 51
52. • Texture Pakcerなどで アトラス化する – 連番を既定順序で1 枚のテクスチャにした もの – ただ並べるだけなら Basicの機能だけで可 能 1. 衝撃の動きにディテールをつける 52
53. • 衝撃の要素でTexture Sheet Animationを有効にする • テクスチャシートと寿命の設定 – 1コマを何秒見せたいかで寿命を 算出 • 30fpsでは1フレーム=0.033…秒 – 1コマ1フレームで見せる場合、8 コマで8フレーム=0.266…秒 – 最後のコマを余韻で残すことを考 慮して、0.3秒に設定 – 1コマを3フレーム(約0.1秒)以上 見せると絵が変化しない時間が 長すぎて悪目立ちする感あり 1. 衝撃の動きにディテールをつける 53
54. 1. 衝撃の動きにディテールをつける • さらに、パーティクルから パーティクルを出して、衝 撃の方向を継承した粒を 飛ばす – 新規にparticlesystemを 作成し、粒のマテリアル を割り当てる – 衝撃のparticlesystemの subemitterに指定する • shapeモジュールを展開しているとshapeの形状が描画される 知ってお きたい ポイント 54
55. 1. 衝撃の動きにディテールをつける • 衝撃の連番アニメー ションとなじむように カラーやサイズを調 整する • Subemitterの機能 知ってお きたい ポイント 55 ＋ →
56. 1. 衝撃の動きにディテールをつける • 関連性が生まれ、より一体感が出てくる • 消え際の余韻として出せるので、より自然な 衝撃に → 56
57. 2. 光の動きを立体的に • ビルボードにテクスチャを貼って動かしている、という 見た目を緩和させたい • Stretched billboardで光の筋を追加 ＋ → 57
58. 3. 明るい背景への対応 • 明るい背景上でも半透明を下に敷いて色味を担保する – 個人的に座布団と呼んでいます • Sortingfudgeの概念と設定(位置が同一の時どちらを先に描画するか) 知ってお きたい ポイント ＋ → 58
59. ヒットエフェクトを発展させた • ディテール追加、色味の担保 59 →
60. 完成！ 60
61. と、思っていたところ、 61
62. ヒットエフェクトあるある • 例えば、現場で、今のヒットエフェクトをベース に、属性をつけてほしいというような相談が来 たとします 62
63. ヒットエフェクトを さらに 発展させる 63
64. • 最後に雷属性の攻撃がヒットしたら、というバ リエーションを制作してみます – これまでに作ったヒット＋属性効果(雷)という構成 ヒットエフェクトに電撃属性を付加する 64
65. • ヒットの周囲に電撃効果のお知らせを付加 – 球モデルに雷状のテクスチャをアサイン – メッシュはUnity付属のsphereを指定 ＋ → ヒットエフェクトに電撃属性を付加する 65
66. • テクスチャの作り方補足 – 一条の雷をつくる→任意にスクロール(オフセット)→間 をつなぐ – を3回繰り返し → → ヒットエフェクトに電撃属性を付加する →…→ 66
67. ヒットエフェクトに電撃属性を付加する • このままだとヒット中心付近 が重なりすぎているので、、、 – 外縁だけに雷を描画するよう にしたい • フォールオフ機能のシェー ダーが欲しい – カメラの視線方向とメッシュの 法線方向の傾きに応じて、透 明度を変更する（右下図） 67
68. ヒットエフェクトに電撃属性を付加する • ShaderForgeで フォールオフの 機能を持った shaderを用意 – Frenelを利用 68
69. • 中心のヒット要素はそのままに、周囲に雷の 要素を配置できた → ヒットエフェクトに電撃属性を付加する 69
70. • さらに、外縁に雷の動きを追加する – 弧状のメッシュと雷の連番テクスチャを用意 – ランダムに回しても偏りにくいメッシュにしておく ヒットエフェクトに電撃属性を付加する ＋ → 70
71. • テクスチャ作成補足 – Particularを使用して、一筋の軌跡を作 成 – 複製して、全く同じ動きで余韻で長く残 る軌跡を作成 – 二つを重ねてタービュレントディスプレイ スを適用 – タイムリマップで必要なフレームを取捨 選択(ここでは8枚分) • もし手描きで作成する場合は – 一筋の稲妻を先に描く(3コマ目) – 複製して末端から消す、を繰り返して雷 ができるまでを作成(1,2コマ目) – 複製して始点から消す、を繰り返して雷 の消えるまでを作成(4から8コマ目) ヒットエフェクトに電撃属性を付加する ＋ → 71
72. • メッシュ作成補足 – Z方向に細かく分割した板ポリを十字に組み合わせる – Z方向にスケールをかけ、bendでY軸を中心に90度曲げる – 複製して、互い違いになるように配置 ヒットエフェクトに電撃属性を付加する → → → 72
73. • 弧状の雷をランダムに出してまとわせる – 先ほどのフォールオフマテリアルを使用 • 角度によってメッシュの縁が見えてしまうのを防ぐ – 消え際に補色を入れておく(雷の余韻) ヒットエフェクトに電撃属性を付加する 73
74. • さらに、中心から飛び出す放射状の雷を追加す る – 弧状の雷と同じく、ランダムに回しても偏りにくいメッ シュに ヒットエフェクトに電撃属性を付加する ＋ → 74
75. • 完成 ヒットエフェクトに電撃属性を付加する 75
76. まとめ 76
77. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なア セットを用意する 4. Unityで編集する 77
78. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 要素毎に必要なア セットを用意する 4. Unityで編集する 78 と、書きましたが 実は
79. ヒットエフェクト制作のブレイクダウン 1. イメージを想定する 2. 要素に分解する 3. 各要素をどの手段で表現するか考える 4. 要素毎に必要なアセットを用意する 5. Unityで編集する 79 間にこれが入ります
80. 各要素をどの手段で表現するか考える • 今回出てきた要素はすべて下記の組み合わせ – ビルボードで表現する – 軸ビルボードで表現する – テクスチャパターンを利用して表現する – 親パーティクルから子パーティクルを出して表現する – モデルUVパターンで表現する – フォールオフ機能を持ったシェーダーを利用して表現する • 制作環境にどんな機能があるかを把握しておくことが大事 – そこから逆算して必要なリソースを制作するので 80
81. もしスキルアップを目指すなら • 実際にイメージ、要素分解、作成方法の検討、実制作のフローを 自覚的に辿ることで、次の一歩につながると思います • 例)「ヒットエフェクトを発展させる」以降の流れをオリジナルに作成 してみる – 今回の発展させる手前までのヒットエフェクトデータを元に進めてみま しょう – よくある候補 • クリティカルヒットしたらどうなるか、、、 • 属性を持たせたい(炎、氷、斬撃、打撃、etc) • 小ヒット、中ヒット、大ヒットのバリエーションがほしい 81
82. ヒットエフェクト以外はどうなっている のか気になる方は…… • 具体的な26作例 – ツールは違えど、どの作例 もこれまで紹介したアプロー チのどれかです – (Unity用にも2作例あります) – Kindle版もあります 82
83. 告知 83
84. 人材＋お仕事募集 • エフェクト制作に興味のある方 • エフェクト制作のお仕事がある方 • http://agni-flare.com/ 84
85. Q&A 85