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