はじめに
RobloxのUI構築は、Roblox自体の持つコアUIなどとの兼ね合いを考慮しなければならず、知識が無いと想定外の所でコアUIと被ってしまったり、使いにくい不便なUIになってしまいます。
そこで今回は、UI構築の際の危険な領域や、注意が必要な領域についてまとめました。
バージョン ：0.649.0.6490878
1. ScreenInsets
ScreenInsets | Documentation - Roblox Creator Hubより引用
前提知識として、ScreenGUIのScreenInsetsというプロパティの設定について説明します。
これを利用すると、確実にSafeAria内に収めたUIを構築することができます。
以下、リファレンスの引用です。
| 名前 | サマリ |
|---|---|
| None | ScreenGuiの子孫には互換性変換を適用しません。 |
| DeviceSafeInsets | デバイスのセーフ エリア インセットがフルスクリーン領域に追加されます。結果として得られる領域は、カメラ ノッチなどのデバイス画面の切り欠きによって遮られないことが保証されますが、トップ バー ボタンなどの Roblox コア UI 要素にはインセットは追加されません。そのため、コンテンツがデバイスの切り欠きとコア画面要素の両方によって遮られないようにする必要があるScreenGuiには、 CoreUISafeInsetsを使用することをお勧めします。 |
| CoreUISafeInsets | CoreUIInsetsがDeviceSafeInsets領域に追加され、デバイス画面の切り抜きとトップバーボタンなどの Roblox コア UI 要素の両方によって隠されない領域が保証されます。このモードは、ボタンやステータスメッセージなどのインタラクティブな UI 要素や重要な UI 要素を含むScreenGuiに推奨されます。 |
| TopbarSafeInsets | トップバーのセーフエリア インセットがDeviceSafeInsets領域に追加され、デバイス画面の切り抜きとエクスペリエンス コントロールなどの Roblox コア UI 要素の両方によって隠されない領域が保証されます。 CoreUISafeInsetsとは異なり、この領域の位置とサイズは動的であり、 CoreUISafeInsetsの外側にあるトップバー領域自体内の使用可能なスペースに制限されます 。 |
ざっくり言うと、
- None：画面全体を使用する。
- DeviceSafeInsets：一部デバイスなどで欠ける可能性のある、左右領域をカットした内側を使用する。
- CoreUISafeInsets：DeviceSafeInsetsに加え、コアUIの表示される上部もカットした内側を使用する。
- TopbarSafeInsets：上記３つとは性質の違う物で、画面上部のコアUIの、残っている右側の領域を使用する。コアUIが横に広がるとその分狭くなるなど、動的に可変。
となります。
少なくとも、CoreUISafeInsetsを使用すれば、デバイス側で欠ける部分や常にコアUIが表示されているところと被る可能性は無くなり、TopbarSafeInsetsを使用すれば、画面上部のトップバー領域を使いたい場合に左上のコアUIと被る可能性が無くなります。
ただし、コアUI関連はアップデートによって変更される可能性があることに注意が必要です。
直近では、2024/10/24のアップデートでコアUIのデザイン、配置、大きさ等が変更されました。
2. 危険な領域、注意が必要な領域
危険度に応じて、ざっくり色分けしてみました。
順に解説していきます。
赤：危険領域
基本的にボタンや情報表示には使用しないことが推奨される領域です。
左上のコアUIが常に表示される領域と、左右のデバイスによって欠けてしまう領域が該当します。
コアUIについては可変で、コアUIに含まれる機能のONOFF設定によってもある程度幅が変動します。
PCなど、デバイスによって左右の危険領域は存在しない場合もあります。
CoreUISafeInsetsやTopbarSafeInsetsで構築すれば、基本的に被ったり欠けたりする危険性はありません。
オレンジ：メイン操作領域
メイン操作以外には使用すべきでない領域です。
スマートデバイスの場合、移動のためのサムスティックやジャンプボタンがデフォルトで置かれます。
デバイスによってデフォルトの配置は多少変動します。
ジャンプをOFFにしたり、これらの配置を変える事自体は可能ですが、どちらにせよメイン操作は左右の親指で操作しやすいこのあたりの位置に置くことになると思われるため、サブ的なボタンや情報表示は基本的にこの近辺に置かないようにしたいです。
一応、スマートデバイスに対応しない前提であれば安全に利用できますが、Robloxはユーザーの大半がスマートデバイスからの利用のため、通常は対応しない理由は無いかと思います。
黄色：注意が必要な領域
状況次第で利用に注意が必要な領域です。
RobloxのUI構築で最もポイントになるところですので、個別に解説していきます。
トップバーの右端は、ダメージがあるとHealthバー（体力ゲージ）が表示される領域です。
TopbarSafeInsetsでも被って表示されてしまうため、普段からHealthが変動する要因のあるゲームの場合、右端は利用すべきではありません。
表示を切ることはできるため、ダメージの概念が無い場合や、独自にHealth表示を実装するなら安全に利用できます。
過去にはここにRobloxのメニューの一部が表示されていましたが、2024/10/24のアップデートで変更されました。
中央左側はチャット利用時にチャット欄が表示されるため、チャットを利用させたい場合には注意が必要な領域です。
一応、相応に手間がかかりますが、独自にチャット欄を実装する場合はその限りではありません。
中央右側は、PCやタブレットなどでリーダーボードが表示される領域です。
表示はユーザーが自由にONOFFできますが、入室時には強制的にONになっているため、入室時にすぐ見せたい情報には注意が必要です。
リーダーボードの機能自体を切っていたり、独自に表示を実装する場合は安全に利用できます。
スマートフォンの場合（画面サイズが小さい場合？）は、リーダーボードは普段は表示されず、表示すると中央に大きなポップアップで出るようになっています。
下部は、RobloxのTool（キャラクターの手に持たせて使用するアイテム）とBackpackの機能を利用した場合に、Backpack内のToolが表示される領域です。
こちらも表示をOFFにすることはできるため、独自にBackpackにアクセスする機能を実装したり、ToolとBackpackの機能自体を利用しないのであれば安全に利用できます。
青：トップバー領域
基本的には安全なものの、他の領域とは分けて考えた方が良い領域です。
TopbarSafeInsetsなら、先述のHealthの被る右端部分以外は安全に利用できますが、コアUIの機能のONOFF設定によって幅は多少変動します。
また、コアUIの画面に対する大きさはデバイスによって異なり、TopbarSafeInsetsの高さもそれに連動するため、デバイスによって印象が大きく異なってしまう可能性があります。
スマートフォンなど画面が小さい場合は画面に対して大きく、PCなどで画面が大きい場合は画面に対して小さく表示されます。
DeviceSafeInsetsで上部を利用する形なら、そのUI自体はコアUIの大きさに左右されませんが、デバイスやコアUIの機能設定によってはコアUIに被ってしまう可能性があるため、余裕をもって配置する必要があります。
3. まとめ
- 赤の領域は、ボタンや情報表示には使用しない
- オレンジの領域は、メイン機能のボタン以外置かない
- 黄色の領域は、ゲームの都合や状況毎に、どのように利用するかその都度判断していく必要がある
- 青の領域は、デバイスや状況によって大きさが変動する事などを念頭に入れて利用する必要がある
RobloxのUIはRoblox側の機能で使用されている領域が多く、ユーザーのデバイスも様々なため、きちんと構築するのが難しくなっています。
しっかりと知識を付けて、Roblox側のUIはどれが必要でどれが消せるのか、デバイスによって不都合は無いかなどを考慮し、ユーザーフレンドリーなUIを目指しましょう！
4. 参考
当社ではRobloxを活用したゲームの開発、 また企業の商品やサービスの認知度拡大に寄与する3Dワールドの制作など、 Robloxにおける様々な活用支援を行っております。 Robloxのコンテンツ開発をご検討されている企業様は、お気軽にご相談ください。 landho.co.jp/
Discussion