Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UniRxでMV(R)Pパターン をやってみた

12,069 views

Published on

Model-View-(Reactive)Presenterパターンをやってみた話

Published in: Technology
  • Be the first to comment

UniRxでMV(R)Pパターン をやってみた

  1. 1. UniRxでMV(R)Pパターン をやってみた @toRisouP 2015/04/16
  2. 2. 自己紹介 • とりすーぷ(@toRisouP) • 趣味でUnityいじってます
  3. 3. みくみくまうす • ニコ生の配信支援ツール • MMDモデルがニコ生のコメントを読み上げる • フリーソフトとして公開中 • Unity5製(内部でUniRx使ってる) http://mikumikumouth.net/
  4. 4. uGUI Unity GUI
  5. 5. みくみくまうす
  6. 6. uGUIに適したM-V-○パターン
  7. 7. Model View (Reactive) Presenter
  8. 8. MV(R)Pパターン • UniRxを使ったuGUIのデザインパターン • ModelとViewを「Presenter」がつなぐ • データのやり取りにObservableとReactivePropertyを使う • View/Modelの変更をReactiveに反映できる
  9. 9. Model-View-(Reactive)Presenterパターン View (uGUIコンポーネント等)) Presenter Model ModelはPresenterに依存しない ViewはPresenterに依存しない PresenterがModelとViewを参照する
  10. 10. Model-View-(Reactive)Presenterパターン View (uGUIコンポーネント等)) Presenter Model ReactiveProperty 内部状態の変化の通知 Subscribe Viewへ反映 xxxAsObservable ユーザ入力 Subscribe Modelに反映
  11. 11. みくみくまうす MV(R)Pパターンで実装してある
  12. 12. MV(R)P実装例 • 読み上げタイミング調整スライダ • Slider または InputField を調整すると値をModelに反映 • 片方のViewを変動させるともう一方のViewに反映 • InputFieldの値域は-1500~1500 • ただしSliderの値は10刻み(-150~150)
  13. 13. Model (ConfigComponent) 関係図 SpeechTimingSlider Presenter SpeechTimingReactiveProperty OnValueChangedAsObservable() SpeechTimingInputField Presenter OnEndEditAsObservable()
  14. 14. SpeechTimingSliderPresenter
  15. 15. SpeechTimingInputFieldPresenter
  16. 16. MV(R)Pで実装してみた感想 • シンプルにキレイにまとまる • ModelとViewの独立性が保たれるのがイイ! • Viewの変換ロジックにRxのオペレータがそのまま使える • Presenterの作り方は考える必要がありそう – SceneあたりPresenterは1つにして集中管理する? – 1つのUI要素あたり1つPresenterを作る?
  17. 17. まとめ • UnityでRxが使えるの本当にスバラシイ – uGUI周りがキレイに書けてとても助かる – ゲームロジックとも結構相性が良い – もっと流行らせたい • MV(R)Pは現時点ではuGUIにおける最適解かも – Rxの難しい部分が出てこないのでRx初心者でも使えるはず @toRisouP
  18. 18. PresenterをView要素毎に作るパターン View Presenter Model View Presenter View Presenter View Presenter ○ GetComponentでPresenterがViewを取得できる(スクリプト内で完結する) ○ 1Presenter当たりのコード量が少なくなって読みやすくなる × View要素の数だけPresenterが必要になる
  19. 19. みくみくまうすのPresenterの数 • 1UI要素あたり1Presenterで作ったら大変なことになった
  20. 20. Presenterを1つにまとめるパターン View Presenter Model View View View ○ 1つのPresenterで管理するのでどこで処理しているか把握しやすい ○ View要素の数の変更に対応しやすい × ViewとPresenterの紐付けがInspector Viewからになる

×