「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について

by gree_tech

Slide 1

Slide 1 text

「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について株式会社 WFS エンジニア菊地陽樹 / 張祐禎

Slide 2

Slide 2 text

2024年4月新卒でグリー株式会社（現：グリーホールディングス）に入社配属されたプロジェクトは開発が終了となり、同年9月より、まどドラの開発に携わる。まどドラのリリースを経て、現在はヘブバンの開発に携わる。菊地陽樹 2 株式会社 WFS クライアントエンジニア

Slide 3

Slide 3 text

張祐禎 2020年4月新卒でグリー株式会社（現：グリーホールディングス）に入社約 1 年半の間、シノアリスのクライアントエンジニアとして開発に携わるその後、まどドラの開発に携わって現在に至る株式会社 WFS クライアントエンジニア 3

Slide 4

Slide 4 text

目次・アジェンダ ● まどドラの紹介 ● まどドラのバトルの紹介、要件 ● バトル設計の実装詳細 ○ Logic ○ View ○ Connection ● Logic View Connection の統合例 ● バトル設計のまとめ、今後の展望 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

5人の魔法少女を編成して敵と戦うターン制コマンドバトルバトルの設計要件 ■ 『魔法少女まどか☆マギカ』の膨大な世界観を再現するため、 ○ 多様なバトル形式（ScoreAttack、PvP など）に対応可能 ○ 特殊バトルにも対応可能 ○ バトルの種類によって、柔軟にロジックや演出を変更可能 ○ リリース後も容易に拡張が可能まどドラのバトルの要件 7

Slide 8

Slide 8 text

バトルの要件を満たす設計数と量を柔軟に設計するために、LogicとViewを分離 8

Slide 9

Slide 9 text

バトルの要件を満たす設計数と量を柔軟に設計するために、LogicとViewを分離 1. Logic: バトルの「進行や計算、データの管理」をPureC#で実装 9 Logic

Slide 10

Slide 10 text

バトルの要件を満たす設計数と量を柔軟に設計するために、LogicとViewを分離 1. Logic: バトルの「進行や計算、データの管理」をPureC#で実装 2. View: Logicの結果をUnityで描画 10 Logic View

Slide 11

Slide 11 text

バトルの要件を満たす設計数と量を柔軟に設計するために、LogicとViewを分離 1. Logic: バトルの「進行や計算、データの管理」をPureC#で実装 2. View: Logicの結果をUnityで描画 3. Connection: LogicとViewを接続 11 Logic Connection View

Slide 12

Slide 12 text

バトルの要件を満たす設計数と量を柔軟に設計するために、LogicとViewを分離 1. Logic: バトルの「進行や計算、データの管理」をPureC#で実装 2. View: Logicの結果をUnityで描画 3. Connection: LogicとViewを接続 12 Logic Connection View 本発表では、各機能を1つずつ紹介

Slide 13

Slide 13 text

1. Logic 13 Logic Connection View

Slide 14

Slide 14 text

バトルの「進行・計算・データの管理」を全て担う部分 ■ ターンの進行 ■ 味方や敵のHP及びステータス管理 ■ スキルの計算 ■ ゲームオーバー処理 ■ etc . . . Logic 14 Viewに依存せず、Unity関連のコードを参照しないPureC#のみで構成

Slide 15

Slide 15 text

GameDirectorがバトル全体の、「データ」及び「処理」を管理 Logic の設計 15 GameDirector 敵/味方のステータスターン管理 Viewへ情報を送信 Viewから情報を受信中断 / 復帰勝敗判定

Slide 16

Slide 16 text

Logicの中心としてGameDirectorBaseをOverrideして、別々に存在 Logic の設計 16 GameDirectorBase SoloGameDirector ScoreAttack GD Quest GD PvP GD SimulationBattle GD Battleの種類ごとにGameDirectorを作成し、Battle毎の処理を実装 GD: GameDireector

Slide 17

Slide 17 text

Logic の設計 17 処理の一部は別のクラスに委譲して、バトルごとに実装基底勝敗判定クラス ScoreAttack 勝敗判定 Quest 勝敗判定 PvP 勝敗判定 GameDirectorBase ScoreAttack GD Quest GD PvP GD

Slide 18

Slide 18 text

Logic の設計 18 基底勝敗判定クラス ScoreAttack 勝敗判定 Quest 勝敗判定 PvP 勝敗判定 GameDirectorBase ScoreAttack GD Quest GD PvP GD 処理の一部は別のクラスに委譲して、バトルごとに実装 15ラウンドで敗北メインターゲット撃破で勝利 100ラウンドで敗北メインターゲット撃破で勝利 15ラウンドで敗北味方全員死亡で敗北敵全員撃破で勝利

Slide 19

Slide 19 text

Logic のメリット 19

Slide 20

Slide 20 text

新しい実装の追加のみで、新規バトルの追加が可能 Logic のメリット1 20 GameDirectorBase 新規追加用 GD 基底勝敗判定クラス新規追加用勝敗判定継承先のクラスを作成し、変更ある機能のみオーバーライド

Slide 21

Slide 21 text

View / Unityに依存しないため、バトルの結果を高速で計算可能 View分離のメリット ■ 初期化時の背景や、3Dモデルの生成を省略 ■ スキル実行時のアニメーションを省略 ■ Unityのオブジェクト生成 / 操作の負荷を無視 Logic のメリット2 21 Logicのみでバトルを高速実行するツールを作成し、レベルデザインを効率的に行うことが可能となった

Slide 22

Slide 22 text

データと処理を含むGameDirectorを、シリアライズして保存可能 ■ バトルの中断・復帰が可能 ○ GameDirectorに、データと処理がまとまっているため、一括でのシリアライズが容易 ○ データと共に処理もシリアライズ化されているため、復帰が容易 ■ バトルの特定の状態を復元可能 ○ バトルを n 手前に戻すなどの機能を実装可能 Logic のメリット3 22 GameDirector Json Serialize Deserialize データ処理データ処理

Slide 23

Slide 23 text

View 23 Logic Connection View

Slide 24

Slide 24 text

バトルの「表示や演出、Unityオブジェクトの管理」を全て担う部分 ■ UIの表示切り替え ■ スキルや必殺技の演出 ■ リザルト表示 ■ 3Dモデルや背景の表示 ■ etc . . . View 24 Logic で計算された値を、Unityの機能を用いて表示

Slide 25

Slide 25 text

Slide 26

Slide 26 text

原作の世界観を再現するために、 ■ バトルの種類や状況に応じて、演出を個別に変更可能であること ■ 新規バトルや演出の追加に対して、容易に拡張可能であること View の設計要件 26 特定の演出のみを、状況に応じて差し替えが可能な設計

Slide 27

Slide 27 text

複数の機能を1つの Sequence にまとめて演出ごとに実装 View の設計 27 勝利 Sequence UI 非表示 BGM の切り替え演出対象外の魔法少女を非表示勝利アニメーションを再生 Sequenceの1例: ・・・

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Sequence の再生機構として、ステートマシンを利用 Sequence の管理 29 勝利 Sequence 初期化 Sequence スキル発動 Sequence 勝利 State 初期化 State スキル発動 State SequenceとStateを対応付け

Slide 30

Slide 30 text

Sequence の再生機構として、ステートマシンを利用 Sequence の管理 30 Stateの遷移に従って、Sequenceが1つずつ順番に実行

Slide 31

Slide 31 text

View のメリット 31

Slide 32

Slide 32 text

View のメリット1 バトルの種類に応じて、必要な演出のみシーケンスを置き換えることが可能 32 スキル発動演出 Sequence 初期化 Sequence 勝利演出 Sequence 通常開始演出通常バトルレイドバトルレイドバトル開始演出通常勝利演出レイドバトル勝利演出開始演出 Sequence

Slide 33

Slide 33 text

View のメリット2 特定のバトルのみ、特殊な専用 Sequence に置き換えることが可能 33 スキル発動演出 Sequence 初期化 Sequence 勝利演出 Sequence 通常開始演出通常バトル通常勝利演出開始演出 Sequence 特殊勝利演出 1部のバトルのみ

Slide 34

Slide 34 text

Slide 35

Slide 35 text

まどドラでは、現在30 種類以上の Sequence を用いて演出を再生例：現状使われている Sequence 35 ■ バトル開始演出 ■ ターン開始演出 ■ 待機 / 必殺技入力待機 ■ スキル演出 ■ 勝利演出 ■ 敗北演出 ■ リザルト画面表示 ■ バトル初期化 ■ 復帰 ■ オートモード設定 ■ スキル発動リクエスト

Slide 36

Slide 36 text

Connection 36 Logic Connection View

Slide 37

Slide 37 text

Logic と View を適切につなげる部分 ■ View のプレイヤー操作を Logic に送信 ■ Logic の計算結果を View に送信 Connection 37 Logic と View をお互いに依存させず、仲介する中間層

Slide 38

Slide 38 text

● 情報は Command　　というデータオブジェクトに格納 Connection の設計：Command 38 Logic View Connection event OnNewCommand Command

Slide 39

Slide 39 text

● 情報は Command　　というデータオブジェクトに格納 ● Logic は Command を C# event を通して Connection に送信 ○ event により、Logic は Connection を参照せず、独立性を担保 Connection の設計：Command 39 Logic View Connection event OnNewCommand

Slide 40

Slide 40 text

● 情報は Command　　というデータオブジェクトに格納 ● Logic は Command を C# event を通して Connection に送信 ○ event により、Logic は Connection を参照せず、独立性を担保 ● Connection が View の Command 受け取り関数を呼び出し Connection の設計：Command 40 Logic View Connection event OnNewCommand

Slide 41

Slide 41 text

Command　　と Connection を通して、Logic は View を参照せずに情報を送信可能同じく、View も Logic を参照せずに情報を送信可能 Connection の設計：Command 41 Logic View Connection event OnNewCommand event OnNewCommand

Slide 42

Slide 42 text

View は Logic にスキルを実行してもらいたい → View は「スキル発動リクエスト Command」を作成して、Connection を介して Logic に送信 Connection の設計：Command の例 42 Logic View Connection スキル発動リクエスト Command

Slide 43

Slide 43 text

Logic がスキル実行結果を送信したい → Logic は「スキル実行結果 Command」を作成して、Connection を介して View に送信 Connection の設計：Command の例 43 Logic View Connection スキル発動結果 Command

Slide 44

Slide 44 text

Connection のメリット 44

Slide 45

Slide 45 text

Logic は Command の送受信先に問わず処理を行うことが可能 Connection のメリット1：Logic の単独動作 45 なにか Logic View Connection

Slide 46

Slide 46 text

Logic は Command の送受信先に問わず処理を行うことが可能 → Connection・Logic に代わるクラスを用いても、情報の送受信が可能 Connection のメリット1：Logic の単独動作 46 Connection・View 以外のインスタンス Logic

Slide 47

Slide 47 text

Logic は Command の送受信先に問わず処理を行うことが可能 → Connection・Logic に代わるクラスを用いても、情報の送受信が可能 → Command を送る軽量な機構を作り、Logic を低オーバーヘッドで動作可能 Connection のメリット1：Logic の単独動作 47 低オーバーヘッドのなにか低オーバーヘッドのインスタンス Logic

Slide 48

Slide 48 text

同じく、仮の結果 Command を View に送る機構を作って、通常とは異なる順番で演出を再生可能 Connection のメリット1：View の単独動作 48 View 特別な演出のCommandを出力するインスタンス

Slide 49

Slide 49 text

同じく、仮の結果 Command を View に送る機構を作って、通常とは異なる順番で演出を再生可能プロローグとエピローグバトルではこちらの手法を活用して、演出を再生 Connection のメリット1：View の単独動作 49 View 特別な演出のCommandを出力するインスタンスエピローグバトルで、バトル開始時自動で必殺技が発動される ©2024 Magica Quartet/Aniplex,Magia Exedra Project

Slide 50

Slide 50 text

Connection を 2 分割し、Logic と Logic Connection をサーバーに配置 Connection のメリット2：オンラインバトルの実現 50

Slide 51

Slide 51 text

Connection を 2 分割し、Logic と Logic Connection をサーバーに配置ユーザー端末 Connection のメリット2：オンラインバトルの実現 51 Logic View Connection 　

Slide 52

Slide 52 text

Connection を 2 分割し、Logic と Logic Connection をサーバーに配置 Connection のメリット2：オンラインバトルの実現 52 ユーザー端末 Logic View Logic Connection 　 View Connection 　

Slide 53

Slide 53 text

Connection を 2 分割し、Logic と Logic Connection をサーバーに配置 Connection のメリット2：オンラインバトルの実現 53 ユーザー端末 C# サーバー Logic View Logic Connection 　 View Connection 　ネット通信 →バトルの Logic をサーバー上に置いて、オンラインバトルにすることが可能

Slide 54

Slide 54 text

Logic, View, Connection の統合例 54 Logic Connection View

Slide 55

Slide 55 text

Logic, View, Connection の統合例：スキル発動ユーザーがスキルボタンを押下→スキルの実行処理→スキル演出再生の一連の処理が、本システムでどのように動いているかの紹介 55

Slide 56

Slide 56 text

Slide 57

Slide 57 text

View：スキル発動リクエスト Command 送信プレイヤーの操作を受け、スキル発動リクエストCommand送信 57

Slide 58

Slide 58 text

58 3 Command 送信

Slide 59

Slide 59 text

Logic：スキル発動処理スキル発動Commandを受け、Logic がスキル発動処理を実行 59 3 Command 送信

Slide 60

Slide 60 text

60 8 Command 送信

Slide 61

Slide 61 text

Slide 62

Slide 62 text

スキル発動：全体像 62

Slide 63

Slide 63 text

まとめ、今後の展望 63

Slide 64

Slide 64 text

バトルの設計要件 ■ ScoreAttack、PvP など多様な種類と数に対応 ○ バトル結果の高速計算により、「パラメータ調整→結果確認」イテレーションが早まり、レベルデザインが高速化まとめ 64

Slide 65

Slide 65 text

バトルの設計要件 ■ ScoreAttack、PvP など多様な種類と数に対応 ■ バトルの種類によって、柔軟にロジックや演出を変更可能 ○ Logic は GameDirector の新規作成、View はシーケンスの新規実装で柔軟に変更可能まとめ 65

Slide 66

Slide 66 text

バトルの設計要件 ■ ScoreAttack、PvP など多様な種類と数に対応 ■ バトルの種類によって、柔軟にロジックや演出を変更可能 ■ 特殊バトルにも対応可能 ○ シーケンスの具象クラス差し替えで、演出変更可能まとめ 66

Slide 67

Slide 67 text

バトルの設計要件 ■ ScoreAttack、PvP など多様な種類と数に対応 ■ バトルの種類によって、柔軟にロジックや演出を変更可能 ■ 特殊バトルにも対応可能 ■ リリース後も容易に拡張が可能 ○ Logic の GameDirector と View のシーケンスは新規実装のみで対応可能のため、既存処理に影響なしまとめ 67

Slide 68

Slide 68 text

課題、今後の展望直面した、している問題 ● 実装者によって Logic に Unity のコードが誤って混入する可能性がある ● Logic は Unity 向けに実装された機能を直接使用できないシステムの活用例 ● Logicをサーバー上に置くことによるオンラインバトル化 ● バックアップデータを用いた「一手戻す」デバッグツールの作成 68