A スコアバーは、プレイヤーのレベルアップ統計、通貨のカウント、またはインベントリ内のパワーアップアイテムなど、ゲームプレイに重要なプレイヤー情報を表示するUI要素です。スコアバーをプレイヤーの画面に直接表示することで、ゲーム内のさまざまな目標を達成するために必要なことにプレイヤーの注意を引きつけることができます。
Gold Rush .rbxlファイルを参考にして、このチュートリアルでは、プレイヤーが収集する金の量を追跡するスコアバーを作成する方法を示します。以下のガイダンスが含まれています：
- 画面の上部中央にフレームを作成する。
- スコアバーが何を追跡しているかをテキストなしで伝える王冠アイコンを追加する。
- プレイヤーが収集した金の量を記録するスコアテキストを挿入する。
- 複数のエミュレートされたデバイスでUIデザインをテストし、異なる画面やアスペクト比での外観を確認する。
すべての2D作成と同様に、特定の目標を達成する方法は多くあります。サードパーティのUIツールで独自の2Dアセットを作成し、自分のデザインに従って進めることができます。
フレームを作成する
すべてのプレイヤーの画面にUI要素を表示するには、ScreenGuiオブジェクトをStarterGuiサービス内に作成できます。ScreenGuiオブジェクトは、画面上のUIの主要なコンテナであり、StarterGuiサービスは、その内容をゲームに入るときに各プレイヤーのPlayerGuiコンテナにコピーします。
ScreenGuiオブジェクトを作成した後、各コンテナの目的に応じてその子GuiObjectsを作成およびカスタマイズできます。この概念を示すために、このセクションでは、アイコンとスコアバーのテキストの両方を含むFrameオブジェクトを持つScreenGuiオブジェクトを作成する方法を教えます。
フレームのプロパティをカスタマイズすることに加えて、このセクションでは、フレームに子UISizeConstraintおよびUIListLayoutオブジェクトを追加する手順も提供します。この技術により、GuiObjectsがフレームに挿入されると自動的に水平方向に配置され、画面サイズが小さい場合でも常に読みやすくなります。このガイダンスに従わない場合、フレームに追加するすべてのGuiObjectは、フレームの周囲に配置されます。
サンプルGold Rushプレースファイル内でフレームコンテナを再作成するには：
画面上のUIを含むScreenGuiオブジェクトを作成します。
- Explorerウィンドウで、StarterGuiにカーソルを合わせ、⊕アイコンをクリックします。コンテキストメニューが表示されます。
- ScreenGuiを挿入します。
スコアバーUIコンポーネント全体のコンテナを作成します。
ScreenGuiオブジェクトにFrameを挿入します。
新しいFrameを選択し、Propertiesウィンドウで、
- AnchorPointを0.5, 0に設定して、フレームの原点を上部中央に設定します（フレームの左から右まで50%、上から下まで0%）。
- BackgroundColorを0.6に設定して、フレームの背景を黒にします。
- BackgroundTransparencyを0.6に設定して、フレームの背景を半透明にします。
- Positionを{0.5, 0},{0.01, 0}に設定して、画面の上部中央付近にフレームを配置します（画面の左から右まで50%、上から下まで1%）。
- Sizeを{0.25, 0},{0.08, 0}に設定して、フレームが画面の中央の大部分を占めてプレイヤーの注意を引くようにします（横方向に25%、縦方向に8%）。
- NameをScoreBarFrameに設定します。
フレームに制約を追加して、その内容が小さい画面サイズでも常に読みやすくなるようにします。
- ScoreBarFrameにUISizeConstraintオブジェクトを挿入します。
- 新しい制約を選択し、PropertiesウィンドウでMinSizeを0, 40に設定して、フレームが縦に40ピクセル未満に縮小されないようにします。
フレームにレイアウトオブジェクトを追加して、その内容が左から右に配置され、フレームの周囲内で垂直に中央に配置されるようにします。
- ScoreBarFrameにUIListLayoutオブジェクトを挿入します。
- 新しいレイアウトオブジェクトを選択し、Propertiesウィンドウで、
- FillDirectionをHorizontalに設定します。
- VerticalAlignmentをCenterに設定します。
アイコンを追加する
アイコンは、ゲーム内のアクション、オブジェクト、または概念を表すシンボルです。シンプルで直感的なアイコンを使用することで、プレイヤーはテキストを使用せずにUIが伝えていることを簡単に認識でき、画面が混雑して重要なコンテンツから注意が逸れることを防ぎます。
たとえば、サンプルでは、プレイヤーが収集した金の量を示すためにシンプルな金の王冠アイコンを使用しています。このアイコンは、ゲーム内で最も重要な目標であることが簡単に認識でき、詳細が最小限に抑えられているため、モバイルデバイスの画面でも読みやすくなっています。
サンプルGold Rushプレースファイル内で金の王冠アイコンを再作成するには：
ScoreBarFrameにImageLabelオブジェクトを挿入します。
Explorerウィンドウで、ScoreBarFrameにカーソルを合わせ、⊕アイコンをクリックします。コンテキストメニューが表示されます。
ImageLabelを挿入します。
新しいラベルを選択し、Propertiesウィンドウで、
Imageをrbxassetid://5673786644に設定して、アイコンを王冠にします。
BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
LayoutOrderを1に設定します。これにより、次のセクションでテキストを挿入する際に、アイコンがフレーム内で左から右に最初のGuiObjectとして残ります。
Sizeを{1.25,0},{1,0}に設定して、ラベルエリアをフレームの全幅を超えて広げます。
SizeConstraintをRelativeYYに設定して、親フレームの高さに合わせてラベルのサイズをスケーリングし、アイコンのアスペクト比を保持します。
スコアテキストを挿入する
スコアテキストは、ゲーム内でプレイヤーが獲得したポイント数など、プレイヤーのスコアを記録します。すべてのUIテキストが明確で読みやすいことが重要で、プレイヤーがゲーム内で成功するために必要な情報を迅速に理解できるようにします。
たとえば、サンプルでは、背景のノイズと混ざらないように対照的な色の上に大きなテキストを使用しています。これは、プレイヤーが3D空間を移動する際に、テキストと同じ色のオブジェクトが含まれる可能性があるため、特にアクセシビリティにとって重要です。
サンプルGold Rushプレースファイル内でスコアテキストを再作成するには：
ScoreBarFrameにTextLabelオブジェクトを挿入します。
Explorerウィンドウで、ScoreBarFrameにカーソルを合わせ、⊕アイコンをクリックします。コンテキストメニューが表示されます。
TextLabelを挿入します。
新しいラベルを選択し、Propertiesウィンドウで、
BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
Sizeを{1,0},{1,0}に設定して、ラベルをフレーム全体に広げます（親フレームの100%横方向および100%縦方向）。ラベルはアイコンによってオフセットされているため、フレームの境界を超えます。
SizeConstraintをRelativeYYに設定して、ラベルのサイズが親フレームの高さに合わせてスケーリングされ、アイコンのアスペクト比を保持します。このステップにより、ラベルは正方形になり、フレームの境界内に収まります。
FontをGothamSSmに設定して、環境の美学に合わせます。
Textを0に設定して、スコアをゼロから開始します。
TextColor3を255, 200, 100に設定して、テキストを金色にします。
TextSizeを30に設定して、画面上のテキストを大きくします。
TextXAlignmentをLeftに設定して、プレイヤーのスコアが0、1,000、または1,000,000であっても、スコアテキストが王冠アイコンの近くで左揃えのままになるようにします。
デザインをテストする
スタジオのデバイスエミュレーターを使用すると、プレイヤーがさまざまなデバイスでUIをどのように見るか、またはどのように操作するかをテストできます。このツールはUIデザインの重要な部分であり、スタジオのビューポートのアスペクト比がプレイヤーがゲームにアクセスするために使用する画面のアスペクト比を必ずしも反映しないため、すべてのデバイスでUIが読みやすく、アクセス可能であることが重要です。
たとえば、UIをさまざまな画面サイズでテストしないと、大きな画面を持つプレイヤーはテキストを読めなかったり、アイコンを解読できなかったり、小さな画面を持つプレイヤーは、UI要素が表示領域を占有しすぎて3D空間を見ることができなかったりする可能性があります。
さまざまな画面サイズでUIをエミュレートするには：
スタジオのTestメニューから、Device Emulatorをオンにします。
解像度のドロップダウンで、Actual Resolutionを選択します。これにより、エミュレートしているデバイス上でUI要素の真の解像度を確認できます。
デバイスのドロップダウンで、Phone、Tablet、Desktop、およびConsoleセクション内の少なくとも1つのデバイスを選択します。
