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

@toRisouP

2015/04/16

自己紹介

• とりすーぷ（@toRisouP)

•趣味でUnityいじってます

みくみくまうす

• ニコ生の配信支援ツール

• MMDモデルがニコ生のコメントを読み上げる

• フリーソフトとして公開中

• Unity5製（内部でUniRx使ってる）

http://mikumikumouth.net/

uGUIUnity GUI

みくみくまうす

uGUIに適したM-V-○パターン

Model View (Reactive) Presenter

MV(R)Pパターン

• UniRxを使ったuGUIのデザインパターン

• ModelとViewを「Presenter」がつなぐ

• データのやり取りにObservableとReactivePropertyを使う

• View/Modelの変更をReactiveに反映できる

Model-View-(Reactive)Presenterパターン

View(uGUIコンポーネント等)）

Presenter

Model

ModelはPresenterに依存しない

ViewはPresenterに依存しない

PresenterがModelとViewを参照する

Model-View-(Reactive)Presenterパターン

View(uGUIコンポーネント等)）

Presenter

Model

ReactiveProperty内部状態の変化の通知

SubscribeViewへ反映

xxxAsObservableユーザ入力

SubscribeModelに反映

みくみくまうす

MV(R)Pパターンで実装してある

MV(R)P実装例

• 読み上げタイミング調整スライダ

• Slider または InputField を調整すると値をModelに反映• 片方のViewを変動させるともう一方のViewに反映• InputFieldの値域は-1500～1500• ただしSliderの値は10刻み（-150～150）

Model (ConfigComponent)

関係図

SpeechTimingSliderPresenter

SpeechTimingReactiveProperty

OnValueChangedAsObservable()

SpeechTimingInputFieldPresenter

OnEndEditAsObservable()

SpeechTimingSliderPresenter

SpeechTimingInputFieldPresenter

MV(R)Pで実装してみた感想

• シンプルにキレイにまとまる

• ModelとViewの独立性が保たれるのがイイ！

• Viewの変換ロジックにRxのオペレータがそのまま使える

• Presenterの作り方は考える必要がありそう

– SceneあたりPresenterは1つにして集中管理する？

– 1つのUI要素あたり1つPresenterを作る？

まとめ

• UnityでRxが使えるの本当にスバラシイ

– uGUI周りがキレイに書けてとても助かる

– ゲームロジックとも結構相性が良い

– もっと流行らせたい

• MV(R)Pは現時点ではuGUIにおける最適解かも

– Rxの難しい部分が出てこないのでRx初心者でも使えるはず

@toRisouP

PresenterをView要素毎に作るパターン

View

Presenter

Model

View

Presenter

View

Presenter

View

Presenter

○ GetComponentでPresenterがViewを取得できる(スクリプト内で完結する)

○ 1Presenter当たりのコード量が少なくなって読みやすくなる

× View要素の数だけPresenterが必要になる

みくみくまうすのPresenterの数

• １UI要素あたり１Presenterで作ったら大変なことになった

Presenterを1つにまとめるパターン

View

Presenter

Model

View View View

○ 1つのPresenterで管理するのでどこで処理しているか把握しやすい

○ View要素の数の変更に対応しやすい

× ViewとPresenterの紐付けがInspector Viewからになる