UniRxを使用したuGUIのデザインパターンを実装してみた

以下の記事を参考にUniRxを使用したuGUIのデザインパターンを実装してみました

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

www.slideshare.net

今回やってみたこと

記載したスライドを参考にUniRxを使用してMV(R)Pパターンの実装をしてみました。処理の内容は、RedButton,BlueButton,YellowButtonの３つのボタンを用意して、ボタンを押したらSphereの色が変わるようにしました。

これがデフォルトで

RedButtonを押すとこうなります

使用した環境

• Unity 2018.1.3f1
• UniRx 6.1.2

MV(R)Pモデル

これは、Model-Presenter-Viewの構成で、今回だと下記の紐づけになります。

• Model - ColorConfigComponent.cs
• Presenter - ColorButtonPresenter.cs
• View - uGUI(Button)

該当するソースコードはGitHubで確認できます。(Assets配下にあります。)
github.com

今回だと、以下のコードでuGUIからの操作を受けて ReactivePropertyで定義した変数の値を変更しています。(View →Model)

        ///<Summary>
        ///View → Model への反映
        ///</Summary>
        redColorStream
            .Subscribe(c => colorConfig.colorConfig.Value = c );

        blueColorStream
            .Subscribe(c => colorConfig.colorConfig.Value = c);

        yellowColorStream
            .Subscribe(c => colorConfig.colorConfig.Value = c);

以下のコードでReactivePropertyの値が変更されたことによる、Viewへの操作を行っています。

        ///<Summary>
        ///Model → View への反映
        ///</Summary>
        colorConfig.colorConfig
            .Subscribe(c => material.color = c);

こうなりました。ModelとViewはお互い依存していませんし、きれいに書けたんじゃないかなと思います。最初に紹介したスライドでも最後の方に書いてありますが、uGUIのコンポーネント毎にPresenterを作るか、Seceneでまとめてしまうかという議題があるのですが、今回はまとめてみました。そのため、スクリプトは一つですんでいるのですが、PresenterとView(Button)を紐付ける方法がInsperctorからの指定になっており、コンポーネントが増えるとそれはそれで非常に見づらくなることが考えられます。

感想

UniRx、もっと書けるようになりたい。