Robloxは本質的にクロスプラットフォームであり、プレイヤーはスマートフォンやタブレットでゲームを発見し参加し、その後PCやコンソールで途中から再開できます。拡張するプラットフォームに対応するために、ユーザーインターフェースは入力タイプ（タッチ、ゲームパッド、マウス/キーボード）、画面サイズ、デバイスの向きにシームレスに適応するように構築する必要があります。このガイド、適応デザインガイド、およびリンクされたリソースは、すべてのプラットフォームで互換性があり、アクセス可能で楽しめる真のクロスプラットフォームゲームを設計するのに役立ちます。
次のクロスプラットフォームデザイン概念を紹介したプレ作成ゲームを探索するには、インタラクティビティショーケースをチェックしてください。
入力
注意深く設計されたゲームは、マウスとキーボード、タッチ、ゲームパッドを含むすべての主要な入力タイプをサポートする必要があります。
クロスプラットフォームアクション
Input Action Systemを使用して、すべての主要な入力タイプ（マウス/キーボード、タッチ、ゲームパッド）をサポートします。
クロスプラットフォームの入力を簡素化するために、Robloxはアクション（"ジャンプ"、"スプリント"、"シュート"など）を定義し、これらのアクションを駆動するために複数のハードウェア入力用にバインディングを設定するためのInput Action Systemを提供します。ハードウェア入力のすべての技術的側面や特定の入力トリガーをリスニングするタイミングについて考える必要はありません。どの入力がどのアクションを実行するかを定義するだけです。
入力タイプ検出
クロスプラットフォーム開発では、プレイヤーが使用している主要な入力タイプを特定し、それに応じて反応することが重要です。通常、これはUI要素（画面上のボタンやメニューなど）が優雅に機能し、デバイス間での相互作用をサポートするために行います。
たとえば、タッチ対応デバイスはタッチをデフォルトの入力として想定し、アクションのためにタッチボタンが表示される場合がありますが、プレイヤーがBluetoothゲームパッドを接続することを選ぶかもしれません。この場合、タッチは有効な入力として残りますが、プレイヤーは接続されたゲームパッドを主要入力タイプとして切り替えたいと考えていると想定し、画面上のUIのためにタッチをバックアップ入力として使用する可能性があります。
補助ヒント
主要入力タイプに基づき、可能な限り補助UIヒントを含めることをお勧めします。たとえば、装備するツールを選択する際、プレイヤーがキーボードを使用している場合は1–5のような入力特有のヒントを表示し、ゲームパッドを使用している場合はゲームパッドトリガーヒントを表示します。
GetImageForKeyCode()およびGetStringForKeyCode()メソッドは、UIヒントで使用するプラットフォーム固有の画像や文字列を収集するのに役立ちます。以下はその例です。
| キーコード | Xbox画像 | PlayStation画像 | 文字列 |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | 該当なし | 該当なし | 1 |
| Enum.KeyCode.Five | 該当なし | 該当なし | 5 |
ユーザーインターフェース
適切に設計されたユーザーインターフェースは、すべてのプラットフォームのプレイヤーがゲームと対話するために不可欠です。
位置とサイズ
すべてのUI要素がすべての画面サイズと向きで表示されることを確認してください。
すべてのボタン/コントロールが操作可能であり、デバイスの切り欠きやRobloxのUI要素によってブロックされたり隠されたりしていないことを確認してください。
すべてのUI要素は、複数の画面サイズでの視認性とインタラクティビティを確保するために適切に配置およびサイズ設定されるべきです。UI要素をScaleによって配置するのは一般的なアプローチであり、これは画面のXおよびYの範囲のパーセンテージに基づいているため、ピクセル値を使用するのではなく（ピクセルはデバイスごとに数や密度が任意に変わる可能性があります）。また、要素のAnchorPointを利用してその位置の起点を設定することもできます。たとえば、次の画像にある宝石/コインカウンターを持つUIコンテナは、Xスケールが1（右）で、Yスケールが0（上）であり、右上のアンカーポイントが設定されています。
Scaleは、UI要素のサイズ設定にも推奨されます。たとえば、UIコンテナが画面ごとに75%の幅を持つようにすることです。ただし、75%はコンソールプレイヤー用の4K TVで非常に大きなサイズとしてレンダリングされるので、異なるビューポートにわたってUIレイアウトを適応させる方法として画面サイズの適応を探索することをお勧めします。
画面サイズの適応
ビューポートの表示サイズの変更をチェックしてリスニングすることによって、さまざまな表示サイズにUIを適応させる。
Robloxプラットフォームには多種多様な画面サイズがあるため、ピクセルで画面サイズを予測しようとすると誤解を招くことがよくあります。プレイヤーの画面サイズを特定してUI要素のサイズ/位置を適応させるために、Robloxはビューポートの内部分類されたレンダリングサイズを表す読み取り専用のViewportDisplaySizeプロパティを提供します。
| ViewportDisplaySize | 概要 |
|---|---|
| Small | ほとんどのタブレット/モバイル/ハンドヘルドデバイス |
| Medium | ほとんどのノートパソコンとモニター |
| Large | ほとんどのTVまたはそれ以上 |
ネイティブなカスタマイズには、UIのスタイルエディタを使用して、ViewportDisplaySizeおよびPreferredInputの値に対してスタイルクエリを構成できます。@ViewportDisplaySizeSmallや@PreferredInputTouchのような内在セレクターを使用すると、プレイヤーのデバイス環境や主要入力メソッドが変わると同時に、テキストサイズ、コンテナの寸法、その他の測定値用のトークンを自動的に入れ替えることができます。
レイアウトコンテナ
レイアウトを使用して個々のUIコンポーネントを整理し、コンテナがその中の子要素に応じて応答的に調整されるようにします。
UIの整理を容易にするために、レイアウトコンポーネントを使用して子要素を整理するべきです。レイアウトコンテナを使用する際は、子要素が読みやすく、アクセス可能で、散らかっていないことを確認してください。一般的なレイアウトコンポーネントはUIListLayoutであり、これは兄弟のGuiObjectsを行や列に配置し、兄弟オブジェクトを追加または削除するたびに適応します。
レイアウトコンテナ内の要素の分配や相対的な配置を考慮して、最良のユーザー体験を提供することも重要です。リストレイアウトにフレックスを統合することは、アイテムを行にわたって均等に埋める/分配するか、整列/拡張する便利な方法です。また、特定のアイテムをフレックスすることも可能です。
アクセシビリティ
すべてのデバイス画面サイズで適切にサイズ設定されたUI要素がある場合でも、全体のゲームは視力に障害があるプレイヤーや色盲のプレイヤーのためのアクセシビリティ基準を満たすべきです。テキストサイズはテキストベースのUIの可読性に大きく影響する可能性があるため、テキストが不明瞭（小さすぎる）になったり、大きな画面（例えば4K TV）で視覚的に大きすぎることがないようにテキストサイズ制約を含めると良いでしょう。
アクセシビリティに関するさらなるヒントについては、こちらをご覧ください。
最終的なヒントとコツ
クロスプラットフォームゲームを目指す際には、次のヒントやコツを考慮してください。
- デバイスのエミュレーションは、Robloxで最適なゲームを設計するために不可欠です。スタジオ内でさまざまなデバイスやゲームパッドをエミュレートするために、組み込みのデバイスエミュレーターおよびコントローラーエミュレーターを利用してください。
- ゲームが効果的にクロスプラットフォームであることが確認できたら、モバイルやゲームパッドのハプティックフィードバック、TouchSwipeやTouchPinchなどのタッチジェスチャー、またはAccelerometerEnabledやGyroscopeEnabledデバイスの加速度計やジャイロスコープ機能を探求してください。