0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MVPパターンをUnityエディタ上で実装する仕組みを作ってみた

Posted at

はじめに

記事執筆時点では来週になりますが、個人制作ゲーム「求む!洞窟探検家」が 2024/10/17 リリースされます。

このゲームのUIは、Unityエディタでコンポーネントをポチポチ追加する形で実装しました。
少しユニークだと思いますので、この記事ではどのような機能を用意したのかと、その使い方を紹介します。今回は機能の実装部分については触れません。

動機

リリースしたスマホアプリは、コードの実装を変えて反映させる前に Appleさん、Googleさんの審査が必要になります。特にUIはあちこちの画面ごとに実装が必要で、少し変えたいということも多いです。これを、できるだけノーコードで、かつ、わかりやすく変更できるようにしたいと思いました。

ライフゲージの例

スクリーンショット 2024-10-12 14.35.06.png
よくあるようなライフゲージです。このゲームは探検中の状態でセーブ&復帰ができるため、ライフもセーブされます。

UIのイメージなどを配置し終わったら、まずMVPの P にあたる、SaveDataPresenterコンポーネントを適当なGameObjectにアタッチします。

スクリーンショット 2024-10-12 15.11.49.png
ここでは詳しく触れませんが、このゲームのセーブデータは、テーブルデータを階層構造で複数保持し、実行中はその変更を監視できるリアクティブなデータ構造になっています。

SaveDataPresenterは、セーブデータの Data Path に記述したパスにあたるテーブルのColumn名のインデックス番目の値を監視し、その変更を Notify To で指定したビューへ通知します。

この例では、Player/Physical の life列 0番目 の変更を LifeGauge へ通知します。

スクリーンショット 2024-10-12 15.23.09.png
LifeGauge には、MVPパターンの V にあたる、ViewPositionFloatコンポーネントをアタッチします。
ViewPositionFloatは、float値が通知されると、アタッチしているGameObjectのRectTransformの位置を変更します。また、ゲームによくあるゲージがゆっくり伸縮するようなアニメーションもこのコンポーネントが処理します。

この例では、Rectの右側の位置を、通知された値の3.2倍に設定しています。

life.gif
これだけで、どこかでダメージを受けても、何かで回復したりしても、アニメーション付きで正しいゲージが表示されます。

ボリューム調整の例

スクリーンショット 2024-10-12 16.17.27.png
設定画面のスライダーでボリュームを調整します。

スクリーンショット 2024-10-12 16.19.40.png
このゲームでは、ボリューム調整など端末によって変えたいような設定は、セーブデータとは別に PlayerPrefs を使って保存しています。

先ほどと似ていますが、今回は PlayerPrefPresenterを使います。

この例では、volume_bgm というキーの値を SliderBGM へ通知します。

スクリーンショット 2024-10-12 16.24.51.png
Slider BGM には、ViewSelectableIntコンポーネントと、Sliderコンポーネントをアタッチしています。

ViewSelectableIntは、通知されたint値を、同じGameObjectにアタッチされているSelectable(Sliderの基本クラス)コンポーネントの値として設定します。

これにより、PlayerPrefsに保存されているボリュームの値をスライダーに反映させることができます。

さらに、PlayerPrefPresenter(と各PlayerPrefs値を管理するクラス)は、操作された値の通知を受け取る機能があり、いまの設定だけで自動的にスライダーの操作がPlayerPrefsへ反映されるようになります。

その他の機能

スクリーンショット 2024-10-12 16.51.05.png
この他にも、通知されたstring値からアドレスを生成して非同期でリソースを読み込み、Imageコンポーネントの画像へ反映させる ViewGraphicString や、

スクリーンショット 2024-10-12 16.55.02.png
通知されたstring値をキーとして、テーブルから指定列の値を検索してビューへ通知する OperatorKeyToFloat や、

スクリーンショット 2024-10-12 16.54.04.png
通知された値に単純な計算を(複数段)加えてビューへ通知する OperatorCalcFloat や、

スクリーンショット 2024-10-12 17.01.46.png
スクリーンショット 2024-10-12 17.12.01.png
もっと複雑な計算を VisualScript で行う、OperatorScriptFloat なども用意しました。

まとめ

特殊な計算が必要な場合は、C#コードで書いたメソッドをVisualScripting経由で呼び出すなどする場合もありましたが、ほとんどはこれらの組み合わせで実装することができました。

執筆時点ではリリース前ですが、これだけノーコードで実装していれば、アセットだけで柔軟に更新できるはずです(バグがなければ😅)

また、自分は個人で制作しましたが、単純なものは簡単に実装できるので、デザイナさんやプランナさんが実装するというチーム運用もできるかもしれません。

宣伝

〜 私たちと洞窟調査をしませんか? 〜

『求む!洞窟探検家』は、シンプル操作の新体験2.8Dアドベンチャーです。
スマホ向けに App Store、Google Play Store で 10/17 リリースです!

公式サイト:https://sites.google.com/view/wanted-cave-explorer/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?