Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@Nakashima_Toshiki

Unityで学ぶMVPパターン(2) ~ Viewコンポーネントを複数にする ~

前の記事 - 目次 - 次の記事
前回作ったUniRxで作成したMVPパターンを複数のViewコンポーネントを使えるようにする方法について考察

目的

体力(Health)の値に応じて以下の処理を反映したい。

  • 体力バーを更新
  • テキスト形式で表示
  • 体力が低くなると画面の上下に血痕(赤い画像)を表示する

これらをMVPパターンで実装します。

シーンの作成

以下の画像のようにシーンを作成します。

image.png

Githubに準備済みのプロジェクトを上げておきます。
02-UniRx-HealthBar-MultiView-Base

コンポーネントの作成

MVPパターンのViewにあたるコンポーネントを3種類作成します。
あと、Presenterコンポーネントを複数のViewを登録できるように改造します。

ParameterViewBase

作成するViewコンポーネントはこのクラスを継承させます。
virtualメソッドを作成して処理は空にします。

ParameterViewBase.cs
using UnityEngine;

public class ParameterViewBase : MonoBehaviour
{
    virtual public void SetParameter(int max, int value)
    {
    }
}

ParameterBar

以前作ったParameterBarコンポーネントを改造。

ParameterViewBaseを継承させ、
SetParameterメソッドはoverride修飾子をつけます。

ParameterBar.cs
using UnityEngine;

public class ParameterBar : ParameterViewBase
{
    public RectTransform valueRect;

    override public void SetParameter(int max, int value)
    {
        valueRect.localScale = new Vector3((float)value / max, 1, 1);
    }
}

ParameterText

体力の最大値と現在値をテキスト表示します。

ParameterText.cs
using UnityEngine.UI;

public class ParameterText : ParameterViewBase
{
    public Text valueText;

    override public void SetParameter(int max, int value)
    {
        valueText.text = value + " / " + max;
    }
}

ParameterImage

画面上下のImage画像パネルにアルファ値を設定します。
体力が低くなると赤いイメージ画像が表示するようになります。

ParameterText.cs
using UnityEngine;
using UnityEngine.UI;

public class ParameterImage : ParameterViewBase
{
    public Image valueImage;

    override public void SetParameter(int max, int value)
    {
        var color = valueImage.color;
        valueImage.color = new Color(color.r, color.g, color.b, Mathf.Lerp(1, 0, (float)value / max));
    }
}

ParameterPresenter

以前作ったParameterPresenterクラスのview変数を配列に変更。

ParameterViewBase[] 変数配列は
ParameterViewBaseを継承したクラスを登録することができます。

Awakeメソッドにて登録したクラスのSetParameterメソッドは
UniRxによりHealth値の変更時に実行されるようになります。

ParameterPresenter.cs
using UnityEngine;
using UniRx;

public class ParameterPresenter : MonoBehaviour {

    public StatusModel model;

    public ParameterViewBase[] healthViews;

    void Awake()
    {
        foreach (var view in healthViews)
        {
            model.healthRP.Subscribe(value => { view.SetParameter(model.healthMax, value); });
        }
    }
}

コンポーネントの追加

以下の画像のように作成したコンポーネントをゲームオブジェクトに追加します。

ParameterImageコンポーネントは上下のイメージ画像に追加するので、2つのゲームオブジェクトに存在します。

あとは、コンポーネントの依存状態をドラッグ&ドロップで設定して完成。

image.png

完成

inspectorからHealth Rxの値を変えると

  • 体力バーの長さが変わる
  • テキスト表示が更新される
  • 画面上下が赤くなる

で3種類のViewが反映されます。

image.png

Githubに完成プロジェクトを上げておきます。

03-UniRx-HealthBar-MultiView

まとめ

ParameterViewBaseを継承したコンポーネントはすべて
ParameterPresenterコンポーネントに依存を追加するだけで
値の変化と見た目の変化を連動することができます。

自分が作っているゲームにで
Updateメソッドが膨れ上がり拡張しづらいと感じた場合、
MVPデザインパターンを実装してみることを検討してみてください。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Nakashima_Toshiki
フリーランスのエンジニア 今は自分のホームページに記事を書いています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?