【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
•
7 likes•5,021 views
"講演者：ブーシェ ロビン晃(グリー株式会社) こんな人におすすめ ・エフェクト組み込みをアーティストに任せたいエンジニア エンジニアに頼らずにエフェクト組み込みがしたいアーティスト 受講者が得られる知見 ・エフェクト組み込みの効率化・ツール化のノウハウ カスタムインスペクター・カスタムエディター作成Tips"
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
Similar to 【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり (20)
More from Unite2017Tokyo
More from Unite2017Tokyo (20)
【Unite 2017 Tokyo】DIYエフェクト実装: エンジニアレスでエフェクトを組み込める環境づくり
- 3. 自己紹介 • Robin Akira Boucher (ブーシェ ロビン晃) • GREE VR Studio所属のエンジニア • 過去作品:「el」「サラと毒蛇の王冠」「Tomb of the Golems」等
- 4. セッションフロー Part 1: Unityでのエフェクト組み込み Part 2: エフェクト再生システム Part 3: エディターツール
- 5. では始めましょう
- 6. エフェクトは大事！ • 一見地味だが、あるとないとでは大違い • 導入されると一気に画面が賑やかになり、「開発が進んでる！」感が出る • 作りながら「なんかイマイチ・・・」と思っていたのを、いざエフェクトが入ると 「なんだちゃんと面白いじゃん！」と安心するのは良くある話 • ゲームが面白くなるだけではなく、製品に近づくのを感じられるため、 チームの士気もアップする
- 7. しかし・・・ • エフェクト再生はゲームロジックと深く結びついている • ゲームの処理に合わせ、タイミング・位置・再生時間・移動法則など、 細かい指定が必要 • Unityはアーティストがエフェクトを制作する環境が整っているが、 エフェクトをゲームに組み込むのはほぼエンジニアが必須となる
- 10. © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです） Example 剣から衝撃波を出して 対象を攻撃
- 11. © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです） エフェクト要素 足元に 魔法陣が現れる
- 12. エフェクト要素 剣に追従する オーラが表示される © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 13. エフェクト要素 対象に向かって 移動する衝撃波 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 14. エフェクト要素 対象の位置で 爆発 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 15. これを実装するとしたら？
- 16. 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(); }
- 17. 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(); }
- 18. Inspectorはこんな感じ？
- 19. アーティストから 調整要望が来た
- 21. AnimationEventを追加し、 指定のフレームでエフェクトを 再生できるように対応 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 22. public void PlaySwordAuraEffect() { this.swordAura.Play(); // 剣オーラエフェクトを再生 } 新しいAnimationEventの処理を追加
- 24. AnimationEventを増やす・・・ © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 25. public void PlaySwordAuraEffect() { this.swordAura.Play(); // 剣オーラエフェクトを再生 } public void PlayWeakSwordAuraEffect() { this.swordAuraWeak.Play(); // 弱い剣オーラエフェクトを再生 } スクリプトにも更に AnimationEventの処理を追加・・・
- 27. public ParticleSystem slashEf; public BishamonEffect slashEf; // 衝撃波エフェクト public void LaunchSlash() { // 攻撃発生。AnimationEventなどから呼ぶ this.slashEf.Play(); this.slashEf.StartEffect(); // 衝撃波エフェクト再生 } スクリプト内で、 Shurikenのエフェクト定義をBishamonに差し替えて対応
- 28. Prefabも更新！
- 30. public ParticleSystem slashEfShuriken; // 衝撃波エフェクト (Shurikenパート) public BishamonEffect slashEfBishamon; // 衝撃波エフェクト (Bishamonパート) public void LaunchSlash() { // 攻撃発生。AnimationEventなどから呼ぶ this.slashEfShuriken.Play(); // 衝撃波エフェクト再生 this.slashEfBishamon.StartEffect(); } エフェクト定義を2つに分ける・・・
- 31. Prefabも複雑になる・・・
- 32. つまり・・・ 1. アーティスト要望 2. エンジニア実装。アーティストは待ち状態 3. アーティストチェック 4. 1に戻る どんなに細かい調整であっても上記のサイクルが何度も発生し、 膨大なコミュニケーションコストとなり、双方の時間を無駄にする
- 33. これはさすがにまずい・・・
- 34. ツールで効率化しましょう
- 35. 目標・アーティスト観点 • 好きな制作ツールで、好きなエフェクトを自由に制作できる • 特殊なコンポーネントの付加など、エンジニア都合のめんどくさいことを 極力させない • 再生位置・再生タイミングなど、一般的な調整項目をアーティストだけで 完結できるようにする • つまり、アーティストだけで以下ができるようにする • エフェクトの制作 • エフェクトをゲームに組み込み • エフェクトがゲーム中で動いているのを確認し、調整
- 36. 目標・エンジニア観点 • 進行中のエフェクト組み込みスケジュールをなるべく遅らせたくない • 短期間で開発し、すぐに導入・試用できるくらいの規模 (1-2週間程度) • プロジェクトに依存させない。ゲーム内の他システムとの依存関係を作らず、 今後のプロジェクトにも簡単に取り込めるようにする
- 38. EffectComponent
- 40. EffectComponentとは？ • ParticleSystemやBishamonEffectなどのエフェクト制作ツール固有の コンポーネントに代わり、ゲームロジックから参照されるAbstractクラス • 全エフェクト共通の機能やAPIをまとめる • 制作ツールごとの固有の処理は拡張クラスを用意する • ゲームロジックからはEffectComponentのみを参照する
- 41. public abstract class EffectComponent : MonoBehaviour { protected abstract void Play(); // 拡張クラスで実装する再生処理 protected abstract void Stop(); // 拡張クラスで実装するストップ処理 public void PlayEffect() { Play(); } public void StopEffect() { Stop(); } Abstractのベースクラス。 必要に応じて拡張クラスを用意する
- 42. public class EffectShurikenComponent : EffectComponent { private ParticleSystem ps; protected override void Play() { // ParticleSystemの再生処理 this.ps.Play(); } protected override void Stop() { // ParticleSystemのストップ処理 this.ps.Stop(); } 拡張クラス: Shuriken用
- 43. public class EffectBishamonComponent : EffectComponent { private BishamonEffect be; protected override void Play() { // BishamonEffectの再生処理 this.be.StartEffect(); } protected override void Stop() { // BishamonEffectのストップ処理 this.be.StopEffect(); } 拡張クラス: Bishamon用
- 44. public EffectComponent groundRingEf; // 魔法陣エフェクト (EffectComponent) public void SwordAttack() { this.groundRingEf.PlayEffect(); // 魔法陣エフェクト再生 } ゲームロジックでの使用例。 制作ツール固有のコンポーネントではなく、EffectComponentのみを参照。 アーティストがどのツールを使ってエフェクトを制作しても、 スクリプトの処理はすべて同じになる
- 46. EffectComponentの付加 • 当然、EffectComponentが機能するには全てのエフェクトのGameObjectに 該当する制作ツール用の拡張クラスが付加されている必要がある
- 47. しかし・・・ • アーティストに制作するエフェクトのGameObjectにいちいちEffectComponentを 付加させるのはNG • 付加し忘れなどのヒューマンエラーのリスクが非常に高い • そもそもエンジニア都合の仕様なので、そこでアーティストの手を煩わせるのは 自分勝手である
- 48. 実行時に自動的に付加する • アーティストが作成したエフェクトは必ずPrefabにしてもらう • Prefab読み込み時に適切なEffectComponentを自動的にAddComponentする • e.g. • ParticleSystemであれば、EffectShurikenComponentを自動付加 • BishamonEffectであれば、EffectBishamonComponentを自動付加 • アーティストがエフェクトを制作する際に、どの制作ツールで作るかを 気にしなくて良く、コンポーネント付加などの面倒な手間も省ける
- 51. エフェクト再生オプション
- 52. エフェクト再生オプション • アーティストがエンジニアに頼らずに望み通りの演出を作れるよう、 いろいろな調整項目を実装 • エンジニア用のオプションもある • これらの再生オプションは全エフェクト共通機能であるため、 EffectComponentベースクラス内に実装する • これらの再生オプションは専用のエディターツールから設定する (後述)
- 53. 再生位置 • Transformを指定し、その位置にエフェクトを再生する • 追加オプションも用意 • Followオプション • エフェクト再生中、Transformに追従させる • e.g. エンチャントなどで武器にオーラを纏わせるエフェクト • PlayAtGroundオプション • 指定した位置のy座標に関係なく、再生位置を地面に固定する • e.g. キャラが吹き飛ばされた時の土煙などのエフェクト
- 54. 自動Destroy・Deactivate • Preserveオプション • 再生終了後にエフェクトをDestroyするか、使い回せるようにInactive にして保持しておくかのオプション • DestroyであろうとDeactivateであろうと、再生終了後の処理は自動になるため、 エンジニアの「Emissionが終わったら消さなきゃ」という手間を省ける
- 55. まとめると これらの機能はほんの一部であるが、基本的な構成は以下となる • EffectComponentベースクラスに共通の機能や再生オプションを実装する • 使用しているエフェクト制作ツール等に応じて拡張クラスを実装し、 エフェクトPrefab読み込み時に自動的に付加する • ゲームロジックからはEffectComponentタイプのみを参照する
- 56. Part 3 エディターツール
- 57. EffectContainer
- 59. EffectContainerとは？ • ゲームロジック上のオブジェクト単位で持つエフェクト再生定義群の コンポーネント • そのオブジェクトに関連するエフェクトをリストで定義し、エフェクトPrefab及び EffectComponent用の各種再生オプションをInspectorで設定する • 定義したエフェクトはゲーム実行時に読み込まれ、EffectComponentの 自動付加が行われる
- 61. © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 66. 試しに 「剣に追従するオーラ」を 設定してみる © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 72. public EffectContainer effects; // EffectContainerの参照のみ public void SwordAttack() { // EffectContainerで定義したNameでエフェクトを再生する this.effects[“SwordAura”].PlayEffect(); } 再生するエフェクトPrefabの設定及び 再生位置や剣への追従などのオプションは すべてアーティストがInspectorで済ませてあるため、 スクリプトはPlayEffectを呼ぶだけでOK
- 73. 残りのエフェクトもAdd • 魔法陣エフェクト: GroundRing • 衝撃波エフェクト: Slash • ヒットエフェクト: Hit
- 76. 再生タイミングの調整
- 78. 剣に追従するオーラエフェクトを 剣を持ち上げたタイミング で再生したい (=モーション内の特定フレーム) © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 80. ModelImporterなどで AnimationClipにEventを追加 AnimationEvent使用例 © 2014-2017 SQUARE ENIX CO., LTD. All Rights Reserved. 乖離性ミリオンアーサーVR（スクウェア・エニックス） （画面は開発中のものです）
- 81. Function • EffectAnimationEvent (固定) • エフェクト用のEventであるのが 識別できるように AnimationEvent設定
- 82. String Parameter • Play[EffectName] • Stop[EffectName] • EffectNameはEffectContainerで 定義したName アーティストが任意のタイミングで EffectContainerに定義したエフェクトを 再生・ストップできる AnimationEvent設定
- 83. (AnimationEventは基本的にAnimatorと同じオブジェクトにのみ 通知されるので、EffectContainerへAnimationEventを流す コンポーネントは必要です)
- 84. アーティストだけで完結！ • EffectContainerでオブジェクトに使いたいエフェクトを定義 • エフェクトPrefabや各種再生オプションをEffectContainerで設定する • AnimationEventで再生タイミングを調整 • 以上だけでも、かなり詳細なエフェクト演出の調整をアーティストだけで 完結できる • エンジニアを通す必要がないので、コミュニケーションコストが大幅に減る • システムも簡単で、短期間で作って導入できる
- 85. カスタムエディターについて
- 86. 本音と現実 • 「作りたくない・・・」が多くのエンジニアの本音だろうが・・・ • デフォルトInspectorだけでは限界がある • 特に非エンジニアが使う場合、ある程度以上の複雑性になると カスタムエディターがほぼ必須になってくる
- 87. カスタムエディターTips • 「いつか必ず必要になり、今後も作り、メンテしていく」と思った方がいい • よく使う機能は抽象化して使い回せるようにする • e.g. リスト • リスト機能はどんなタイトルでもほぼ100%必要 • Add/Delete/Insert/Copy/Pasteなどの標準機能を揃えた EditorListDrawerなどのクラスを作り、いろいろなカスタムエディターで 拡張して使えるようにする • AssetStoreのものを使うのもGood
- 88. 最後に
- 91. アーティストへ • ツールに非効率な部分があったり、改善を思いついたりしたらどんどん言おう • 言うだけならタダ。「エンジニアさん忙しそうだし・・・」と遠慮しない • その時すぐに対応できなくても、将来のプランに入れるだけでプラスになる
- 92. エンジニアへ • 作ったツールは自分で使い、常に改善策を考えよう • ただし、アーティストにとっても改善とは限らないので、実装する前に確認する • また、「使いやすくなるから」と通知なしに大きなインターフェイス改変をしない
- 93. Thank you for listening