スコアバーは、プレイヤーのレベルアップ統計、通貨カウント、またはインベントリ内のパワーアップアイテムなど、あなたの体験のゲームプレイに重要なプレイヤー情報を表示する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であっても、スコアテキストが王冠アイコンの近くに左寄せされるようにします。
デザインをテストする
Studioのデバイスエミュレーターを使用すると、プレイヤーがさまざまなデバイスでUIをどのように見るか、どのように操作するかをテストできます。このツールはUIデザインの重要な部分です。なぜなら、Studioのビューポートのアスペクト比が、プレイヤーがあなたの体験にアクセスするために使用する画面のアスペクト比を必ずしも反映しないからです。したがって、すべてのデバイスでUIが読みやすく、アクセス可能であることが重要です。
例えば、幅広い画面サイズでUIをテストしないと、大きな画面を持つプレイヤーはテキストを読むことができなかったり、アイコンを解読できなかったり、逆に小さな画面を持つプレイヤーは、UI要素がディスプレイ上であまりに多くのスペースを占めているために3D空間を視認できない場合があります。
さまざまな画面サイズでUIをエミュレートするには：
Studioの Test メニューから Device Emulator をオンにします。
解像度のドロップダウンで Actual Resolution を選択します。これにより、エミュレートしているデバイスでのUI要素の真の解像度を見ることができます。
デバイスのドロップダウンで、少なくとも1つのデバイスを Phone、Tablet、Desktop、および Console セクションから選択します。
