スコアバーを作成中

*このコンテンツは、ベータ版のAI（人工知能）を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

スコアバーは、エクスペリエンスのゲームプレイに重要なプレイヤー情報を表示する UI エレメントで、例えば、彼持ち物リストのレベルアップ解析計、通貨のカウント、またはインベントリのパワーアップアイテムなど、あなたのエクスペリエンスのゲームプレイに関連する情報を表示します。スコアバーを直接プレイヤーの画面に

ゴールドラッシュ.rbxl ファイルを参照して、このチュートリアルでは、ゴールドプレイヤーが集める金の量を追跡するスコアバーを作成する方法を示しています。包含するガイドには、次のときについての説明があります：

  • 画面の中央上部にフレームを作成します。
  • スコアバーのトラッキングを行うための王冠アイコンを追加することなくテキストがないです。
  • プレイヤーが集めるゴールドの量を記録するスコアテキストを挿入しています。
  • 多くのエミュレートされたデバイスで UI デザインをテストして、異なる画面とアスペクト比率での表示を確認します。

フレームを作成

To display UI elements on every player's screen, you can create a ScreenGui object in the StarterGui service. ScreenGui objects are the primary containers for on-screen UI, and the 1> Class.StarterGui1> service copies its contents to each player's 4> Class.Player

Class.ScreenGui オブジェクトを作成した後、子 GuiObjects を各コンテナの目的に応じて作成およびカスタマイズできます。このコンセプトを示すために、このセクションでは、コンテナの目的に対応する ScreenGui オ

フレームのプロパティをカスタマイズするだけでなく、このセクションでは、子 UISizeConstraint と Class.UIListLayout オブジェクトをフレームに追加する方法についての�

サンプル ゴールドラッシュ のファイルをファイル:

  1. Class.ScreenGui オブジェクトを作成して、画面上の UI を含める。

    1. In the エクスプローラー ウィンドウ, hover over StarterGui とクリックする ⊕ アイコン. コンテキストメニューが表示されます。
    2. Insert a ScreenGui 。

  2. スコアバー UI コンポーネントの全体のコンテナを作成します。

    1. フレーム を ScreenGUI オブジェクトに挿入します。

    2. 新しい フレーム を選択し、 プロパティ ウィンドウで、

      1. アンカーポイント を 0.5, 0 に設定して、フレームのオリジンポイントを上部の中央に設定します (フレームの左から右に 50% 、フレームの上部からの 0%)。
      2. フレームの背景を黒にする に 0.6 を設定してフレームの背景を黒にします。
      3. 背景透明度 を 0.6 に設定して、フレームの背景を半透明にします。
      4. 位置を 0.5, 0,0.01, 0 に設定して、画面のトップ中央にフレームを設定します (50% から 左 にから 1% から 下 にから 画面 の 上 から 1% から 2% から 3% から 4% から 5% から 6% から 7% から 8% から 9% から 10% から 11% から
      5. フレームを捕獲するために、サイズを{0.25, 0},{0.08, 0}に設定し、フレームを2> 0.25, 0,0.08, 02>に取り捕獲します(25%横における、8%縦における)。
      6. Set 名前 to スコアバーフレーム 。

  3. フレームに制限を追加して、小さな画面サイズでコンテンツが常に読み取り可能にする。

    1. Insert a UIサイズ制限 オブジェクト into ScoreBarFrame に。
    2. 新しい制限を選択し、 プロパティ ウィンドウに서 MinSize を 0, 40 に設定して、フレームが縦に 40 ピクセル未満に縮まることを確認します。

  4. フレームにレイアウトオブジェクトを追加して、内容を左から右へと垂直中央に配置します。

    1. Insert a UIListLayout オブジェクト into ScoreBarFrame .
    2. 新しいレイアウトオブジェクトを選択し、 プロパティ ウィンドウで、
      1. FillDirection を 横向き に設定します。
      2. 垂直アラインメント を センター に設定します。

アイコンを追加

アイコンはエクスペリエンスでアクション、オブジェクト、またはコンセプトを表示するシンボルです。シンプルで直感的なアイコンを使用すると、テキストを使用せずに UI でコミュニケーションしていることをプレイヤーが簡単に認識できます。これにより、テキストが画面を混乱させ、注目を引く可能性があるため、コンテンツの重要な部分に集中できます。

たとえば、サンプルは単純な金の王冠アイコンを使用して、プレイヤーが集めたゴールドの量を示すために使用します。このアイコンは、エクスペリエンス内の最も重要な目標として簡単に認識でき、モバイルデバイスのスクリーンで読み取りやすいように最小限の詳細を含みます。

サンプル ゴールドラッシュ のファイルを使用して、ゴールドの王冠アイコンを再現するには：

  1. ImageLabel オブジェクトを ScoreBarFrame に挿入します。

    1. In the エクスプローラー ウィンドウ, hover over スコアバーフレーム 및 click the ⊕ icon. A コンテキストメニューが表示されます。

    2. 画像ラベルを挿入します。

  2. 新しいラベルを選択し、 プロパティ ウィンドウで、

    1. 画像 を rbxassetid://5673786644 に設定して、アイコンを王冠にする。

    2. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。

    3. 1 を設定して 1 を設定します。これにより、テキストを次のセクションのチュートリアルに入れると、アイコンがフレームの左から右に移動し、 レイアウトオーダー を設定します。

    4. サイズ を{1.25,0},{1,0} に設定して、フレームの全幅を超えてラベルエリアを拡大します。

    5. サイズ制限 を 相対 YY に設定して、ラベルのサイズを親フレームの高さにスケールしてアイコンのアスペクト比率を保持します。

スコアテキストを挿入

スコアテキストは、マッチ中に獲得できるポイントなど、プレイヤーのスコアをエクスペリエンス内で記録します。すべての UI テキストがクリアで読みやすいようになることは、プレイヤーがエクスペリエンスで成功するために必要な情報を理解するために重要です。

たとえば、サンプルはコントラストの違う色の上に大きなテキストを使用して、背景のノイズと混ざり合わないようにします。これは特にアクセシビリティに関して重要です、因みにテキストはプレイヤーが 3D 空間を移動する際にレージビルになるため、同じ色のオブジェクトがテキストとレージビルになります。

スコアテキストをサンプル ゴールドラッシュ の場所に再現するには:

  1. テキストラベルオブジェクトを スコアバーフレーム に挿入します。

    1. In the エクスプローラー ウィンドウ, hover over スコアバーフレーム 및 click the ⊕ icon. A コンテキストメニューが表示されます。

    2. Insert a TextLabel テキストラベル。

  2. 新しいラベルを選択し、 プロパティ ウィンドウで、

    1. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。

    2. サイズ を 1,0,1,0 に設定して、ラベルをフレーム全体に拡大するためにラベルを % オープンにします。ラベルは、アイコンによってフレームの境界を超えて拡張されます。

    3. サイズ制限 を 相対 YY に設定して、ラベルのサイズが親フレームの高さと比例してスケールすることを確認し、アイコンのアスペクト比率を保持します。このステップは、ラベルを正方形に設定し、フレームの境界内に保持します。

    4. Set フォント to ゴッサムSSm を設定して、環境の美しさに合わせてスタイルを設定します。

    5. テキストを 0 に設定して、スコアをゼロから開始します。

    6. TextColor3 を 255, 200, 100 に設定して、テキストの金色を濃度の高い金色にする。

    7. TextSize を 30 に設定して、画面上のテキストを大きくする。

    8. TextXAlignment を Left に設定して、スコアテキストが王冠アイコンの近くに揃えられるようにして、プレイヤーのスコアが 0、1,000、または 1,000,000 の場合でも、スコアテキストが王冠アイコンの近くに揃えられるようにします。

デザインをテスト

Studio の デバイスエミュレータ は、プレイヤーがあなたの UI をどのように見てインタラクトするかをさまざまなデバイスでテストすることができます。このツールは、UI のデザインの重要な部分であり、スタジオのビューポートのアセプト比率は、プレイヤーがアクセスする UI のアセプト比率を

たとえば、大きな画面サイズのテストを行わないと、大きな画面のプレイヤーはテキストを読み取ることができないかもしれません、および小さな画面のプレイヤーは、UI 要素がディスプレイに取りすぎるため、3D 空間を見ることができません。

さまざまな画面サイズで UI をエミュレートするには：

  1. In the menu bar, メニューバーで テスト タブを選択します。

  2. In the エミュレーション section, click デバイス . The viewport changes to reflect the aspect ratio of an average laptop.

    Device button indicated in Test tab

  3. リゾリューションドロップダウンで 現在の解像度 を選択します。これにより、エミュレートされているデバイスの UI 要素の真の解像度を見ることができます。

  4. デバイスドロップダウンで、電話、タブレット、デスクトップ、および2>コンソール2>セクションのいずれかを選択します。