ゲームエンジンとMVC

1. ゲームエンジンと MVC Aiming 大阪開発グループ松田理孝

2. 自己紹介 ● 松田理孝（マツダヨシタカ） ● エンジニア ○ サーバやったりクライアントやったり ■ サポートやったりWebAPIやってたり ● いろいろやってます ● 使ったことあるゲームエンジン ○ Unity ○ Cocos2d-x ○ XNA（MonoGame） ○ Flash（ゲームエンジン？）

3. はじめに ● セッションの動機 ○ ゲームエンジンを活用する上でMVCは必須 ○ ゲーム業界ではMVCに対する理解が浅い

4. はじめに ● セッションの目的 ○ MVCとは何かを知ってもらう ○ ゲームエンジン別に設計が変わることを知ってもらう

5. アジェンダ 1. MVCとは 2. そもそもなんでMVCをするのか 3. MVCの各役割 4. MVCした後にできる事、すべき事 5. ゲームエンジンとMVC

6. MVCとは ● MVC（Model View Controller モデル・ビュー・コントローラ）は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。 ○ Wikipediaより

7. お前は何を言っているんだ

8. MVCの前にPDS ● PDSとは ○ Presentation Domain Separation ● Presentation層 ● Domain層 ○ に分離して考える

9. PDSとは Domain層Presentation層 ● ドメイン固有言語 ● 汎用言語

10. ドメイン固有言語？

11. ドメイン固有言語とは ● ドメイン固有言語（ドメインこゆうげんご、英: domain-specific language、DSL）とは、特定のタスク向けに設計されたコンピュータ言語を意味する。

12. お前は何を言っているんだ

13. ドメイン固有言語の例 ● とある表現を記述する事に特化した言語 ○ WEBだとHTML ○ FlashだとMXML ○ Cocos2d-xだとgui定義するlua ○ Unity ■ シーンファイル ○ 色んな所で ■ XML系（AXMLとか、XAMLとか） ■ JSONとか ○ makefile ■ makeに特化してる

14. PSDとは Domain層Presentation層 ● ドメイン固有言語 ○ HTML ○ XML ○ JSON ● 汎用言語

15. 汎用言語？

16. 汎用言語 ● プログラム言語、スクリプト言語 ○ C ○ C++ ○ Java/Scala ○ Haskell ○ C#/F#/VB ○ Python ○ ruby ○ PHP ○ JavaScript ○ ActionScript

17. PSDとは Domain層Presentation層 ● ドメイン固有言語 ○ HTML ○ XML ○ JSON ● 汎用言語 ○ C++ ○ C# ○ ActionScript 分離

18. 分離できたのは良いが ● P層だけではアプリはできない ● 同じくD層だけでもできない ○ makefileみたいなmakeのためだけに存在するドメイン固有言語はD層なんか当然必要ないが ● ゲームクライアントのようなリッチなアプリケーションは繋ぐ必要がある

19. その繋ぎ方が MVCと呼ばれるテクニック

20. アジェンダ 1. MVCとは 2. そもそもなんでMVCPDSをするのか 3. MVCの各役割 4. MVCした後にできる事、すべき事 5. ゲームエンジンとMVC

21. 僕たちが基本無料でお金を稼ぐには

22. お金の前に時間を使ってもわらないといけない

23. 逆に言うと、ユーザは時間を使わないゲームに課金はしない

24. 時間を使ってもらうためにユーザがストレスと感じるものは排除（変更）する必要がある

25. 変更しようとすると ● ２種類のバグが出る ○ ロジックのバグ ■ そもそも正常に動かなくなった ■ 正しく操作しているのに落ちた ● 頑張って直してください ● そもそも出しにくくする ○ テストするとか ○ UXのバグ ● 正常に動作はしているけども...... ■ UIが使いにくくなった ■ ゲームバランスが崩壊した ■ 動作がもっさり、重い

26. なので

27. PDSをする理由 UIとロジックの疎結合を達成して、実装やバグを分離するため。（UIの変更ぐらいサクっとやりたい）

28. 疎結合 ● 情報システムにおいて，二つのシステムが緩やかに結びついた状態。システムどうしが標準的なインターフェースに基づいて接続されているため，一方が他方を容易に取り替えられる状態をいう。 ○ (weblioより)

29. つまりPDSとは汎用型特化型 ● ドメイン固有言語 ○ HTML ○ XML ○ JSON ● 汎用言語 ○ C++ ○ C# ○ ActionScript ここのやり取りを標準的なインターフェイスに基づいて接続させる

30. やりたいこと GUI CUI struct Character { public int Level; public int HP; } class Battle { void Attack() { character.HP = 0; } } 標準的なインターフェイス

32. MVCとか Model View Controller

33. MVCはPDSだと？？ Domain層（汎用） Presentation層（ドメイン特化） Model View Controller

34. 　Viewってこの中でどっち？ GUI CUI struct Character { public int Level; public int HP; } class Battle { void Attack() { character.HP = 0; } } 標準的なインターフェイス

35. View ● ユーザが直接見る部分 ○ HTML ○ DirectX ○ MXML

36. MVCとはPDS化するためのテクニック Domain層（汎用） Presentation層（ドメイン特化） Model View Controller

37. Model ● (3Dとかのモデルではない) ● アプリケーションの処理を行う部分 ○ ダメージ計算したり ○ 座標計算したり ■ Modelって名前意味不明だよね ● PDSのDomainも意味不明だよね ● ロジックとか言われてる

38. MVCとはPDS化するためのテクニック Domain層（汎用） Presentation層（ドメイン特化） Model View Controller

39. Controller コントローラー

40. 今までの知識で MVCを整理

41. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller 黒い画面が見える！ダメージは５０やで

42. Controllerの仕事 1. ModelとViewの橋渡し a. ContollerはModelとViewを持っている

43. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller あんたらこれから仲良しなまだ黒いよ？ダメージは５０やで

44. Controllerの仕事 1. ModelとViewの橋渡し a. ContollerはModelとViewを持っている b. Viewが表示する内容を取得できるようにする

45. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller ５０！！ダメージは５０やで Controllerさんに教えてもらった Modelさんの計算結果見ちゃお仲良し

46. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller まだ５０だよ？次のダメージは７０やで仲良し Modelの値が更新！

47. Controllerの仕事 1. ModelとViewの橋渡し a. ContollerはModelとViewを持っている b. Viewが表示する内容を取得できるようにする c. Modelの更新通知をViewに投げられるようにする

48. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller ７０だ！次のダメージは７０やで仲良し更新したで見に行くわ

49. さて、Controllerはどっち？ Domain層（汎用） Presentation層（ドメイン特化） Model View Controller

50. そもそも分離の目的 ● 汎用言語側をライブラリ化したい ● 様々なUIで同じロジックを動かしたい

51. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller

52. Controllerは Viewを知らざるを得ない

53. さて、Controllerはどっち？ Domain層（汎用） Presentation層（ドメイン特化） ModelView Controller Viewに引きづられて、 ViewとModelと繋ぐ

54. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller ModelもViewに引きづられて無い？

55. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller オブザーバパターン更新したで更新通知をViewに送るだけのインターフェイス

56. 疎結合 ● 情報システムにおいて，二つのシステムが緩やかに結びついた状態。システムどうしが標準的なインターフェースに基づいて接続されているため，一方が他方を容易に取り替えられる状態をいう。 ○ (weblioより)

57. ダメージポップユーザ HPゲージダメージ計算オブザーバパターン神ゲー！！アクションインターフェイスが一緒だからどこがどれに通知しても良い！レベルアップ

58. Viewのもう一つの役割

59. ユーザ View ユーザの見せる部分 Model 計算する部分 Controller ずっとダメージの数字ばかり流れてるけど、僕も攻撃ボタン押したいな

60. View ● ユーザが直接見る部分 ○ HTML ○ DirectX ○ MXML ● ユーザが直接入力する部分 ○ ボタン ○ テキストボックス ○ タップ（クリック） ○ ドラッグ＆ドロップ

61. ユーザ View 入力される部分 Model 計算する部分 Controller

62. Controllerの仕事 1. ModelとViewの橋渡し a. 描画部分 i. ContollerはModelとViewを持っている ii. Viewが表示する内容を取得できるようにする iii. Modelの更新通知をViewに投げられるようにする b. 入力部分 i. Viewによって呼ばれたイベントと、実際に行う Modelの処理を関連付ける

63. ユーザ View 入力される部分 Model 計算する部分 Controller そのボタン押されたらこの計算関数呼びなさい

65. ● ライブラリ化 MVCを理解した後にすべき事

66. 汎用言語側 ● ちゃんと動作保障できたDLL単位で分離できれば、資産になる ● コードを共通化することで保守部分が減る ● 車輪の再発明も少なくなるライブラリ化の恩恵を受けやすくなる

67. ドメイン特化言語側 ● ゲームエンジンUnityを使用しないツール ○ 汎用言語側を使いまわして作成 ● 運用ツールを効率よく作成 ○ .NETの十八番な ■ PowerShellでさえDLL使える ● 設定ツールを共通化 ○ 設定ツールが吐き出したテキストの読み書きのインターフェイスとかスタジオ内で共通化しても良いレベルツール作成が楽に！

68. ● 実はPDSはクライアント側だけで適応される概念ではないライブラリ化

69. クライアントサーバ

70. サーバにおけるPDS Domain層Presentation層 ● ドメイン固有言語 ○ プロトコル ● 汎用言語

71. View ● クライアントから受け取る部分 ○ ユーザからイベントを受け取るのと一緒 ● クライアントへ通知する部分 ○ ユーザに見せるのと一緒

72. ● 実はPDSはクライアント側だけで適応される概念ではない ○ 似たような考えはサーバでも必要 ○ プロトコル受け取った部分にロジックを書くのはナンセンス ■ もっとも、この辺は最初の設計思想などが深く絡んでくるので、後からやりづらい部分もある ● そもそもフレームワークはこのレベルで考えてなきゃダメ ○ ツールでも使うもの多いよね ■ 確率とか調べるのツール絶対いるよね ● ガチャとかスキルとか ○ デバコマとかナンセンスライブラリ化

73. ● ライブラリ化 ● IDEの使用 MVCを理解した後にすべき事

74. ● 統合開発環境 ○ VisualStudio ○ XCode ○ Eclipse ■ なんかいろいろある IDE

75. ● MVC化はそもそも単純にファイル数が増える ○ 手間を嫌ってMVCやらない選択肢は無い ○ ファイル数増える分を吸収するためにIDEを使う ■ ここにおけるGUIの威力って実は凄い ○ IDEだとGUI作成機能だってある ■ ゲームだとゲームエンジンによっちゃうけど ● 効率よく良い物を作り上げられるなぜIDEが必要か

76. ● 汎用言語を最大限活用できる ○ C#なんかは言語そのものがIDEにフレンドリー ■ 入力補完 ● 当然のようにエラー出ててもインテリセンス効く ● 型やスコープ、履歴から最適な候補を選んでくれる ● typoも補正してくれる ■ 自動実装系 ● スマートタブ ○ メソッドの自動実装 ○ クラス名から判断して自動でusing ○ インターフェイスや抽象クラスの自動実装 ● スニペット ○ for/foreachは当然 ○ switch(enum)で全case列挙してくれる ■ 当然break;までなぜIDEが必要か

77. ● ライブラリ化 ● IDEの使用 ● テスト MVCを理解した後にすべき事

78. ● そもそもテストはテストが目的ではない ○ バグを出さないようにするのが目的 ■ チーム全体でバグを出さない自信があるならテストは必要ないテスト

79. ● 単体テストしやすい環境って言うのもある ○ ただBooleanでやれば良いってモノでもない ○ 単体テスト書く時にIDEの力を借りると ■ テストファースト ● メソッド関数の自動生成機能とかある ■ テストのデバッグ ● ブレークポイント打つだけ ■ いくつか選択してテスト ● チェックリスト付けるだけテスト

80. ● 他のテストとか ○ いろいろ各環境で考えなきゃいけない部分 ○ コストと成果のトレードオフ ■ 自動化！自動化！ ● リファクタリング ○ PDSしてるとこの辺も楽になる ○ ロジックのリファクタリングは当然 ● 分離してれば各コンポーネント毎でタイマー使ってパフォーマンス計測もしやすくなるテスト

81. ● ライブラリ化 ● テスト ● IDEの使用 ● インターフェイスのテンプレ化 ○ 開発者はとあるラインに沿って開発できるべき ■ 基本的にRailsと同じ方針 ● DryとかYagniとか良いと思う ○ この辺のインターフェイス作成は経験者の仕事 ■ ノウハウが活きる部分だと思う MVCを理解した後にすべき事

82. ● ツールの作成 ○ ロジックが分離できるメリットは大きい ■ rubyでもPythonでも ■ .NETならより幅広いリッチなツールが作れる ● Unity起動せずにオンライン戦闘デバッグとかできる ○ できるだけじゃなくて、楽にツールが作れるのが大事 ■ C++でもJavaでも ● ロジックなんて環境依存なもの少ないはず（だよね？）だから、コンパイラ依存少ないと思う MVCを理解した後にできる事

84. ● ゲームエンジンによってMVCパターンは違う ○ ドメイン固有言語が変わるのだから当然 ○ というかそもそも設計方針が違う ● 今回紹介するエンジン ○ Flash ○ Unity ○ Cocos2d-x ゲームエンジンとMVC

85. ● やるべき事は一緒 ○ PDS ■ 見た目とロジックの分離 ○ すべてにおいて大事な概念 ■ ViewHelper ● XAML/C#だとコードビハインド ● 汎用言語で書かれるのが普通エンジンごとに方針は違うが

86. ViewHelper テキストボックス View ViewHelper <GUI> <TextBox name=”textbox1”/> </GUI> TextBox textbox1; == textbox1 = getComponent(“textbox1”);

87. ViewHelper ほげふが～～ View ViewHelper <GUI> <TextBox name=”textbox1”/> </GUI> TextBox textbox1; == textbox1 = getComponent(“textbox1”); == textbox1.text = “ほげふが～～”;

88. ダメージポップユーザ HPゲージダメージ計算オブザーバパターン神ゲー！！アクションインターフェイスが一緒だからどこがどれに通知しても良い！レベルアップ

89. ViewHelperとModel なにもないよ ViewHelper Model class TextBox : IObserver { private TextBox textbox1; private Character character; public void Update() { textbox1.text = “HPは” + character.CurrentHP; } } class Character : Observable { public int CurrentHP { get; } public void Start() { CurrentHP = 50; Observable.Update(); } }

90. ViewHelperとModel なにもないよ ViewHelper Model class TextBox : IObserver { private TextBox textbox1; private Character character; public void Update() { textbox1.text = “HPは” + character.CurrentHP; } } class Character : Observable { public int CurrentHP { get; } public void Start() { CurrentHP = 50; Observable.Update(); } } 標準的なインターフェイス

91. ViewHelperとModel なにもないよ ViewHelper Model class TextBox : IObserver { private TextBox textbox1; private Character character; public void Update() { textbox1.text = “HPは” + character.CurrentHP; } } class Character : Observable { public int CurrentHP { get; } public void Start() { CurrentHP = 50; Observable.Update(); } }更新通知

92. ViewHelperとModel HPは50 ViewHelper Model class TextBox : IObserver { private TextBox textbox1; private Character character; public void Update() { textbox1.text = “HPは” + character.CurrentHP; } } class Character : Observable { public int CurrentHP { get; } public void Start() { CurrentHP = 50; Observable.Update(); } } 描画

93. ● IMXMLObjectインターフェイス ○ MXMLにタグ付けできるViewHelper ○ あんまり使ってるとこ見たこと無い ■ というかMXMLのscriptに直接書く人いる ● そりゃスパゲティになる Flash

94. ● MonoBehaviour ○ 実際に動くモデルに付随する「ViewHelper」 ■ コルーチンを使うロジックなんかにも使うけど ○ 当然ここにロジックを書くべきではない ■ 結構やっちゃいがち ● 物理エンジンとの棲み分けもあるし ■ というかサンプルが微妙い Unity

95. ● 自前のViewHelper ○ ViewHelperを作りやすい構造は必須 ■ ただどうしてもViewの要素が多くなるとしんどい ● Flashでも変わらないけど ○ 自前で書くハードルが高い ■ というか知識が無いのにいきなり書けない ● MonoBehaviour,IMXMLObjectみたいに用意されてない Cocos2d-x

96. ● イマドキの開発でPDSの考え方は必須 ○ みなさんP層にロジック書いてませんか？ ○ どうしようもなくてstaticにしてませんか？ ● IDEのサポート受けていこう ● MVCは使う環境に則った方針でやる ○ 新しいエンジン触るときはまず最適解を ■ あとから変更とか絶対無理 ● 経験ある人の大仕事 ○ ViewHelperを作ろうまとめ

97. ● 理想 ○ UIデザイン ■ デザイナーがダミーデータでUI/モーションを作る ■ エンジニアが繋ぎこむ ■ 完成 ● デザイナーさんの協力も必須になってくる ○ そもそも無くしたい ■ 突然ボタンが効かなくなるとか ■ 旧コンポーネントの使い勝手が悪いから新コンポーネントへの移行とか ● 旧コンポーネントがそもそも改修できないとか ■ 似たUIなのに挙動が違うとか ● なんで同じの数回も実装してんの？将来的には

98. Let's 疎結合

99. おまけ Aiming 大阪開発グループ松田理孝

100. P層はプラットフォームごとに別 Domain層（汎用） Presentation層（ドメイン特化） ModelView Controller 環境依存で共有化できない

101. Mvvm Cross

102. Model-View-ViewModel Domain層（汎用） Presentation層（ドメイン特化） ModelView ViewModel View用のモデル

103. ViewModelとは ViewModel View ● 汎用言語 ● 使用するModelの読み込み ● Viewに合わせて変換 ○ enum Week.Sunday ■ 日本：日曜日 ■ 英語：Sunday データバインディング

104. Mvvm Crossとは ● Xamarin（Mono）で使われる技術 ● Crossのとおり、マルチプラットフォームで MVVMを達成しようというやつ ○ Windows(.NET) ○ MacOS X ○ Android ○ iOS

105. Viewは各プラットフォームに合わせる ● Windows：XAML ● Android：AXML ○ XamarinのAndroidのUIエディタ凄い良い ● iOS：StoryBoard

106. どこを共通化するか ModelView ViewModel 汎用言語（C#）部分

107. Portable Class Library(PCL) ● PortableなDLL ● iOSやAndroidなんかでも使えることを保障 ○ 自作できる ■ 自分でどの環境に対応させるか選べる ● DLLごとコピペ移動で使える

108. PCLで共通化 ModelView ViewModel Portable Class Library

109. MvvmCross ModelView ViewModel Portable Class LibraryView View Mvvm Cross ViewModelも共有化できる！

110. ご静聴ありがとうございました

ゲームエンジンとMVC

AimingStudy

Transcript