Robloxは本質的にクロスプラットフォームであり、プレイヤーはスマートフォンやタブレットでゲームを発見して参加し、その後PCやコンソールで続けることができます。拡張されるプラットフォームのスイートをサポートするために、入力タイプ（タッチ、ゲームパッド、マウス/キーボード）、画面サイズ、デバイスの向きにシームレスに適応するユーザーインターフェースを構築する必要があります。このガイド、適応デザインガイド、およびリンクされたリソースは、すべてのプラットフォームで互換性があり、アクセス可能で楽しい真のクロスプラットフォームゲームを設計するのに役立ちます。
次のクロスプラットフォームデザインコンセプトを示すプレメイドゲームを探索するには、インタラクティビティショーケースをチェックしてください。
入力
慎重に設計されたゲームは、マウスとキーボード、タッチ、ゲームパッドを含むすべての主要な入力タイプをサポートする必要があります。
クロスプラットフォームアクション
入力アクションシステムを使用して、すべての主要な入力タイプ（マウス/キーボード、タッチ、ゲームパッド）をサポートしてください。
クロスプラットフォーム入力を簡素化するために、Robloxはアクション（「ジャンプ」、「スプリント」、「シュート」など）を定義し、これらのアクションを駆動するために複数のハードウェア入力にバインディングを設定するための入力アクションシステムを提供します。ハードウェア入力のすべての技術的側面や特定の入力トリガーをリッスンするタイミングについて考える必要はなく、どの入力がどのアクションを実行するかを定義するだけです。
入力タイプの検出
クロスプラットフォーム開発では、プレイヤーが使用している主要な入力タイプを特定し、それに応じて応答することが重要です。通常、これはUI要素（画面上のボタンやメニューなど）が優雅に機能し、デバイス間での相互作用をサポートすることを保証するためです。
たとえば、タッチ対応デバイスはタッチがデフォルトの入力であり、アクションのためにタッチボタンが表示されることを想定していますが、プレイヤーはBluetoothゲームパッドを接続することを選択するかもしれません。この場合、タッチは有効な入力のままですが、接続されたゲームパッドを主要な入力タイプとして使用したいとプレイヤーが考えていると仮定できます。タッチは画面上のUIのバックアップ入力として使用される可能性があります。
入力アクションシステムを使用している場合、PreferredBindingプロパティは主要な入力検出を補完します。PreferredInputがプレイヤーの現在の主要な入力タイプを報告するのと同様に、PreferredBindingはプレイヤーの現在のデバイスに一致する特定のInputBindingを報告します。両方とも、プレイヤーがデバイスを切り替えると自動的に更新されるため、デバイスを意識したUIを自分でデバイス切り替えロジックを書くことなく駆動できます。
補助ヒント
主要な入力タイプに基づいて、可能な限り補助UIヒントを含めることをお勧めします。たとえば、装備するツールを選択する際には、プレイヤーがキーボードを使用している場合は1–5のような入力特有のヒントを表示し、ゲームパッドを使用している場合はゲームパッドトリガーヒントを表示します。
プレイヤーがデバイスを切り替えたときに自動的に更新されるノーコードの補助ヒントを使用するには、InputActionLabelを使用し、任意のInputActionを指してプラットフォームごとの正しい入力を表示します。詳細についてはバインディングの表示を参照してください。
より詳細な制御が必要な場合や、InputActionLabelが提供する以上のカスタマイズヒント表示が必要な場合は、以下のUserInputServiceメソッドを使用してプラットフォーム特有の画像や文字列を手動で収集できます。
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 | ほとんどのテレビまたはそれ以上 |
よりネイティブなカスタマイズのために、UIのスタイルエディタを使用して、ViewportDisplaySizeおよびPreferredInputの値に対するスタイルクエリを構成できます。@ViewportDisplaySizeSmallや@PreferredInputTouchのような内在的セレクタを使用すると、プレイヤーのデバイス環境や主要な入力方法が変わるときに、UIが自動的にテキストサイズ、コンテナの寸法、その他の測定値のトークンを交換できます。
レイアウトコンテナ
レイアウトを使用して個々のUIコンポーネントを整理し、コンテナがその内部の子要素に応じて応答的に調整されることを確認してください。
UIの整理を容易にするために、レイアウトコンポーネントを使用して子要素を整理するべきです。レイアウトコンテナを使用する際は、子要素が読みやすく、アクセス可能で、混雑していないことを確認してください。一般的なレイアウトコンポーネントはUIListLayoutであり、兄弟のGuiObjectsを行や列に配置し、兄弟オブジェクトを追加または削除するたびに調整されます。
また、レイアウトコンテナ内の要素の分配と相対的な配置を考慮して、最良のユーザー体験を提供することも重要です。フレックスをリストレイアウトに統合することは、アイテムをその行にわたって均等に埋める/分配するまたは整列/ストレッチする強力な方法です。
アクセシビリティ
すべてのテキストがすべての画面で読みやすいことを確認してください。また、すべてのUIが十分なコントラストを持ち、何も色のみに依存していないことを確認してください。
すべてのデバイスの画面サイズで適切にサイズ設定されたUI要素があっても、全体のゲームは視覚障害や色盲のあるプレイヤーのためのアクセシビリティ基準を満たす必要があります。テキストサイズはテキストベースのUIの可読性に大きく影響する可能性があるため、テキストが不明瞭（小さすぎる）または視覚的に大きすぎる（4K TVなどの大きな画面で）ことがないように、テキストサイズ制約を含めるべきです。
アクセシビリティに関するさらなるヒントについては、アクセシビリティガイドラインを参照してください。
最終的なヒントとコツ
完全なクロスプラットフォームゲームに向けて作業する際は、以下のヒントとコツを考慮してください。
- デバイスエミュレーションは、Robloxで最適なゲームを設計するために不可欠です。組み込みのデバイスエミュレーターとコントローラーエミュレーターを利用して、Studio内でさまざまなデバイスやゲームパッドをエミュレートしてください。
- ゲームが効果的にクロスプラットフォームになったら、モバイルやゲームパッドでのハプティックフィードバック、TouchSwipeやTouchPinchのようなタッチジェスチャー、またはAccelerometerEnabledやGyroscopeEnabledデバイスでの加速度計やジャイロスコープ機能などのネイティブ機能を探求してください。