DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり

DIYエフェクト実装: エンジニアレスでエフェクトを 組み込める環境づくり

自己紹介 • Robin Akira Boucher (ブーシェ ロビン晃) • GREE VR Studio所属のエンジニア • 過去作品:「el」「サラと毒蛇の王冠」「Tomb of the Golems」等

セッションフロー Part 1: Unityでのエフェクト組み込み Part 2: エフェクト再生システム Part 3: エディターツール

では始めましょう

エフェクトは大事！ • 一見地味だが、あるとないとでは大違い • 導入されると一気に画面が賑やかになり、「開発が進んでる！」感が出る • 作りながら「なんかイマイチ・・・」と思っていたのを、いざエフェクトが入ると 「なんだちゃんと面白いじゃん！」と安心するのは良くある話 • ゲームが面白くなるだけではなく、製品に近づくのを感じられるため、 チームの士気もアップする

しかし・・・ • エフェクト再生はゲームロジックと深く結びついている • ゲームの処理に合わせ、タイミング・位置・再生時間・移動法則など、 細かい指定が必要 • Unityはアーティストがエフェクトを制作する環境が整っているが、 エフェクトをゲームに組み込むのはほぼエンジニアが必須となる

みなさまは エフェクト組み込みを どうしていますか？

Part 1 Unityでのエフェクト組み込み

Example 剣から衝撃波を出して 対象を攻撃 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

エフェクト要素 足元に 魔法陣が現れる © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

エフェクト要素 剣に追従する オーラが表示される © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

エフェクト要素 対象に向かって 移動する衝撃波 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

エフェクト要素 対象の位置で 爆発 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

これを実装するとしたら？

public ParticleSystem groundRingEf; public ParticleSystem swordAuraEf; public Transform swordTransform; // 魔法陣エフェクト // 剣のオーラエフェクト // 剣のtransform public void SwordAttack() { // 攻撃開始 this.groundRingEf.Play(); // 魔法陣エフェクト再生 // 剣オーラエフェクトを剣に追従するようにし、再生 this.swordAuraEf.transform.parent = this.swordTransform; this.swordGlowEf.Play(); }

public ParticleSystem slashEf; // 衝撃波エフェクト public ParticleSystem hitEf; // ヒットエフェクト public Transform targetTransform; // 対象のtransform public void LaunchSlash() { // 攻撃発生。AnimationEventなどから呼ぶ this.slashEf.Play(); // 衝撃波エフェクト再生 } public void Update() { // 衝撃波エフェクトが対象に到達したらヒットエフェクトを対象の位置で再生 this.hitEf.transform.position = this.targetTransform.position; this.hitEf.Play(); }

Inspectorはこんな感じ？

アーティストから 調整要望が来た

タイミング調整要望 アーティスト 「剣のオーラが出るのが早い。剣を振り上げるまで出さないでほしい」

AnimationEventを追加し、 指定のフレームでエフェクトを 再生できるように対応 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

public void PlaySwordAuraEffect() { this.swordAura.Play(); // 剣オーラエフェクトを再生 } 新しいAnimationEventの処理を追加

タイミング調整要望 (ROUND 2) アーティスト 「やっぱり地味だから、剣のオーラを2段階に分けたい。 攻撃モーション開始時に弱いオーラ、振り上げるタイミングで強いオーラ」

AnimationEventを増やす・・・ © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

public void PlaySwordAuraEffect() { this.swordAura.Play(); // 剣オーラエフェクトを再生 } public void PlayWeakSwordAuraEffect() { this.swordAuraWeak.Play(); // 弱い剣オーラエフェクトを再生 } スクリプトにも更に AnimationEventの処理を追加・・・

エフェクト制作ツール要望 アーティスト 「衝撃波エフェクトをShurikenじゃなくて、Bishamonにできない？」

public ParticleSystem slashEf; public BishamonEffect slashEf; // 衝撃波エフェクト public void LaunchSlash() { // 攻撃発生。AnimationEventなどから呼ぶ this.slashEf.Play(); this.slashEf.StartEffect(); // 衝撃波エフェクト再生 } スクリプト内で、 Shurikenのエフェクト定義をBishamonに差し替えて対応

Prefabも更新！

エフェクト制作ツール要望 (ROUND 2) アーティスト 「ShurikenとBishamonを組み合わせた方が綺麗な表現ができそう。 衝撃波エフェクトをShurikenパートとBishamonパートに分けることはできる？」

public ParticleSystem slashEfShuriken; public BishamonEffect slashEfBishamon; // 衝撃波エフェクト (Shurikenパート) // 衝撃波エフェクト (Bishamonパート) public void LaunchSlash() { // 攻撃発生。AnimationEventなどから呼ぶ this.slashEfShuriken.Play(); // 衝撃波エフェクト再生 this.slashEfBishamon.StartEffect(); } エフェクト定義を2つに分ける・・・

Prefabも複雑になる・・・

つまり・・・ 1. アーティスト要望 2. エンジニア実装。アーティストは待ち状態 3. アーティストチェック 4. 1に戻る どんなに細かい調整であっても上記のサイクルが何度も発生し、 膨大なコミュニケーションコストとなり、双方の時間を無駄にする

これはさすがにまずい・・・

ツールで効率化しましょう

目標・アーティスト観点 • 好きな制作ツールで、好きなエフェクトを自由に制作できる • 特殊なコンポーネントの付加など、エンジニア都合のめんどくさいことを 極力させない • 再生位置・再生タイミングなど、一般的な調整項目をアーティストだけで 完結できるようにする • つまり、アーティストだけで以下ができるようにする • エフェクトの制作 • エフェクトをゲームに組み込み • エフェクトがゲーム中で動いているのを確認し、調整

目標・エンジニア観点 • 進行中のエフェクト組み込みスケジュールをなるべく遅らせたくない • 短期間で開発し、すぐに導入・試用できるくらいの規模 (1-2週間程度) • プロジェクトに依存させない。ゲーム内の他システムとの依存関係を作らず、 今後のプロジェクトにも簡単に取り込めるようにする

Part 2 エフェクト再生システム (エンジニア向けの話となります)

EffectComponent

課題 • まず解決したいのが、複数のエフェクト制作ツールのカバー • アーティストがどのツールを使ってエフェクトを制作しても、 スクリプト内の再生処理を同じにしたい

EffectComponentとは？ • ParticleSystemやBishamonEffectなどのエフェクト制作ツール固有の コンポーネントに代わり、ゲームロジックから参照されるAbstractクラス • 全エフェクト共通の機能やAPIをまとめる • 制作ツールごとの固有の処理は拡張クラスを用意する • ゲームロジックからはEffectComponentのみを参照する

public abstract class EffectComponent : MonoBehaviour { protected abstract void Play(); // 拡張クラスで実装する再生処理 protected abstract void Stop(); // 拡張クラスで実装するストップ処理 public void PlayEffect() { Play(); } public void StopEffect() { Stop(); } Abstractのベースクラス。 必要に応じて拡張クラスを用意する

public class EffectShurikenComponent : EffectComponent { private ParticleSystem ps; protected override void Play() { // ParticleSystemの再生処理 this.ps.Play(); } protected override void Stop() { // ParticleSystemのストップ処理 this.ps.Stop(); } 拡張クラス: Shuriken用

public class EffectBishamonComponent : EffectComponent { private BishamonEffect be; protected override void Play() { // BishamonEffectの再生処理 this.be.StartEffect(); } protected override void Stop() { // BishamonEffectのストップ処理 this.be.StopEffect(); } 拡張クラス: Bishamon用

public EffectComponent groundRingEf; // 魔法陣エフェクト (EffectComponent) public void SwordAttack() { this.groundRingEf.PlayEffect(); // 魔法陣エフェクト再生 } ゲームロジックでの使用例。 制作ツール固有のコンポーネントではなく、EffectComponentのみを参照。 アーティストがどのツールを使ってエフェクトを制作しても、 スクリプトの処理はすべて同じになる

EffectComponentの自動付加

EffectComponentの付加 • 当然、EffectComponentが機能するには全てのエフェクトのGameObjectに 該当する制作ツール用の拡張クラスが付加されている必要がある

しかし・・・ • アーティストに制作するエフェクトのGameObjectにいちいちEffectComponentを 付加させるのはNG • 付加し忘れなどのヒューマンエラーのリスクが非常に高い • そもそもエンジニア都合の仕様なので、そこでアーティストの手を煩わせるのは 自分勝手である

実行時に自動的に付加する • アーティストが作成したエフェクトは必ずPrefabにしてもらう • Prefab読み込み時に適切なEffectComponentを自動的にAddComponentする • e.g. • ParticleSystemであれば、EffectShurikenComponentを自動付加 • BishamonEffectであれば、EffectBishamonComponentを自動付加 • アーティストがエフェクトを制作する際に、どの制作ツールで作るかを 気にしなくて良く、コンポーネント付加などの面倒な手間も省ける

アーティストが作成したエフェクトPrefab。 ParticleSystemが付加されているのみ

ゲーム実行時。 エフェクトPrefabのInstantiate時に自動的に EffectShurikenComponentが付加される

エフェクト再生オプション

エフェクト再生オプション • アーティストがエンジニアに頼らずに望み通りの演出を作れるよう、 いろいろな調整項目を実装 • エンジニア用のオプションもある • これらの再生オプションは全エフェクト共通機能であるため、 EffectComponentベースクラス内に実装する • これらの再生オプションは専用のエディターツールから設定する (後述)

再生位置 • Transformを指定し、その位置にエフェクトを再生する • 追加オプションも用意 • Followオプション • エフェクト再生中、Transformに追従させる • e.g. エンチャントなどで武器にオーラを纏わせるエフェクト • PlayAtGroundオプション • 指定した位置のy座標に関係なく、再生位置を地面に固定する • e.g. キャラが吹き飛ばされた時の土煙などのエフェクト

自動Destroy・Deactivate • Preserveオプション • 再生終了後にエフェクトをDestroyするか、使い回せるようにInactive にして保持しておくかのオプション • DestroyであろうとDeactivateであろうと、再生終了後の処理は自動になるため、 エンジニアの「Emissionが終わったら消さなきゃ」という手間を省ける

まとめると これらの機能はほんの一部であるが、基本的な構成は以下となる • EffectComponentベースクラスに共通の機能や再生オプションを実装する • 使用しているエフェクト制作ツール等に応じて拡張クラスを実装し、 エフェクトPrefab読み込み時に自動的に付加する • ゲームロジックからはEffectComponentタイプのみを参照する

Part 3 エディターツール

EffectContainer

課題 • EffectComponentを使い、複数のエフェクト制作ツールのサポートや、 アーティストの調整要望に応える再生オプションの用意はできた • 次は実際にアーティストがUnity上で組み込みを行えるよう、 カスタムエディターツールを用意する

EffectContainerとは？ • ゲームロジック上のオブジェクト単位で持つエフェクト再生定義群の コンポーネント • そのオブジェクトに関連するエフェクトをリストで定義し、エフェクトPrefab及び EffectComponent用の各種再生オプションをInspectorで設定する • 定義したエフェクトはゲーム実行時に読み込まれ、EffectComponentの 自動付加が行われる

アーティスト使用例 (剣の衝撃波サンプルにて)

© 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

エフェクトを組み込みたいオブジェクトに新しいGameObjectを追加。 EffectContainerという名前にする

EffectContainerを付加する。 Inspectorにはカスタムエディターが表示される

「Add New」ボタンで 新しいエフェクト再生定義を追加

エフェクト再生定義が追加され、 Prefabや各種再生オプションを 設定できる

試しに 「剣に追従するオーラ」を 設定してみる © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

Name 任意の名前。識別に使う SwordAuraに設定

Prefab アーティストが作成した エフェクトPrefab 剣オーラエフェクトをセット

Play At Transform 再生位置のTransform 剣の位置にオーラを出すため、 手に持っている武器の Transformをセット

Follow 再生位置のTransformに 追従させるオプション オーラは剣の動きに追従 するため、Onにする

ゲームロジックからは・・・ EffectContainerの参照を持たせて・・・

public EffectContainer effects; // EffectContainerの参照のみ public void SwordAttack() { // EffectContainerで定義したNameでエフェクトを再生する this.effects[“SwordAura”].PlayEffect(); } 再生するエフェクトPrefabの設定及び 再生位置や剣への追従などのオプションは すべてアーティストがInspectorで済ませてあるため、 スクリプトはPlayEffectを呼ぶだけでOK

残りのエフェクトもAdd • 魔法陣エフェクト: GroundRing • 衝撃波エフェクト: Slash • ヒットエフェクト: Hit

ゲーム実行時。 定義したエフェクトが自動的にInstantiateされ、 EffectComponentの自動付加も行われる

Before After エフェクトの参照がEffectContainerにまとまっているので、 Prefabもスッキリする

再生タイミングの調整

課題 • ここまでエフェクトはスクリプトから再生している • 実際はモーションを見ながら細かく再生タイミングを調整したい場合がほとんど

剣に追従するオーラエフェクトを 剣を持ち上げたタイミング で再生したい (=モーション内の特定フレーム) © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

AnimationEventを使う • UnityにはAnimationEvent機能があるので、これを利用する • エフェクト再生専用のAnimationEventを定義し、アーティストにセットしてもらう

AnimationEvent使用例 ModelImporterなどで AnimationClipにEventを追加 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）

AnimationEvent設定 Function • EffectAnimationEvent (固定) • エフェクト用のEventであるのが 識別できるように

AnimationEvent設定 String Parameter • Play[EffectName] • Stop[EffectName] • EffectNameはEffectContainerで 定義したName アーティストが任意のタイミングで EffectContainerに定義したエフェクトを 再生・ストップできる

(AnimationEventは基本的にAnimatorと同じオブジェクトにのみ 通知されるので、EffectContainerへAnimationEventを流す コンポーネントは必要です)

アーティストだけで完結！ • • • • EffectContainerでオブジェクトに使いたいエフェクトを定義 エフェクトPrefabや各種再生オプションをEffectContainerで設定する AnimationEventで再生タイミングを調整 以上だけでも、かなり詳細なエフェクト演出の調整をアーティストだけで 完結できる • エンジニアを通す必要がないので、コミュニケーションコストが大幅に減る • システムも簡単で、短期間で作って導入できる

カスタムエディターについて

本音と現実 • 「作りたくない・・・」が多くのエンジニアの本音だろうが・・・ • デフォルトInspectorだけでは限界がある • 特に非エンジニアが使う場合、ある程度以上の複雑性になると カスタムエディターがほぼ必須になってくる

カスタムエディターTips • 「いつか必ず必要になり、今後も作り、メンテしていく」と思った方がいい • よく使う機能は抽象化して使い回せるようにする • e.g. リスト • リスト機能はどんなタイトルでもほぼ100%必要 • Add/Delete/Insert/Copy/Pasteなどの標準機能を揃えた EditorListDrawerなどのクラスを作り、いろいろなカスタムエディターで 拡張して使えるようにする • AssetStoreのものを使うのもGood

最後に

フィードバックをもらおう • ツールを作るのは双方の作業効率を上げるため • ツールが使いにくかったら意味がないので、 アーティストからフィードバックをもらうことが大事

フィードバック改善例 「モーションにAnimationEventが複数あると確認しづらい」との相談があったため、 AnimationEventをすべて閲覧できるカスタムエディターを作成

アーティストへ • ツールに非効率な部分があったり、改善を思いついたりしたらどんどん言おう • 言うだけならタダ。「エンジニアさん忙しそうだし・・・」と遠慮しない • その時すぐに対応できなくても、将来のプランに入れるだけでプラスになる

エンジニアへ • 作ったツールは自分で使い、常に改善策を考えよう • ただし、アーティストにとっても改善とは限らないので、実装する前に確認する • また、「使いやすくなるから」と通知なしに大きなインターフェイス改変をしない

Thank you for listening