Unity でフローティング UI を簡単に実装できる OSS「RectPop」を公開しました
RectPop
詳細は README を見てください。日本語版のドキュメントも用意しているのでそちらを見てもらうのが良いかと思います。
動機
ゲームを作る上で tooltip, popover, context menu などを必ずどこかのタイミングで作ると思います。マインクラフトでいうとこんな感じの UI です。
この手の UI を作る上でよくあるのが、既に実装が存在していて、それと全く同じものを作りたい。ただ既存の実装は特定の UI と結合していて再利用できないというケースです。Unity Editor で既存の GameObject を Prefab 化するのは簡単ですが、
- 単一のインスタンスを使いまわしたい
- 疎結合な実装をしたい
- 複数の解像度に対応したい
など、共通化を図ると少し面倒です。この手の実装を始める上で最初に思いつくのは Unity の Scripting API である Transform.SetParent 辺りだと思います。しかし、この API だとフローティング UI を各オブジェクト側で参照せざるを得ないため、要件に対しては役不足感が否めないです。往々にして痺れを切らした誰かがイベント駆動で疎結合な実装をどこかのタイミングで開発するというのが世の常だと思います。
今回はこちらを解消すべく、フローティング UI の共通実装を「RectPop」という OSS として公開しました。
概要
RectTransform を持つ任意のオブジェクトと、そのオブジェクトが配置されている Canvas をリクエストとして渡すと、フローティング UI の表示に必要な設定を返します。
つまり、この OSS でやっていることは RectTransform と Canvas を元に、フローティング UI を表示するのにちょうどいい設定をレスポンスとして返す です。前述したように Unity Editor 上で tooltip や popover の実装を作るのは簡単なはずなので、この OSS の責務からは外しています。
計算結果を prefab に適用するだけでいい感じの位置, 向きにフローティング UI を出すことができます。あとで説明しますが、表示のモードもいくつかあるので気に入ったモードを選択してもらえると良いかと思います。
この実装はこちらに置いてあるので、git clone して動かしてみてください。
特徴
フローティング UI の共通化が容易
これは実装を見てもらうのが早いと思います。先ほどの demo の実装となっています。
描画領域内への UI 配置
モジュールの計算結果をフローティング UI に適用することで、ほとんどのケースで画面内に UI を表示することができます。もちろん適用するためのメソッドも提供していますので見てみてください。
全ての RenderMode に対応
Canvas.RenderMode には ScreenSpaceOverlay, ScreenSpaceCamera, WorldSpace がありますが、RectPop はこれら全てに対応しています。
フローティングオプション
モードは下記の 3 種類。
フローティング UI の表示位置も基準点からのオフセットを設けることが出来ます。
複数解像度対応
README の冒頭の GIF を転記します。
こちらは、単一のフローティング UI を色んなベースオブジェクトの上に表示している例です。計算ロジックでは適切に座標変換をしているので、解像度を変えても位置ずれ等は起こっていないことが分かります。
まとめ
以上です。
まずは実際に clone して Example を動かしてもらいつつ、実装を追ってもらうのが良いと思います。小さいモジュールなので簡単に追えるはずです。（仕事始めまでに公開するという目標がギリギリ達成できてよかったです。2025/01/05 23:28）
誰にも見られなかったらちょっと寂しいので...興味を持ってもらえたら、Github の Star 押してもらえると大変喜びます。
Discussion