---
title: 高品質なエフェクトのためのエディター機能とワークフロー紹介
tags:  #capcom #r&amp;d #カプコン #カプコン技研 #re engine #re:2023 #capcom open conference professional #カプコンオープンカンファレンス プロフェッショナル #re2023capcom  
author: [カプコン技研](https://convert.docswell.com/user/CAPCOM_RandD)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4EZVW6DMJ3.jpg?width=480
description: ■概要 剣を振ると出てくる残像、ドラム缶を破壊すると出てくる爆炎、気を練り上げると出てくる波動拳...そういった「エフェクト」と呼ばれるものがどうやって作られどうやってゲーム中に実装されるのか、RE ENGINEが提供しているエフェクトエディターを用い、アセットの作成/提供機能/プロファイリングツール/実際のタイトルワークフローご紹介いたします。  ※CAPCOM Open Conference Professional RE:2023 で公開された動画を一部改変してスライド化しております。  ■想定スキル エフェクト作成に興味のあるアーティスト または 連携方法に興味のあるプログラマーの方向け  詳細は下記公式サイトをご確認ください。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CAPCOM Open Conference Professional RE:2023 https://www.capcom-games.com/coc/2023/  カプコンR&amp;Dの最新情報は公式Twitterをチェック！ https://twitter.com/capcom_randd ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
published: November 27, 23
canonical: https://convert.docswell.com/s/CAPCOM_RandD/Z8GQ31-RE2023
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4EZVW6DMJ3.jpg)

高品質なエフェクトのための
エディター機能とワークフロー紹介
それでは、高品質なエフェクトのためのエディター機能とワークフロー紹介の講演をさせていただきます。
©CAPCOM
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/Y765G215EV.jpg)

エフェクト機能紹介
・エディター機能の解説
・表現機能と効果の解説
・タイトル連携ワークフロー
・最適化対応
講演に関するアジェンダは以下の通りです。
エディター機能の解説
表現機能と効果の解説
タイトル連携ワークフロー
最適化対応
2
この４つの内容をご紹介します。
©CAPCOM
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/G75YV24G74.jpg)

エディター機能の解説
まずエフェクトアセットがどのように作られるか、エディターの機能を交えて解説します。
3
©CAPCOM
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/9J2G34VDJR.jpg)

エディター機能の解説
これがRE ENGINE上で動作するエフェクトエディターです。
表現を形作るエフェクトアセットを、このエディターで作成します。
画面真ん中に見える領域は、ノードを管理するエディターです。
4
画面上側に見える領域は、エディターの各種コマンドや設定を備えています。
画面左側に見える領域は、表現を作るために必要な機能のカタログです。
画面下側に見える領域は、一部パラメーターをTimelineで管理するエディターです。
©CAPCOM
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/DEYV1M3MEM.jpg)

エディター機能の解説
カタログからEmitterノードにアイテムをD&amp;Dすることで機能の追加をすることが可能です。
アイテムというのは表現を作るのに必要な機能の名称です。
©CAPCOM
5
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJNM2WV378.jpg)

エディター機能の解説
ここからは表現を構成する基本的な機能について説明します。
Transformは、Emitterの姿勢を制御するアイテムです。
Game ObjectやJointなどグローバルなTransformに対してローカルなTransformを定義します。
6
Transformの座標、回転、拡縮はマニュピレーターで制御が可能です。
Parent Optionsは前述したGame ObjectやJointの姿勢に追従するための設定になります。
©CAPCOM
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YE9N1X6PE3.jpg)

エディター機能の解説
Spawn アイテムはパーティクルの発生に関する設定を行います。
パーティクルのバッファや発生数、発生間隔やループ回数を設定することが可能です。
7
Life アイテムはパーティクルの生存時間に関する設定を行います。
Appear, Keep, Vanish という生存時間の区間が設けられており、それぞれα値に影響します。
©CAPCOM
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GE8K42ZX7D.jpg)

エディター機能の解説
EmitterShape3D アイテムはパーティクルの発生範囲に関する設定を行います。
形状は３つ用意されており、Cylinder、Box, Sphereを選ぶことが可能です。
8
ベーシックな発生方法だと、これで事足りますが、幾何学的な形状や範囲で発生させるアイテムは別で用意されています。
©CAPCOM
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LELZ62DNJR.jpg)

エディター機能の解説
Velocity3D アイテムはパーティクルの移動に関する設定を行います。
単純な方向を指定する移動から、前述したEmitterShape3Dの形状と連動した発生方法が設定できます。
9
発生形状と移動パターンは密接に関係しており、要望によって連動するような仕組みが取り入れられています。
©CAPCOM
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JMV58PQJW.jpg)

エディター機能の解説
TypeBillboard アイテムは描画に関する設定を行います。
BlendTypeは複数存在し、作る表現によって切り替えます。
左の映像がAddContrastによる加算ブレンドです。
右の映像が輪郭を特定の色でブレンドするEdgeBlendです。
10
EdgeBlendはアーティストが実現したい表現のために実装されました。
©CAPCOM
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJR2351KE9.jpg)

エディター機能の解説
ただ、用意するBlendTypeの表現だけではアーティストは満足できない場合があります。
そこでアーティストが作成するシェーダー及びマテリアルで描画する TypeBillboard3DMaterial アイテムも実装されています。
11
ビルボード以外にも、マテリアルで描画できるアイテムは数多く用意されています。
©CAPCOM
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PEXD4KY57X.jpg)

エディター機能の解説
UVSeuqnece アイテムは、Texture及びパターンアニメーションに関する設定を行います。
UVSequenceAssetというTextureとUVパターンを管理している別アセットが存在しており、
このアセットを設定して表現を切り替えます。
©CAPCOM
12
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/3EKXZ53R7D.jpg)

エディター機能の解説
火の玉が地面に落ちたら、火花を散らせる。
そんな表現を実現するためにActionという機能が存在します。
ActionはParticleからEmitterを生成する機能です。
特定のアイテムからActionノードへ接続及び通知されることによって実現されます。
13
パーティクルのライフ遷移時及び消滅時にActionに通達するPtLife。
これは花火などの時限的に発生する表現に使用されます。
地形コリジョンに衝突した際にActionを通達するPtColliderAction。
これは攻撃などのインタラクションな表現に使用されます。
©CAPCOM
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/L735DKGGE5.jpg)

表現機能と効果の解説
ここまでが基本的な機能の説明でした。
次からは実際にゲームタイトルで使用されているエフェクトの表現とそれを実現しているアイテムの機能について解説します。
©CAPCOM
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/87DDP31N7G.jpg)

まずはこちらをご覧ください。
ストリートファイター６のリュウによる波動拳のエフェクトです。
波動拳の溜め、発射、浮遊、衝撃、全て異なるエフェクトアセットが用意されています。
©CAPCOM
15
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJPXN4QN78.jpg)

表現機能と効果の解説
このように波動拳のエフェクトは複数のエフェクトアセットで構成されています。
お見せしたエフェクト表現の一部ではありますが、エフェクトアセットの内部構成を解説していきます。
©CAPCOM
16
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/2EVLKX5YJQ.jpg)

表現機能と効果の解説
こちらが波動拳の発射及び本体のエフェクトアセット全体構成です。
一部の表現を作るだけでも、数多くのEmitterが必要になります。
17
Emitterの一部構成を掻い摘んで解説します。
©CAPCOM
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/57GXQV6WEL.jpg)

表現機能と効果の解説
手の表現部分です。
ランダムではない決められた細かい動きを制御したいため PtTransform3Dというアイテムを使用しています。
18
これはTimelineで設定されたTransformの値をパーティクル単位で制御できるアイテムです。
また、メッシュの描画にはTypeMeshというアイテムを使用しています。
©CAPCOM
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EQ8K64QJP.jpg)

表現機能と効果の解説
TypeMeshに設定されているマテリアルから一部パラメーターがリフレクションされるように実装しています。
エフェクト側で描画するときだけ表現を変えたい。
そういったケースは非常に数多くあると思います。
19
この機能により、エフェクト側で描画するときだけ特定のパラメーターを調整して描画することが可能です。
©CAPCOM
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/KJ42P4QYE1.jpg)

表現機能と効果の解説
こちらはコア部分となる正面用の表現です。
角度によってフェードを行うFadeByAngleというアイテムを用いています。
見る角度で都合が悪くなる表現は多々あります。
それを解決するために角度によってフェードアウトすることが可能です。
20
正面以外の角度はフェードによってαが薄くなることから、
映像で見えるエフェクトは正面用に作られた表現ということが分かります。
©CAPCOM
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LE1M94PN7G.jpg)

表現機能と効果の解説
コア部分の別表現です。こちらも角度で一部のパーティクルがフェードアウトするように設定されています。
角度によるフェード以外に調整するべき項目は他にもあります。
例えばトーンマッピングを無視したい、ポリゴンのエッジをフェードしたい等です。
21
もちろん対応する機能は存在しています。
Soft ParticleやDetonemapを適用するためにShaderSettingsというアイテムを使用します。
ShaderSettingsはマテリアル以外の描画パイプラインで描画用パラメーターを調整するアイテムです。
Particle LightingやVariable Rate Shading等の設定も用意されており、
アーティストは簡単に豪華な表現を作り上げることができます。
このように様々なEmitterとアイテムによる機能によって表現が作られていることが分かります。
©CAPCOM
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/GEW3QXVME2.jpg)

表現機能と効果の解説
続いてストリートファイター6で実装されたStretchBlurという機能を紹介します。
まずはこちらの動画をご覧ください。
攻撃部位のディティールを保ったブラー表現になっています。
22
通常のモーションブラーでは実現できなかった表現をこのStretchBlurで表現することができました。
©CAPCOM
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/47ZVW64ME3.jpg)

表現機能と効果の解説
ブラーサンプリング範囲
StretchBlurは、画像のように特定箇所にブラーサンプリングを指定しつつ、
ビルボードやトレイルにブラー結果をマッピングすることが可能なアイテムです。
23
足先のブラーサンプリング範囲がデバッグ表示です。
この機能により、コスチュームの部分色を反映したブラー結果をディストーションと合成することができます。
©CAPCOM
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/YJ65G2357V.jpg)

表現機能と効果の解説
こちらはデバッグ表示が分かりやすい画像です。
キャラクターを囲うように表示されている矩形範囲がブラーサンプリングの範囲です。
ブラーサンプリングした結果を複数のビルボードにマッピングして残像を表現しています。
©CAPCOM
24
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GJ5YV2LGJ4.jpg)

表現機能と効果の解説
しかし、これだけ広い範囲だと背景色もサンプリングしてしまいます。
そこで、特定の描画対象だけマスクしてサンプリングするためにステンシルを利用しています。
25
画像右側に見える緑色のデバッグ表示対象はステンシル９番で描画され、
StretchBlurは画像範囲にある９番のステンシルピクセルをサンプリングします。
©CAPCOM
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/9E2G34LDER.jpg)

表現機能と効果の解説
こちらもステンシルによって脚の描画ピクセルのみをサンプリングしています。
春麗の百裂脚の残像は複数のStretchBlurを脚元でサンプリングしてポリゴンにマッピングして表現しています。
©CAPCOM
26
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/D7YV1MQM7M.jpg)

続いてコチラをご覧ください。
BIOHAZARD RE:4の火球による爆発表現です。
大規模な爆発と破砕表現によって迫力のある演出が実現できています。
27
しかし、このようなインパクトのある表現はどうしても作成されるアセットも規模が大きくなってしまいます。
©CAPCOM
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/VENM2WK3J8.jpg)

表現機能と効果の解説
爆発表現の全体構成です。
爆発時のインパクトや破砕表現、火花、火炎、煙による余韻の表現等々
28
大規模かつ細かく表現を制御するには、このように処理するEmitterの数も多くなります。
©CAPCOM
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/Y79N1XVP73.jpg)

表現機能と効果の解説
EffectAsset
EffectAsset
Thread0
Thread1
Thread2
Thread3
Emitter0
Emitter1
Emitter0
Emitter1
Emitter2
Emitter3
Emitter2
Emitter3
Emitter4
Emitter5
Emitter6
Emitter7
Emitter0
Emitter5
Emitter1
Emitter2
Emitter3
Emitter4
Emitter6
Emitter1
Emitter3
Emitter0
Emitter2
Emitter7
このような多量のEmitterを処理するためにRE ENGINEのエフェクトではEmitter単位で並列処理を行っています。
エフェクトアセットに関係なく全てのEmitterは並列処理のジョブに登録され、順次処理されます。
29
これにより、Emitter数が多いエフェクトアセットで処理がストールするといった問題は発生しません。
©CAPCOM
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/G78K42PXJD.jpg)

表現機能と効果の解説
Emitter Priorityなし
Emitter Priorityあり
また、これだけの多量なEmitterを描画すると、表現によってはカメラの位置で描画に不備が生じます。
それを防ぐために、EmitterPriorityというアイテムが存在します。
30
このアイテムをRootノードに設定すると、Emitterのインデックス順で描画優先を制御することが可能になります。
カメラ距離による自動的にソートされる不都合を回避したい場合に使用します。
©CAPCOM
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/L7LZ621NER.jpg)

次にこちらをご覧ください。
BIOHAZARD VILLAGEで姉妹が移動する際に表現しているエフェクトです。
31
姉妹の身体から大量の虫が発生しています。
虫は常に一定の距離で姉妹の身体に纏まりついており、移動と共に大量の虫も追従しています。
これらの虫に関する挙動のために複数のアイテムが利用されています。
©CAPCOM
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/4EMV58WQEW.jpg)

こちらが分かりやすくエディター上で発生している映像です。
大量の虫の挙動を更新及び描画したいため、GPU Particleとインスタンシングによるメッシュ描画で処理しています。
32
©CAPCOM
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/PER235YK79.jpg)

表現機能と効果の解説
TypeGpuMeshというアイテムがGPU Particleで制御かつメッシュをインスタンシング描画する機能です。
分かりやすいように白いスフィアメッシュで描画しています。
33
虫の挙動に関してはVelocity3DやAttractor, VectorFieldといった動きを提供する機能のアイテムで構成されています。
Attractor アイテムは、特定箇所にパーティクルを収束させる機能です。
この機能より、大量の虫を有機的に動かすことができています。
もしAttractorを使用しない場合、右の映像のように収束せずGPU Particleは四方に離散してしまいます。
©CAPCOM
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/P7XD4KG5JX.jpg)

次にScreenSpaceEmitterというアイテムを紹介します。
まずはこちらをご覧ください。
BIOHAZARD VILLAGEの一部カットシーンのエフェクトです。
34
門に表示されている文字から細かいパーティクルが発生しているのが分かります。
©CAPCOM
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/37KXZ54RJD.jpg)

表現機能と効果の解説
発生範囲を描画結果から制御したい、という要望からScreenSpaceEmitterは実装されました。
このアイテムは画面に描画されたピクセル情報からパーティクル発生を制御し、色の反映を行う機能です。
35
Emitterにアイテムとして追加するだけで利用が可能です。
ただし、GPU Drivenな機能なためGPU Particleでのみ使用可能です。
ここではTypeGpuBillboardというアイテムがGPU Particleとしての機能を担っています。
©CAPCOM
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/LJ35DKLG75.jpg)

表現機能と効果の解説
Pixel Buffer
ピクセル位置情報書き出し
Color Fetch
Pixel Buffer
GPU Particle生成
GPU Particle Buffer
もう少し細かく解説します。まずG-Bufferに描画するメッシュのPixel Shaderから
ピクセル位置の情報を専用のPixel Bufferに書き出します。
マテリアルを構成するシェーダーグラフエディター側にPixel Bufferに書き出す専用のノードが用意されています。
36
ScreenSpaceEmitterで発生できるパーティクル最大数を制限しているため、
ある程度ピクセルを間引いてPixel Bufferに書き出します。
書き出すピクセル間隔は解像度によって調整されます。
GPU Particleを発生させる際、Pixel Bufferから情報をフェッチして発生位置を制御します。
また、ピクセル位置情報から既に描画されている画面イメージの色をサンプリングして
GPU Particleの色に反映させることも可能です。
©CAPCOM
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/8JDDP3NNJG.jpg)

表現機能と効果の解説
このように様々なアイテムやエディターの機能を活用してエフェクトアセットが作られています。
RE ENGINEのエフェクトは、日々機能拡張や技術研究を行っております。
37
次はエフェクトアセットがタイトルへどのように実装されているのか、そのワークフローを紹介します。
©CAPCOM
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/VEPXN45NJ8.jpg)

タイトル連携ワークフロー
それでは、タイトル連携ワークフローを紹介します。
エフェクトがどうやって作られているか説明していただきましたので、
次は作ったエフェクトが実際のゲームシーンにどうやって配置されるか見ていきましょう。
©CAPCOM
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/27VLKXPYEQ.jpg)

エフェクトの主な呼び出し方
エフェクトは常にシーン上に配置する「Game Object」の「1 Component」である「Effect Player」として利用されます。
そのうえでここへ登録/構築する方法は複数あり、主にタイトルで使用されている方法をご紹介します。
©CAPCOM
39
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/5JGXQVPW7L.jpg)

エフェクトの主な呼び出し方
Scene 直接配置
一つ目は先ほど見せた通りシーンに直接配置する方法です。
ここで配置するのは背景エフェクトと呼ばれる煙やフォグ、印象的なシーンでは火災の火や発光物が設定されます。40
©CAPCOM
40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/47Q8K62QEP.jpg)

エフェクトの主な呼び出し方
Scene 直接配置
C# スクリプト
※Resource≒コンバート済みのAsset
次にC# スクリプトから直接配置する方法です。
非常に単純なコードで、先ほどツール上で行ったように、「Game Objectを作って、Effect Playerをさして、
アセットをセットする」という一連の手順をコードで記述しているだけです。
41
C# スクリプト制御は、もちろん好きなようにプログラムすることができるので一番柔軟に対応することができます。
©CAPCOM
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/KE42P4LY71.jpg)

エフェクトの主な呼び出し方
Scene 直接配置
C# スクリプト
Timeline 紐づけ
もう一つはTimeline紐づけで、特定タイミングでエフェクトを出すように設定する方法もよくあります。
例えばキャラクターモーションの特定タイミングでエフェクトを出すとか
カットシーンの特定の時間でエフェクトを出すといった方法です。
©CAPCOM
42
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/L71M94LNJG.jpg)

エフェクトの主な呼び出し方
Scene
Scene 直接配置
Game Object
Set!
Transform
Effect Player
C# スクリプト
other script…
Timeline 紐づけ
Game Object
Game Object
いずれも内部的にはGame Objectを作ってEffect Playerをセットしていることに変わりはなく、
アーティストやプログラマーが呼び出しやすい方法やツールで配置できます。
43
©CAPCOM
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/G7W3QXQM72.jpg)

C# スクリプトの呼び出しの欠点
※場合によって担当者が前後する
エフェクトを依頼
エフェクトを作成
エフェクトを呼び出し
尺の調整を依頼
発生フレーム修正
見た目調整
見た目調整依頼
この中でC# スクリプトに関して、確かに柔軟ではありますが、
設定がプログラマー依存になってしまうのでゲームデザイナーやアーティストの視点から見るとイテレーション性に欠けます。
44
例えば、ゲームデザイナーからエフェクトの発注を受け、作ったエフェクトをプログラマーに呼び出してもらうとします。
ただ実際に触ってみると尺を伸ばしたり発生タイミングをずらしたいということは往々にしてあります。
そうすると毎回プログラマーが間に入ることになりますし、タスクも直列でしか進行できなく効率が悪いです。
©CAPCOM
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4JZVW6WM73.jpg)

解決方法
Scene 直接配置
Game Object
Transform
C# スクリプト
Effect Player
C# スクリプト
EPV
other script…
※EPV=Effect Provider の略称
Timeline 紐づけ
それを解決するために EPVというツール機能があります。
C＃スクリプト側ではIDを引数に実行を行い、アーティストはIDに対してエフェクトアセットの設定や発生タイミング、
45
方向、ボーンの参照設定などを柔軟に設定できる仕組みです。
©CAPCOM
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/YE65G2G5JV.jpg)

EPV ( Effect Provider )
EPVツールの見た目はこのようになっています。
今回はストリートファイター6よりリュウの真昇竜拳のEPVを軽く見て見ましょう。
技を一つとっても複数の要素と段階で細かくエフェクトの設定項目が分かれていますね。
46
今開かれてる「カメラ前 顎ヒット」はカメラに追従して調整されているエフェクトですね。
少し角度を変えるとこんな感じ。
項目を見て見ると先ほど触れたIDがありますね。
これがプログラマーが発行、あるいはアーティストが指定したIDで、特定タイミングで出るようにすれば、
あとはカメラに追従したり、キャラクターのボーンに追従したり、好きなように設定できるのでイテレーション性が高く、
結果としていくつもの要素に対して細かくエフェクトを設定することができます。
©CAPCOM
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/GE5YV2VGE4.jpg)

EPV ( Effect Provider )
IDを発行しといたので
指定タイミングに呼んどきます
少しディレイを入れたいな
方向をこうしたいな
パラメータ設定
エフェクト指定
地面と足が接触した瞬間にも
何か出しときたいな
こうしてゲームデザイナー、プログラマー、アーティストがそれぞれ並行で作業することができ、
負担も分散でき、非常に高いイテレーション性を実現しています。
47
©CAPCOM
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/972G343D7R.jpg)

さらなる拡張
Scene 直接配置
Game Object
Transform
C# スクリプト
Effect Player
EPV
other script…
Timeline
紐づけ
Timeline
EPV Helper
紐づけ
ちなみにEPVが非常に有用だったのでTimeline紐づけの際にも、専用にEPV Helperというものが提供されています。
これにより非常に柔軟かつ細かいエフェクトの挙動をさらにここではプログラマーを一切介さなくても、
制御できるようになっています。
©CAPCOM
48
48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/DJYV1M1MJM.jpg)

より細かい制御をしたい！
ここまででエフェクトの「出し方」をご紹介してきましたが、
エフェクトを出した後にもう少し細かい制御をしたいことは往々にしてあります。
例えばコンボ数や攻撃の段階、ゲームの進行度に応じてエフェクトの色味や勢いを変えたい場合などですね。
49
それを実現するためにエフェクトにはExtern ParameterとExpressionというものが用意されています。
©CAPCOM
49


# Page. 50

![Page Image](https://bcdn.docswell.com/page/V7NM2W23E8.jpg)

Extern Parameter &amp; Expression
Extern Parameterはエフェクトエディターのノードの一つとして増設します。
こう置くだけでC# スクリプトから文字列指定でアクセスできるようになります。
さらに、エフェクトには実数値以外にもExpression、
つまり「式」を入力できるのでそこで利用すればエフェクトに反映させることができます。
50
Extern ParameterはC# スクリプト以外の各種ツールにも一覧が乗るようになるので、
先ほどご紹介したEPVやTimeline制御などにも対応します。
©CAPCOM
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/YJ9N1X1PJ3.jpg)

エフェクトから C# スクリプトを制御したい！
ブラーをかけたいけど
C#スクリプトから設定しないと
さて、先ほどはC# スクリプトからエフェクトを制御していましたが、
今度は一周回ってエフェクトからC# スクリプトを制御したいという要望も出てくるものです。
51
RE ENGINEではその要望にもお答えします。
エフェクトにはPtBehaviorというアイテムが用意されており、
C# スクリプト側で専用のクラスから派生すると自動的に使用可能になります。
この例ではラジアルブラーを制御するC# スクリプトと連動しており、
ただ呼び出すだけでエフェクトを中心にブラーをかけられます。
必要であればパーティクルのライフといった値も手に入るので、寿命をエフェクト側で制御することもできます。
©CAPCOM
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/GJ8K424XED.jpg)

PtBehavior with Vector Fiede
床に落ちている
桜に注目
他にもエフェクトにはVector Fieldを参照して対象エフェクトに風を吹かせる機能があります。
ストリートファイター６を参考に見て見ると、
床に落ちている花びらに対してインタラクションさせるためにVector Fieldを設定しています。
52
ただしこのVector FieldもC# スクリプトからシーンにセットする必要があります。
そして毎回C# スクリプトコードで設定するのは面倒なので、
それもエフェクトで完結できるように PtBehavior からセットできるようにしています。
©CAPCOM
52


# Page. 53

![Page Image](https://bcdn.docswell.com/page/LJLZ626N7R.jpg)

最適化対応
ここまででエフェクトがゲームの世界に出るまでの流れを紹介いたしました。
次はこのゲームの世界のエフェクトを、現実の世界の皆様にお届けし、
快適にプレイしていただくための仕上げのお話になります。
©CAPCOM
53


# Page. 54

![Page Image](https://bcdn.docswell.com/page/47MV585Q7W.jpg)

描画負荷が高くなりやすいエフェクト
32ms
32ms
16ms
16ms
エフェクトの作成は処理負荷と描画負荷との闘いでもあります。
どんなにかっこいいエフェクトができても、フレームレートが大幅に落ちるような描画負荷だったら削らざるを得ません。
54
そして往々にしてド派手でかっこいいエフェクトは重くなりがちです。
©CAPCOM
54


# Page. 55

![Page Image](https://bcdn.docswell.com/page/P7R2353KJ9.jpg)

肩身が狭いエフェクト
背景物
エフェクト作成
残り5msです
カットシーン
・モーション
・カメラワーク
キャラクター
・モデル
・モーション
こちら3msに
抑えました
2msに
抑えときました
エフェクト作成
エフェクト作成
エフェクトは絵作りや依存するアセット的な兼ね合いでスケジュール的にも下流の工程におり、
実装する頃には1フレーム内の空いてる処理時間がほぼないなんてこともあります。
特にライティングされている半透明エフェクトはシェーディングコストが非常に高いため、
既に重たい複雑なステージでフォグを追加すると処理時間が溢れやすいです。
55
そういう土壌もあって常に最適化との闘いが繰り広げられています。
©CAPCOM
55


# Page. 56

![Page Image](https://bcdn.docswell.com/page/PJXD4K45EX.jpg)

Effect Profiler
私たちRE ENGINE エフェクトユニットもそういう背景を理解しているので、
最適化タイミングだけではなく事前にも計測できるように各種処理計測ツールをご用意しています。
その一つがEffect Profilerツールです。
これは現在のシーン中で実行中のエフェクトの一覧を見ることのできるツールです。
56
特定のタイミング中にフレームレートが下がった場合このツールを見たら何が重いのか一目瞭然です。
©CAPCOM
56


# Page. 57

![Page Image](https://bcdn.docswell.com/page/3JKXZ5ZRED.jpg)

エフェクトエディターの基本的機能としての提供
ただし、毎回プロファイラーを開きながら作業するのは正直煩わしいです。
それも私たちは理解しており、かつ処理負荷を気にしながら作業できるように、
色々な場所に簡易的なプロファイル機能を併設しています。
57
とくにエフェクトエディタ上には再生するたびに、CPU負荷、GPU負荷、メモリ使用量がわかるようにしてあります。
これで処理負荷を気にしながらエフェクトを作ることができるわけです。
©CAPCOM
57


# Page. 58

![Page Image](https://bcdn.docswell.com/page/LE35DKDGJ5.jpg)

高負荷なエフェクト機能の注釈
負荷がかなり高い機能
負荷が高い機能
値によっては負荷が高くなる機能
他にもアイテムリストや各アイテムのパラメータには負荷に関する注意マークが付けられており、
「なんか重いな」というときにパラメータを見直しやすくなっています。
またアーティスト的にも迂闊に使っていい機能なのかわからないという心理的不安を和らげる効果もあります。
©CAPCOM
58
58


# Page. 59

![Page Image](https://bcdn.docswell.com/page/8EDDP3PNEG.jpg)

最適化のサポート
それでもタイトル側だけでは最適化しきれるわけではありません。
その場合はRE ENGINEの各ユニットによる手厚いサポートがあります。
この時、より詳細なプロファイリングやエンジンレベルでの最適化なども行いますが、
同時にこれまで複数のタイトルで培ってきたノウハウがあるため、
アーティスト向けのプロファイルの方法、どういった場面で重くなり、どう対処すると良いか
というものの傾向がわかってきたのでそれらの調査方法が文章化され共有されています。
59
これを元に、より早い段階で描画負荷の抑制もでき、より高品質なエフェクトが作成できます。
こうした努力によって皆様の手元に安定したフレームレートで快適にプレイできるゲーム がお届けされているわけです。
©CAPCOM
59


# Page. 60

![Page Image](https://bcdn.docswell.com/page/V7PXN4NNE8.jpg)

ご清聴ありがとうございました
以上、「高品質なエフェクトのためのエディター機能とワークフロー」の紹介でした。
ご清聴ありがとうございました。
60
©CAPCOM
60


