スタジオでデザインを実装する

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

デザインの実装は、組み込みおよびカスタムUI要素を使用して、スタジオでワイヤーフレームを作成するプロセスです。このチュートリアルのエキサイティングなステップでは、すべてのデザインと努力が一つの一貫したワークフローセットにまとめられ、プレイヤーのインタラクションの準備が整います。

サンプルレーザータグゲーム .rbxlファイルを参照として、このユーザーインターフェースデザインカリキュラムのこのセクションでは、UI計画を実現する方法を示します。以下のガイダンスが含まれています：

  • UIアセットライブラリからアセットIDを取得して、サンプルレーザータグゲームのUIコンポーネントを再現できるようにします。
  • スタジオ内でさまざまなデバイスをエミュレートして、異なる画面やアスペクト比でUIがどのように表示されるかを確認します。
  • プレイヤーの画面、パーツの表面、および3D空間内にUIを表示するために、ScreenGui、SurfaceGui、およびBillboardGuiオブジェクトを作成します。

このセクションのテクニックを確認した後は、自分のプロジェクトに適用して、プレイヤーがゲーム内でできることをナビゲートするのに役立つエキサイティングなUIコンポーネントを作成できます。

アセットライブラリを取得する

アセットライブラリは、簡単にアクセスして再利用できるアセットのコレクションです。あなたのプロジェクトで使用するアセットライブラリは、クリエイターストアから取得でき、9つの2D個別UI要素アセットと、このチュートリアルのこのセクションで作成している目的、ブラスターセレクター、およびプレイヤー情報コンポーネントの最終バージョンが含まれています。

マルチブラスターアイコン
rbxassetid://14309094777
シングルブラスターアイコン
rbxassetid://14309094641
ピンクチームアイコン
rbxassetid://14309678581
台形
rbxassetid://14304828203
逆さ台形
rbxassetid://14304827304
グリーンチームアイコン
rbxassetid://14309678701
フェード
rbxassetid://14304826876
多方向フェード
rbxassetid://14304827147
ブラスボタンアイコン - デフォルト
rbxassetid://18308375067
ブラスボタンアイコン - 押下
rbxassetid://18308372597
クロスヘアアイコン
rbxassetid://14400935532
ヒットマーカーアイコン
rbxassetid://14401148777
六角形
rbxassetid://14462567943
選択矢印アイコン
rbxassetid://14309187282
ボーダーフェード
rbxassetid://14309518632

アセットライブラリをインベントリからゲームに取得するには：

  1. アセットライブラリをインベントリに追加します。

    1. クリエイターストアのアセットライブラリの詳細ページに移動します。
    2. 右上隅で、モデルを取得ボタンをクリックします。アセットライブラリがインベントリに追加され、プラットフォーム上の任意のプロジェクトでこれらのアセットを再利用できます。

  2. スタジオで、ホームタブに移動し、ツールボックスボタンをクリックします。ツールボックスウィンドウが開きます。

    スタジオのツールバーで強調表示されたツールボックス。

  3. ツールボックスウィンドウで、インベントリタブをクリックします。マイモデルのソートが表示されます。

  4. ドロップダウンメニューをクリックし、マイパッケージのソートを選択します。

  5. 最終画面UIコンポーネントタイルをクリックし、エクスプローラーウィンドウで完了したコンポーネントを選択し、それをStarterGuiサービスにドラッグします。これで、最終コンポーネントのいずれかを有効にして、そのデザインを参照できます。

デバイスをエミュレートする

スタジオのデバイスエミュレーターを使用すると、プレイヤーがさまざまなデバイスでUIをどのように見るか、どのようにインタラクトするかをテストできます。このツールは実装プロセスの重要な部分であり、スタジオのビューポートのアスペクト比がプレイヤーがゲームにアクセスするために使用する画面のアスペクト比を必ずしも反映しないため、UIがすべてのデバイスで読みやすく、アクセス可能であることが重要です。

たとえば、さまざまな画面サイズでUIをテストしないと、大きな画面を持つプレイヤーはテキストを読めなかったり、アイコンを解読できなかったりする可能性があり、小さな画面を持つプレイヤーはUI要素が表示の多くのスペースを占めるために3D空間を見ることができないかもしれません。

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

  1. スタジオのテストメニューから、デバイスエミュレーターをオンにします。

  2. 解像度のドロップダウンで、実際の解像度を選択します。これにより、エミュレートしているデバイス上でUI要素の真の解像度を見ることができます。

    ビューポートウィンドウの上部に示されたデバイスエミュレーター設定オプション。

  3. デバイスのドロップダウンで、電話、タブレット、デスクトップ、およびコンソールセクション内の少なくとも1つのデバイスを選択します。

ScreenGuiオブジェクトを作成する

すべてのプレイヤーの画面にUI要素を表示するには、ScreenGuiオブジェクトをStarterGuiサービスに作成できます。ScreenGuiオブジェクトは、画面上のUIの主要なコンテナであり、StarterGuiサービスは、プレイヤーがゲームに入るときにその内容を各プレイヤーのPlayerGuiコンテナにコピーします。

複数のScreenGuiオブジェクトを作成して、ゲームプレイ中にUI要素のグループを文脈に応じて整理して表示できます。たとえば、サンプルレーザータグゲームには、プレイヤーがゲームのメインユーザーフロー中に異なる条件を満たすまで最初は無効になっている5つの別々のScreenGuiオブジェクトが含まれています：

  • HUDGui - プレイヤーがラウンド中にアクティブなときに、目的や各チームの合計ポイントなど、ゲームプレイに関する重要な情報を表示します。
  • PickABlasterGui - プレイヤーがラウンドを開始または再参加するときに、すべてのブラスターの選択肢を表示します。
  • ForceFieldGui - プレイヤーがブラスターを選択しているときや、一時的に無敵のときに六角形のグリッドを表示します。
  • OutStateGui - プレイヤーがタグ付けされたときに画面の周りに暗いボーダーを表示します。
  • RoundResultsGui - ラウンドで勝ったチームに関する情報を持つ暗いオーバーレイを画面の上に表示します。

ScreenGuiオブジェクトを作成した後は、各コンテナの目的に応じてその子GuiObjectsを作成およびカスタマイズできます。次のセクションでは、サンプルレーザータグゲームでプレイヤーが成功するために知っておくべき3つの情報カテゴリのUI要素を実装する方法を学びます。プロセスの任意の部分を自分のゲームの仕様に合わせて調整できます。

ScreenGuiオブジェクトを作成するには：

  1. エクスプローラーウィンドウで、StarterGuiサービスにカーソルを合わせ、**⊕**アイコンをクリックします。文脈メニューが表示されます。

  2. ScreenGuiを挿入します。

  3. 子UI要素の文脈に応じてScreenGuiの名前を変更します。

  4. すべてのプレイヤーの画面に表示する必要がある各UI要素のグループについて、このプロセスを繰り返します。

目的UI

ワイヤーフレームを作成するの視覚的階層のベストプラクティスに従って、このセクションではゲームの目的に関連するすべての画面上のUI要素を実装する方法を教えます。このUI要素のグループは、ゲームに勝つために最も重要な目的と各チームのポイントがあるため、画面の上部に近い位置に配置されます。

たとえば、サンプルはプレイヤーがラウンドで成功するために何をする必要があるかを知るために参照する目的UIコンポーネントを提供します。プレイヤーが敵チームのメンバーをタグ付けしてポイントを獲得すると、このコンポーネントはヘッダーのプロンプト内で全体の目標に対する各チームのスコアを追跡します。ポイントを追跡するために協力するすべてのクライアントおよびサーバースクリプトの高レベルのレビューについては、ゲームプレイスクリプティングカリキュラムのポイントを追跡するを参照してください。

サンプルレーザータグゲーム内で目的UIを正確に再現するには：

  1. コンポーネント全体のコンテナを作成します。

    1. HUDGui ScreenGuiオブジェクトにFrameを挿入します。

      1. エクスプローラーウィンドウで、StarterGuiサービスに移動します。
      2. 子HUDGuiオブジェクトにカーソルを合わせ、⊕アイコンをクリックします。文脈メニューが表示されます。
      3. 文脈メニューから、Frameを挿入します。

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

      1. AnchorPointを0.5, 0に設定して、フレームの原点を上部中央に設定します（フレームの左から右に50%、上から下に0%）。
      2. BackgroundTransparencyを1に設定して、フレームの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0.03, 0}に設定して、画面の上部中央にフレームを配置します（画面の左から右に50%、上から下に3%）。
      4. Sizeを{0.5, 0},{0.13, 0}に設定して、フレームの要素が画面の上部の大部分を占めてプレイヤーの注意を引くようにします（横に50%、縦に13%）。
      5. NameをObjectiveに設定します。

    3. OPTIONAL
      ObjectiveにUIAspectRatioConstraintを挿入して、ラベルのアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。サンプルでは、UIAspectRatioConstraint.AspectRatioプロパティを7に設定しています。

  2. 目的のプロンプトオブジェクトのためのコンテナを作成します。

    1. ObjectiveにFrameを挿入します。

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

      1. AnchorPointを0.5, 0に設定して、フレームの原点を上部中央に設定します（フレームの左から右に50%、上から下に0%）。
      2. BackgroundTransparencyを1に設定して、フレームの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0, 0}に設定して、コンテナの中央にフレームを配置します（親フレームの左から右に50%、上から下に0%）。
      4. Sizeを{1, 0},{0.67, 0}に設定して、選択UIコンポーネントがコンテナの上から下の約半分を占めるようにします（親フレームの100%横、67%縦）。
      5. NameをObjectiveDisplayに設定します。

  3. タイトル要素を作成します。

    1. ObjectiveDisplayにImageLabelを挿入します。

    2. ImageLabelを選択し、プロパティウィンドウで、

      1. AnchorPointを0.5, 1に設定して、ラベルの原点を下部中央に設定します（ラベルの左から右に50%、上から下に100%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. LayoutOrderを-1に設定します。
      4. Positionを{0.5, 0},{0.34, 0}に設定して、フレームの上部中央にラベルを配置します（親フレームの左から右に50%、上から下に34%）。
      5. Sizeを{0.46, 0},{0.34, 0}に設定して、プロンプトエリアをフレームのほぼ半分に広げます（親フレームの46%横、34%縦）。
      6. NameをHeaderに設定します。
      7. Imageをrbxassetid://14304828123に設定して、台形を表示します。
      8. ImageTransparencyを0.15に設定して、ヘッダーを半透明にします。

    3. OPTIONAL
      ImageLabelにUIAspectRatioConstraintを挿入して、ラベルのアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。サンプルでは、UIAspectRatioConstraint.AspectRatioプロパティを13.781に設定しています。

    4. HeaderにTextLabelを挿入して、タイトルを表示します。

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

      1. AnchorPointを0.5, 0.5に設定して、新しいラベルの原点を中央に設定します（ラベルの左から右に50%、上から下に50%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルを親ラベルの中央に移動します（親ラベルの左から右に50%、上から下に50%）。
      4. Sizeを{0.62, 0},{0.55, 0}に設定して、テキストスペースを親ラベルの半分以上に広げます（親ラベルの62%横、55%縦）。
      5. NameをHeaderTextLabelに設定します。
      6. FontFaceをMontserratに設定して、未来的な美学に合わせます。
      7. WeightをMediumに設定して、フォントを太くします。
      8. TextをOBJECTIVEに設定します。
      9. TextScaledを有効にします。

  4. プロンプト要素を作成します。

    1. ObjectiveDisplayにImageLabelを挿入します。

    2. ImageLabelを選択し、プロパティウィンドウで、

      1. AnchorPointを0.5, 1に設定して、ラベルの原点を下部中央に設定します（ラベルの左から右に50%、上から下に100%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. Positionを{0.5, 0},{1, 0}に設定して、親フレームの下部中央にラベルを移動します（親フレームの左から右に50%、上から下に100%）。
      4. Sizeを{0.89, 0},{0.66, 0}に設定して、テキストスペースを親フレームのほぼ全幅に広げます（親フレームの89%横、66%縦）。
      5. NameをBodyに設定します。
      6. Imageをrbxassetid://14304827265に設定して、逆さ台形を表示します。
      7. ImageColor3を0, 0, 0に設定して、画像を黒に着色します。
      8. ImageTransparencyを0.3に設定して、ヘッダーを半透明にします。

    3. OPTIONAL
      ImageLabelにUIAspectRatioConstraintを挿入して、ラベルのアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。サンプルでは、UIAspectRatioConstraint.AspectRatioプロパティを13.781に設定しています。

    4. BodyにTextLabelを挿入して、プロンプトを表示します。

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

      1. AnchorPointを0.5, 0.5に設定して、新しいラベルの原点を中央に設定します（ラベルの左から右に50%、上から下に50%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルを親ラベルの中央に移動します（親ラベルの左から右に50%、上から下に50%）。
      4. Sizeを{0.85, 0},{0.39, 0}に設定して、テキストスペースを親ラベルの半分以上に広げます（親ラベルの85%横、39%縦）。
      5. NameをBodyTextLabelに設定します。
      6. FontFaceをMontserratに設定して、未来的な美学に合わせます。
      7. WeightをMediumに設定して、フォントを太くします。
      8. TextColor3を255, 255, 255に設定して、暗い背景に対してテキストを白くします。
      9. Textを**対戦相手をタグ付けしてポイントを獲得しよう！最初のチームが%dポイントを獲得したら勝ち。**に設定します。
      10. TextScaledを有効にします。

  5. 目的のチームカウンターのためのコンテナを作成します。

    1. ObjectiveにFrameを挿入します。

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

      1. AnchorPointを0.5, 1に設定して、フレームの原点を下部中央に設定します（フレームの左から右に50%、上から下に100%）。
      2. BackgroundTransparencyを1に設定して、フレームの背景を完全に透明にします。
      3. Positionを{0.5, 0},{1, 0}に設定して、コンテナの下部中央にフレームを配置します（親フレームの左から右に50%、上から下に100%）。
      4. Sizeを{0.44, 0},{0.27, 0}に設定して、選択UIコンポーネントがコンテナの左から右の約半分を占めるようにします（親フレームの44%横、27%縦）。
      5. NameをTeamPointCounterに設定します。

  6. チームカウンターのパディングを作成します。

    1. ステップ5のフレームにUIListLayoutオブジェクトを挿入します。
    2. UIListLayoutオブジェクトを選択し、プロパティウィンドウで、
      1. Paddingを0.025, 0に設定して、将来のチームカウンターの間にスペースを提供します。
      2. FillDirectionをHorizontalに設定して、各チームカウンターが隣り合って表示されるようにします。
      3. HorizontalAlignmentをCenterに設定して、各チームカウンターが互いに中央に揃うようにします。

  7. グリーンチームカウンター要素を作成します。

    1. TeamPointCounterにImageLabelを挿入します。

    2. ImageLabelを選択し、プロパティウィンドウで、

      1. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      2. Positionを{0.5, 0},{1, 0}に設定して、親フレームの下部中央にラベルを移動します（親フレームの左から右に50%、上から下に100%）。
      3. Sizeを{0.5, 0},{1, 0}に設定して、ラベルを親フレームの半分の幅に広げます（親フレームの50%横、100%縦）。
      4. NameをTeamACounterに設定します。
      5. Imageをrbxassetid://14304826831に設定して、方向性のフェードを表示します。
      6. ImageColor3を88, 218, 171に設定して、画像をミントグリーンに着色します。

    3. このラベルがグリーンチーム用であることを追跡するカスタム属性を設定します。

      1. プロパティウィンドウで、属性セクションに移動し、プラスアイコンをクリックします。ポップアップダイアログが表示されます。
      2. 名前フィールドにteamColorと入力します。
      3. タイプドロップダウンメニューで、BrickColorを選択します。
      4. 保存ボタンをクリックします。
      5. 新しいteamColor属性をMintに設定します。

    4. TeamACounterにTextLabelを挿入して、プロンプトを表示します。

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

      1. AnchorPointを1, 0.5に設定して、新しいラベルの原点を右中央に設定します（ラベルの左から右に100%、上から下に50%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. Positionを{0.95, 0},{0.5, 0}に設定して、親ラベルの右側にラベルを移動します（親ラベルの左から右に95%、上から下に50%）。
      4. Sizeを{0.85, 0},{0.39, 0}に設定して、テキストスペースを親ラベルの半分以上に広げます（親ラベルの85%横、39%縦）。
      5. FontFaceをMontserratに設定して、未来的な美学に合わせます。
      6. WeightをBoldに設定して、フォントを太くします。
      7. TextColor3を255, 255, 255に設定して、暗い背景に対してテキストを白くします。
      8. Textを**-**に設定します。
      9. TextScaledを有効にします。
      10. TextXAlignmentをRightに設定します。

    6. TextLabelにUIStrokeオブジェクトを挿入し、プロパティウィンドウでColorを8, 78, 52に設定して、ダッシュをダークグリーンのストロークでアウトラインします。

  8. ピンクチームカウンター要素を作成します。

    1. TeamAICounterとその子を複製します。

    2. 複製したTeamACounterを選択し、プロパティウィンドウで、

      1. NameをTeamBCounterに設定します。
      2. Imageをrbxassetid://14305849451に設定して、反対方向の方向性のフェードを表示します。
      3. ImageColor3を255, 170, 255に設定して、画像をカーネーションピンクに着色します。
      4. teamColor属性をCarnation Pinkに設定します。

    3. 複製したTextLabelをTeamBCounterの子として選択し、プロパティウィンドウで、

      1. AnchorPointを0, 0.5に設定して、新しいラベルの原点を左中央に設定します（ラベルの左から右に0%、上から下に50%）。
      2. Positionを{0.05, 0},{0.5, 0}に設定して、親ラベルの左側にラベルを移動します（親ラベルの左から右に5%、上から下に50%）。
      3. TextXAlignmentをLeftに設定します。

    4. 複製したUIStrokeをTeamBCounterの子として選択し、プロパティウィンドウでColorを158, 18, 94に設定して、ダッシュをダークピンクのストロークでアウトラインします。

  9. サンプルレーザータグプレースファイル内の以下のReplicatedStorageスクリプトを参照して、目的のプロンプトをプログラム的に更新し、チームポイントを追跡します。

以下のスクリプトは、setObjectiveやstartSyncingTeamPointsを含むメインヘッドアップディスプレイ（HUD）を設定するために協力するモジュールスクリプトのセットを必要とします。プレイヤーがラウンドに参加し、ブラスターを選択すると、このスクリプトはすべてのHUD UI要素がプレイヤーの状態、デバイス、およびチームのステータスに適切に表示されることを保証します。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

ブラスターUI

ワイヤーフレームを作成するの視覚的階層のベストプラクティスに従って、このセクションではプレイヤーのブラスターに関連するすべての画面上のUI要素を実装する方法を教えます。このUI要素のグループは、画面の中央付近の大部分のスペースを占め、3D空間でのアクションにプレイヤーの注意を引く焦点として機能し、ゲームプレイに最も重要です。

クロスヘア

クロスヘアは、プレイヤーが武器を発射する際に衝撃を与える場所を知らせるUI要素です。このUI要素は、プレイヤーがブラスターを正確に狙い、敵チームのメンバーをタグ付けするために必要な重要なゲームプレイ要件です。

ほとんどのファーストパーソンシューティングゲームと同様に、サンプルレーザータグゲームはクロスヘアを画面の中央に配置して、プレイヤーがアバターを3D空間で移動させる間に静的な焦点を持つことができるようにします。これにより、動きによる吐き気を軽減し、クロスヘアが目立つ一方で、全体の環境に溶け込むことができます。

サンプルレーザータグゲーム内でクロスヘアを正確に再現するには：

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

    1. エクスプローラーウィンドウで、StarterGuiサービスに移動します。

    2. 子HUDGuiオブジェクトにカーソルを合わせ、**⊕**アイコンをクリックします。文脈メニューが表示されます。

    3. 文脈メニューから、ImageLabelを挿入します。

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

    1. Imageをrbxassetid://14400935446に設定します。
    2. AnchorPointを0.5, 0.5に設定して、ラベルの原点をラベルの中央に設定します（ラベルの左から右に50%、上から下に50%）。
    3. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
    4. NameをCrosshairに設定します。
    5. Positionを{0.5,0},{0.5,0}に設定して、ラベルを画面の中央に配置します。
    6. ScaleTypeをFitに設定して、画像がそのコンテナ内に収まり、さまざまな画面サイズで伸びないようにします。

  3. OPTIONAL
    CrosshairにUIAspectRatioConstraintを挿入して、ラベルのアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。サンプルでは、UIAspectRatioConstraint.AspectRatioプロパティを0.895に設定しています。

ヒットマーカー

ヒットマーカーは、発射が敵チームの別のプレイヤーに衝撃を与えたときにのみ表示されるUI要素です。クロスヘアと同様に、このUI要素は、プレイヤーが対戦相手をタグ付けする際に成功したことを視覚的にフィードバックするために必要な重要なゲームプレイ要件です。

サンプルレーザータグゲーム内でヒットマーカーを正確に再現するには：

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

    1. エクスプローラーウィンドウで、StarterGuiサービスに移動します。

    2. 子Crosshairオブジェクトにカーソルを合わせ、**⊕**アイコンをクリックします。文脈メニューが表示されます。

    3. 文脈メニューから、ImageLabelを挿入します。

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

    1. Imageをrbxassetid://14401148736に設定して、長方形のヒットマーカーアイコンを表示します。
    2. AnchorPointを0.5, 0.5に設定して、ラベルの原点をラベルの中央に設定します。
    3. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
    4. Positionを{0.5,0},{0.5,0}に設定して、ラベルを画面の中央に配置します。
    5. NameをHitmarkerに設定します。
    6. Sizeを{0.6, 0},{0.06, 0}に設定して、クロスヘアの中央周辺の長方形のサイズを減少させます。
    7. ImageTransparencyを1に設定して、ヒットマーカーを完全に透明にします。次のステップのスクリプトが、プレイヤーの発射が敵チームの別のプレイヤーに衝撃を与えるたびに透明度を0に戻します。

  3. サンプルレーザータグプレースファイル内の以下のReplicatedStorageスクリプトを参照して、発射が敵チームのプレイヤーに衝撃を与えたときにヒットマーカーをプログラム的に表示します。

以下のスクリプトは、setupHitmarkerを含むメインヘッドアップディスプレイ（HUD）を設定するために協力するモジュールスクリプトのセットを必要とします。プレイヤーがラウンドに参加し、ブラスターを選択すると、このスクリプトはすべてのHUD UI要素がプレイヤーの状態、デバイス、およびチームのステータスに適切に表示されることを保証します。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

ブラスターセレクター

ブラスターセレクターは、プレイヤーがラウンドに参加または再参加する前にブラスタータイプを選択するために使用するUIコンポーネントです。サンプルレーザータグゲームは、広い水平スプレッドで複数のビームを生成するブラスターと、単一のビームを生成するブラスターの2種類を提供します。プレイヤーが選択するブラスターのタイプは、ラウンド中の戦略に影響を与えるため、このUIコンポーネントは全体のゲームの重要なワークフローです。

以下の手順では、異なるUI要素グループのためのいくつかのコンテナ、プロンプトを持つヘッダー、ナビゲーションおよび選択ボタン、ブラスターボタンのプレハブを作成する方法を詳述します。全体のコンポーネントのスクリプトロジックは、各ブラスタータイプを表すConfigurationインスタンスに応じて、ブラスターボタンのプレハブに異なる視覚的特性を自動的にポピュレートします。

このセットアップにより、StarterGui.PickABlasterGui内で個別のボタンを作成することなく、ブラスターセレクター内で正しく表示される追加のConfigurationインスタンスを作成できます。

サンプルレーザータグゲーム内でブラスターセレクターを正確に再現するには：

  1. コンポーネント全体のコンテナを作成します。

    1. PickABlaster ScreenGuiオブジェクトにFrameを挿入します。

      1. エクスプローラーウィンドウで、StarterGuiサービスに移動します。
      2. 子PickABlasterオブジェクトにカーソルを合わせ、**⊕**アイコンをクリックします。文脈メニューが表示されます。
      3. 文脈メニューから、Frameを挿入します。

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

      1. AnchorPointを0.5, 1に設定して、フレームの原点を下部中央に設定します（フレームの左から右に50%、上から下に100%）。
      2. BackgroundTransparencyを1に設定して、フレームの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0.9, 0}に設定して、画面の下部中央にフレームを配置します（画面の左から右に50%、上から下に92.4%）。
      4. Sizeを{0.8, 0},{0.25, 0}に設定して、ブラスターセレクターのUIコンポーネントが画面の大部分を占めてプレイヤーの注意を引くようにします（横に80%、縦に25%）。
      5. NameをComponentに設定します。

    3. OPTIONAL
      ComponentにUIAspectRatioConstraintを挿入して、フレームとその子UI要素のアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。サンプルでは、UIAspectRatioConstraint.AspectRatioプロパティを5に設定しています。

  2. UI要素グループを保持するためのコンテナを作成します。

    1. ComponentにFrameを挿入します。

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

      1. AnchorPointを0.5, 0.5に設定して、フレームの原点を中央に設定します（フレームの左から右に50%、上から下に50%）。
      2. BackgroundTransparencyを1に設定して、フレームの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0.375, 0}に設定して、コンテナの上部中央にフレームを配置します（親フレームの左から右に50%、上から下に37.5%）。
      4. Sizeを{1, 0},{0.75, 0}に設定して、選択UIコンポーネントがコンテナの3/4を占めるようにします（親フレームの100%横、75%縦）。
      5. NameをSelectionFrameに設定します。

  3. ブラスターセレクターのプロンプトを作成します。

    1. SelectionFrameにImageLabelを挿入します。

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

      1. AnchorPointを0.5, 1に設定して、ラベルの原点を下部中央に設定します（ラベルの左から右に50%、上から下に100%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. LayoutOrderを-1に設定します。
      4. Positionを{0.5, 0},{0.22, 0}に設定して、フレームの上部中央にラベルを配置します（親フレームの左から右に50%、上から下に22%）。
      5. Sizeを{0.45, 0},{0.22, 0}に設定して、プロンプトエリアをフレームのほぼ半分に広げます（親フレームの45%横、22%縦）。
      6. NameをHeaderに設定します。
      7. Imageをrbxassetid://14304828123に設定して、台形を表示します。
      8. ImageTransparencyを0.15に設定して、ヘッダーを半透明にします。

    3. OPTIONAL
      ラベルにUIAspectRatioConstraintを挿入して、ラベルのアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。サンプルでは、UIAspectRatioConstraint.AspectRatioプロパティを13.78に設定しています。

    4. HeaderにTextLabelを挿入して、プロンプトを表示します。

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

      1. AnchorPointを0.5, 0.5に設定して、新しいラベルの原点を中央に設定します（ラベルの左から右に50%、上から下に50%）。
      2. BackgroundTransparencyを1に設定して、ラベルの背景を完全に透明にします。
      3. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルを親ラベルの中央に移動します（親ラベルの左から右に50%、上から下に50%）。
      4. Sizeを{0.6, 0},{0.55, 0}に設定して、テキストスペースを親ラベルの半分以上に広げます（親ラベルの60%横、55%縦）。
      5. NameをHeaderTextLabelに設定します。
      6. FontFaceをMontserratに設定して、未来的な美学に合わせます。
      7. WeightをMediumに設定して、フォントを太くします。
      8. Textをブラスターを選択してくださいに設定します。
      9. TextScaledを有効にします。

  4. ブラスター ボタン コンテナと選択矢印のコンテナを作成します。

    1. SelectionFrame に ImageLabel を挿入します。

    2. 新しいラベルを選択し、Properties ウィンドウで、

      1. デフォルトの Image 値を削除します。
      2. AnchorPoint を 0.5, 1 に設定して、ラベルの原点を自分の下中央に設定します（ラベルの左から右まで50%、上から下まで100%）。
      3. BackgroundColor を 0, 0, 0 に設定して、ラベルを黒にします。
      4. BackgroundTransparency を 0.3 に設定して、ラベルの不透明度を30%減少させ、ゲーム内のすべての黒いUI要素と一致させます。
      5. Position を {0.5, 0},{1, 0} に設定して、ラベルをフレームの下中央に配置します（親フレームの左から右まで50%、上から下まで100%）。
      6. Size を {1, 0},{0.77, 0} に設定して、ラベルの領域をプロンプトの下のスペースに広げます（親フレームの100%の横幅と77%の縦幅）。

    3. コンテナの角を丸めます。

      1. ラベルに UICorner オブジェクトを挿入します。
      2. 新しいコーナーオブジェクトを選択し、Properties ウィンドウで、CornerRadius を 0.075, 0 に設定して角を丸めます。

  5. ブラスター ボタンのコンテナを作成します。

    1. ステップ 4 のラベルに Frame を挿入します。

    2. 新しいフレームを選択し、Properties ウィンドウで、

      1. AnchorPoint を 0.5, 0.5 に設定して、新しいフレームの原点を自分の中央に設定します（フレームの左から右まで50%、上から下まで50%）。
      2. BackgroundTransparency を 1 に設定して、フレームの背景を完全に透明にします。
      3. Position を {0.5, 0},{0.5, 0} に設定して、フレームを親ラベルの中央に配置します（親フレームの左から右まで50%、上から下まで50%）。
      4. Size を {0.85, 0},{0.77, 0} に設定して、フレームの領域をラベルのほとんどに広げます（親ラベルの85%の横幅と77%の縦幅）。
      5. Name を Container に設定します。

  6. 将来のすべてのブラスター ボタンのためのパディングを作成します。

    1. ステップ 5 のフレームに UIListLayout オブジェクトを挿入します。
    2. 新しいレイアウトオブジェクトを選択し、Properties ウィンドウで、
      1. Padding を 0.035, 0 に設定して、すべての将来のボタンの間にスペースを提供します。
      2. FillDirection を Horizontal に設定して、各ボタンが隣接して表示されるようにします。
      3. HorizontalAlignment と VerticalAlignment の両方を Center に設定して、各ボタンが互いに中央に揃うようにします。

  7. 左のナビゲーションボタンを作成します。

    1. ステップ 4 の ImageLabel に ImageButton オブジェクトを挿入します。

    2. 新しいボタンを選択し、Properties ウィンドウで、

      1. デフォルトの Image 値を削除します。
      2. AnchorPoint を 0, 0.5 に設定して、新しいボタンの原点を自分の左中央に設定します（ボタンの左から右まで0%、上から下まで50%）。
      3. BackgroundTransparency を 0.15 に設定して、ボタンが選択可能であることを示す視覚的フィードバックを提供します。
      4. Position を {0.02, 0},{0.5, 0} に設定して、親コンテナの左側にボタンのパディングを提供します（親ラベルの左から右まで2%、上から下まで50%）。
      5. Size を {0.04, 0},{0.33, 0} に設定して、選択ボタンをブラスター ボタンよりもはるかに小さくします（親フレームの4%の横幅と33%の縦幅）。
      6. Name を NavigationButtonLeft に設定します。

    3. ボタンの角を丸めます。

      1. ボタンに UICorner オブジェクトを挿入します。
      2. 新しいコーナーオブジェクトを選択し、Properties ウィンドウで、CornerRadius を 0.1, 0 に設定して角を丸めます。

    4. ボタンに ImageLabel オブジェクトを挿入します。

    5. 新しいラベルを選択し、Properties ウィンドウで、

      1. AnchorPoint を 0.5, 0.5 に設定して、新しいラベルの原点を自分の中央に設定します（ラベルの左から右まで50%、上から下まで50%）。
      2. Position を {0.45, 0},{0.5, 0} に設定して、ラベルを親ボタンの中央付近に配置します（親ボタンの左から右まで45%、上から下まで50%）。この値は中央ではありません。なぜなら、矢印は {0.5, 0},{0.5, 0} でボタンの中央に見えないからです。
      3. Size を {0.8, 0},{0.8, 0} に設定して、ラベルの領域をプロンプトの下のスペースに広げます（親フレームの80%の横幅と80%の縦幅）。
      4. BackgroundTransparency を 1 に設定して、画像の背景を完全に透明にします。
      5. Image を rbxassetid://14309187238 に設定します。
      6. ScaleType を Fit に設定します。

  8. 右のナビゲーションボタンを作成します。

    1. NavigationButtonLeft を複製します。

    2. 複製したボタンを選択し、Properties ウィンドウで、

      1. AnchorPoint を 1, 0.5 に設定して、新しいボタンの原点を自分の右中央に設定します（ボタンの左から右まで100%、上から下まで50%）。
      2. Position を {0.98, 0},{0.5, 0} に設定して、親コンテナの右側にボタンのパディングを提供します（親ラベルの左から右まで98%、上から下まで50%）。
      3. Name を NavigationButtonRight に設定します。

    3. その ImageLabel 子オブジェクトを選択します。

      1. Rotation を 180 に設定して、画像を反転させます。
      2. Position を {0.55, 0},{0.5, 0} に設定して、ラベルを親ボタンの中央付近に配置します（親ボタンの左から右まで55%、上から下まで50%）。この値は中央ではありません。なぜなら、矢印は {0.5, 0},{0.5, 0} でボタンの中央に見えないからです。

  9. SELECT ボタンを作成します。

    1. Component に ImageButton を挿入します。このプロセスにより、選択ボタンが SelectionFrame から分離され、コンポーネントのメイン部分と選択ボタンの間にパディングを追加できます。

    2. 新しいボタンを選択し、Properties ウィンドウで、

      1. デフォルトの Image 値を削除します。
      2. AnchorPoint を 0.5, 1 に設定して、新しいボタンの原点を自分の下中央に設定します（ボタンの左から右まで50%、上から下まで100%）。
      3. BackgroundTransparency を 0.15 に設定して、ボタンが選択可能であることを示す視覚的フィードバックを提供します。
      4. Position を {0.5, 0},{0.99, 0} に設定して、ボタンをコンテナの下中央に配置します（親フレームの左から右まで50%、上から下まで99%）。
      5. Size を {0.17, 0},{0.18, 0} に設定して、ボタンをブラスター ボタンの下に長くします（親フレームの17%の横幅と18%の縦幅）。
      6. Name を SelectButton に設定します。

    3. ボタンの角を丸めます。

      1. ボタンに UICorner オブジェクトを挿入します。
      2. 新しいコーナーオブジェクトを選択し、Properties ウィンドウで、CornerRadius を 0.2, 0 に設定して角を丸めます。

    4. ボタンに TextLabel オブジェクトを挿入して、アクションを表示できるようにします。

    5. 新しいラベルを選択し、Properties ウィンドウで、

      1. AnchorPoint を 0.5, 0.5 に設定して、新しいラベルの原点を自分の中央に設定します（ラベルの左から右まで50%、上から下まで50%）。
      2. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
      3. Position を {0.5, 0},{0.5, 0} に設定して、ラベルをボタンの中央に移動します（親ボタンの左から右まで50%、上から下まで50%）。
      4. Size を {0.9, 0},{0.55, 0} に設定して、テキストスペースを親ラベルのほとんどの幅に広げます（親ラベルの90%の横幅と55%の縦幅）。
      5. Name を SelectTextLabel に設定します。
      6. FontFace を Montserrat に設定して、未来的な美学に合わせます。
      7. Weight を Medium に設定して、フォントを太くします。
      8. Text を SELECT に設定します。
      9. TextScaled を有効にします。

  10. ブラスター ボタンのプレハブを作成します。

    1. ReplicatedStorage サービス内に、UIオブジェクトを整理するためのフォルダ構造を作成します。サンプルでは、Instances フォルダに子として Guis フォルダを使用します。
    2. Guis フォルダに ImageButton オブジェクトを挿入します。
    3. 新しいボタンを選択し、Properties ウィンドウで、
      1. デフォルトの Image 値を削除します。
      2. AnchorPoint を 0.5, 0.5 に設定して、新しいボタンの原点を自分の中央に設定します（ボタンの左から右まで50%、上から下まで50%）。
      3. BackgroundTransparency を 0.65 に設定して、ボタンがフォーカスされていないことを示す視覚的フィードバックを提供します。ステップ 12 のスクリプトは、ボタンがフォーカスされているときにプログラム的な視覚的フィードバックを提供します。
      4. LayoutOrder を 2 に設定します。
      5. Name を BlasterButtonPrefab に設定します。
      6. Size を {0.8, 0},{0.8, 0} に設定します。
      7. ImageTransparency を 1 に設定して、画像を完全に透明にします。
    4. BlasterButtonPrefab に UIAspectRatioConstraint を挿入して、ボタンのアスペクト比がプレイヤーの画面サイズに関係なく同じになるようにします。
    5. ボタンの角を丸めます。
      1. BlasterButtonPrefab に UICorner オブジェクトを挿入します。
      2. UICorner を選択し、Properties ウィンドウで、CornerRadius を 0.05, 0 に設定して角を丸めます。
    6. BlasterButtonPrefab に ImageLabel を挿入します。
    7. 新しいラベルを選択し、Properties ウィンドウで、
      1. デフォルトの Image 値を削除します。
      2. AnchorPoint を 0.5, 0.5 に設定して、新しいラベルの原点を自分の中央に設定します（ラベルの左から右まで50%、上から下まで50%）。
      3. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
      4. Position を {0.52, 0},{0.497, 0} に設定して、ラベルを親ボタンの中央付近に配置します（親ボタンの左から右まで52%、上から下まで49.7%）。この値は中央ではありません。なぜなら、ブラスターは {0.5, 0},{0.5, 0} でボタンの中央に見えないからです。
      5. Size を {1.20, 0},{0.9, 0} に設定して、ラベルの領域をボタンの外側に広げます（親ボタンの120%の横幅と90%の縦幅）。
      6. ScaleType を Fit に設定します。

  11. 次の ReplicatedStorage スクリプトをサンプル Laser Tag プレースファイル内で参照し、プログラム的に各ブラスターのボタンを表示し、プレイヤーがフォーカスされていないボタンを選択したときにボタンをスケールし、プレイヤーのブラスター選択をアバターに関連付けます。

次のスクリプトは、ブラスターセレクターを作成するために連携して動作する一連のスクリプトを必要とします。プレイヤーがゲームに参加するか、健康がゼロに達した後にラウンドに再出現すると、このスクリプトはプレイヤーが選択を行うまでブラスターセレクターのすべてのUI要素をアクティブにします。

local Players = game:GetService("Players")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local GuiAttribute = require(ReplicatedStorage.GuiAttribute)

local setupBlasterButtons = require(script.setupBlasterButtons)

local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")



setupBlasterButtons(gui)

connectResetSelectionOnEnabled(gui)

gui:SetAttribute(GuiAttribute.selectedIndex, 1)

ブラストボタン

ブラストボタンは、プレイヤーがモバイルまたはタブレットデバイスを介してゲームにアクセスしている場合に、ブラスターを発射するために使用する UI コンポーネントです。サンプルのレーザー タグ ゲームでは、テキストなしでボタンの機能を伝えるために、十字線とブラストのアイコンを描いたブラスターボタンを使用しています。

サンプルの Laser Tag ゲーム内でブラストボタンを正確に再作成するには：

  1. HUDGui ScreenGui オブジェクトに ImageButton を挿入します。

    1. Explorer ウィンドウで、StarterGui サービスに移動します。

    2. 子の HUDGui オブジェクトにカーソルを合わせ、⊕ アイコンをクリックします。コンテキストメニューが表示されます。

    3. コンテキストメニューから ImageButton を挿入します。

  2. ビューポートで、ボタンをプレイヤーの親指が自然に休む位置に移動し、ボタンがプレイヤーのデバイスでどのように見えるかを視覚的に把握します。その後、Properties ウィンドウで、

    1. Image を rbxassetid://18308375035 に設定して、ブラストボタンアイコンを表示します。
    2. PressedImage を rbxassetid://18308372558 に設定して、プレイヤーがボタンを押したときにブラストボタンアイコンの反転バージョンを表示します。
    3. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
    4. Name を BlastButton に設定します。
    5. ScaleType を Fit に設定して、画像がコンテナ内に収まり、さまざまな画面サイズで伸びないようにします。
    6. ImageTransparency を 0.3 に設定して、ラベルの不透明度を減少させ、ゲーム内のすべての黒いUI要素と一致させます。

  3. BlastButton に UIAspectRatioConstraint を挿入して、ボタンのアスペクト比がプレイヤーの画面サイズに関係なく同じになるようにします。

  4. 次の ReplicatedStorage スクリプトをサンプル Laser Tag プレースファイル内で参照し、プレイヤーがタッチ入力を使用しているデバイスでブラストボタンをプログラム的に表示します。

次のスクリプトは、setupTouchButtonAsync を含むメイン ヘッドアップ ディスプレイ (HUD) をセットアップするために連携して動作する一連のモジュール スクリプトを必要とします。プレイヤーがラウンドに参加し、ブラスターを選択すると、このスクリプトはすべての HUD UI 要素がプレイヤーの状態、デバイス、およびチームのステータスに適切に表示されることを保証します。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

プレイヤー UI

Wireframe Your Layouts からの視覚的階層のベスト プラクティスに従って、このセクションでは、プレイヤーの状態に関連するすべての画面上の UI 要素を実装する方法を教えます。これらの UI 要素のグループは画面の側近くに配置されており、プレイヤーはゲームプレイから注意をそらすことなく、この周辺情報を理解できます。

プレイヤーインジケーター

プレイヤーインジケーターは、プレイヤーがチームのスポーンゾーンにスポーンするとすぐに、どのチームに属しているかを迅速に判断するために参照する UI コンポーネントです。サンプルのレーザー タグ ゲームでは、プレイヤーが 緑 チームまたは ピンク チームにいるかどうかに応じて、2 つのバージョンのプレイヤーインジケーターを提供します。

緑チーム
ピンクチーム

Select a Color Theme からのガイダンスに従って、両方のバージョンのプレイヤーインジケーターは、チームカラーとユニークでシンプルなアイコンを組み合わせており、詳細が最小限に抑えられているため、小さな画面でも読みやすくなっています。視覚的フィードバックの 2 つの形式を提供することは、色盲のプレイヤーにとってデザインをアクセシブルに保つのに役立つため、重要です。

サンプルの Laser Tag ゲーム内でプレイヤーインジケーターコンポーネントを正確に再作成するには：

  1. HUDGui ScreenGui オブジェクトに Frame を挿入します。

    1. Explorer ウィンドウで、StarterGui サービスに移動します。
    2. 子の HUDGui オブジェクトにカーソルを合わせ、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
    3. コンテキストメニューから Frame を挿入します。

  2. 新しい Frame を選択し、Properties ウィンドウで、

    1. AnchorPoint を 0, 1 に設定して、フレームの原点を自分の下中央に設定します（フレームの左から右まで0%、上から下まで100%）。

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

    3. Name を PlayerDisplay に設定します。

    4. Position を {0.02, 0},{0.97, 0} に設定して、フレームを画面の左下近くに配置します。

    5. Size を {0.23, 0},{0.08, 0} に設定して、フレームを短くし、広げます。

    6. ClipsDescendants を有効にして、フレームを超えて拡張される子 GuiObjects をトリミングします。

  3. 多角形の形状を作成します。

    1. PlayerDisplay に ImageLabel を挿入します。

    2. 新しいラベルを選択し、Properties ウィンドウで、

      1. Image を rbxassetid://14304828123 に設定して、台形アイコンを表示します。
      2. AnchorPoint を 1, 1 に設定して、ラベルの原点を自分の右下に設定します（ラベルの左から右まで100%、上から下まで100%）。
      3. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
      4. Name を Block に設定します。
      5. Position を {1,0},{1,0} に設定して、ラベルをフレームの右側に配置します。
      6. Size を {1.858, 0},{0.581, 0} に設定して、ラベルをフレームの外側に広げ、フレームの半分以上の長さに短くします。
      7. ImageTransparency を 0.15 に設定して、ラベルをわずかに透明にします。
      8. ScaleType を Fit に設定して、画像がコンテナ内に収まり、さまざまな画面サイズで伸びないようにします。
      1. Block に UIAspectRatioConstraint を挿入して、ラベルとその子 UI 要素のアスペクト比がプレイヤーの画面サイズに関係なく同じになるようにします。
      2. 新しい制約を選択し、Properties ウィンドウで、AspectRatio を 13.78 に設定します。

  4. プレイヤーのポートレート用のボックスを作成します。

    1. PlayerDisplay に ImageLabel を挿入します。

    2. 新しいラベルを選択し、Properties ウィンドウで、

      1. Image プロパティ内のプレースホルダー アセット ID を削除します。ステップ 7 のスクリプトがプログラム的にプレイヤーのポートレートを画像ラベルに挿入します。
      2. AnchorPoint を 0, 1 に設定して、ラベルの原点を自分の左下に設定します（ラベルの左から右まで0%、上から下まで100%）。
      3. BackgroundColor3 を 0, 0, 0 に設定して、ラベルの背景色を黒に設定します。
      4. BackgroundTransparency を 0.3 に設定して、ラベルの不透明度を30%減少させ、ゲーム内のすべての黒いUI要素と一致させます。
      5. Name を PlayerPortrait に設定します。
      6. Position を {0.11, 0},{1, 0} に設定して、ラベルを多角形の左側に配置します。
      7. Size を {0.23, 0},{1, 0} に設定して、ラベルを縮小します。
      8. ImageTransparency を 0.15 に設定して、ラベルをわずかに透明にします。
      9. ScaleType を Fit に設定して、画像がコンテナ内に収まり、さまざまな画面サイズで伸びないようにします。
      1. PlayerPortrait に UIAspectRatioConstraint を挿入して、ラベルとその子 UI 要素のアスペクト比がプレイヤーの画面サイズに関係なく同じになるようにします。
      2. PlayerPortrait に UICorner を挿入し、Properties ウィンドウで、CornerRadius を 0.05, 0 に設定して角をわずかに丸めます。

  5. プレイヤーの名前用のテキストラベルを作成します。

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

    2. 新しいラベルを選択し、Properties ウィンドウで、

      1. AnchorPoint を 0, 0.5 に設定して、新しいボタンの原点を自分の左中央に設定します（ボタンの左から右まで0%、上から下まで50%）。
      2. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
      3. Name を PlayerNameTextLabel に設定します。
      4. Position を {0.35, 0},{0.72, 0} に設定して、ラベルをコンテナの右側に配置します（親ラベルの左から右まで35%、上から下まで72%）。
      5. Size を {0.52, 0},{0.3, 0} に設定して、テキストが多角形の形状のほとんどの領域を占めるようにします（親フレームの52%の横幅と30%の縦幅）。
      6. FontFace を Montserrat に設定して、未来的な美学に合わせます。
      7. Weight を Bold に設定して、フォントを太くします。
      8. Text プロパティ内のプレースホルダー テキストを削除します。ステップ 7 のスクリプトがプログラム的にプレイヤーの名前をテキストラベルに挿入します。
      9. TextScaled を有効にします。
      10. TextXAlignment を Left に設定します。

  6. プレイヤーのポートレートの左側に表示されるチームアイコンと色を作成します。

    1. PlayerDisplay に Folder を挿入し、名前を TeamIcons に変更します。

    2. 緑 チームアイコンと色を作成します。

      1. TeamIcons に ImageLabel を挿入します。
      2. 新しいラベルを選択し、Properties ウィンドウで、
        1. AnchorPoint を 0, 1 に設定して、ラベルの原点を自分の左下に設定します（ラベルの左から右まで0%、上から下まで100%）。
        2. BackgroundColor3 を 88, 218, 171 に設定して、ラベルの背景色をミントグリーンに設定します。
        3. Name を TeamAIcon に設定します。
        4. Position を {0, 0},{1, 0} に設定して、ラベルをフレームの左側に配置します。
        5. Size を {0.135, 0},{0.58, 0} に設定して、ラベルをプレイヤーのポートレートの左側に縮小します。
        6. ImageTransparency を 1 に設定して、ラベルを透明にします。
      1. このラベルが緑チーム用であることを追跡するカスタム属性を構成します。このステップは、ステップ 7 のスクリプトにとって非常に重要です。
        1. Properties ウィンドウで、Attributes セクションに移動し、プラスアイコンをクリックします。ポップアップダイアログが表示されます。
        2. Name フィールドに teamColor と入力します。
        3. Type ドロップダウンメニューで BrickColor を選択します。
        4. Save ボタンをクリックします。
        5. 新しい teamColor 属性を Mint に設定します。
      2. TeamAIcon に UIAspectRatioConstraint を挿入して、ラベルとその子 UI 要素のアスペクト比がプレイヤーの画面サイズに関係なく同じになるようにします。
      3. アイコンを作成します。
        1. TeamAIcon に ImageLabel を挿入します。
        2. 新しいラベルを選択し、Properties ウィンドウで、
          1. Image を rbxassetid://14309678670 に設定して、緑チームアイコンを表示します。
          2. AnchorPoint を 0.5, 0.5 に設定して、ラベルの原点を自分の中央に設定します（ラベルの左から右まで50%、上から下まで50%）。
          3. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
          4. Name を Icon に設定します。
          5. Position を {0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に配置します。
          6. Size を {0.7, 0},{0.6, 0} に設定して、ラベルを縮小します。
          7. ScaleType を Fit に設定して、画像がコンテナ内に収まり、さまざまな画面サイズで伸びないようにします。

    3. ピンク チームアイコンと色を作成します。

      1. TeamAIcon とその子を複製します。
      2. 複製した TeamAIcon を選択し、Properties ウィンドウで、
        1. BackgroundColor3 を 255, 170, 255 に設定して、ラベルの背景色をカーネーションピンクに設定します。
        2. Name を TeamBIcon に設定します。
        3. teamColor 属性を Carnation Pink に設定します。
        4. 複製した TeamBIcon の子である Icon を選択し、Properties ウィンドウで Image を rbxassetid://14309678549 に設定して、ピンクチームアイコンを表示します。

  7. 次の ReplicatedStorage スクリプトをサンプル Laser Tag プレースファイル内で参照し、プレイヤーがラウンド中にアクティブなときに適切なチームカラーとアイコンでプレイヤーインジケーターをプログラム的に表示します。

次のスクリプトは、startSyncingTeamColor、setPlayerName、および setPlayerPortrait を含む一連のモジュール スクリプトが連携して動作し、プレイヤーがラウンドに参加し、ブラスターを選択した後、すべての HUD UI 要素がプレイヤーの状態、デバイス、およびチームのステータスに適切に表示されることを保証します。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

フォースフィールド画面フォースフィールドスクリーンは、プレイヤーがラウンドに参加または再参加している間、敵チームの攻撃から安全であることを知らせるためにビューポートに重ねられるUI要素です。Choose an Art Styleからのアイコンの美的ガイドラインに従い、サンプルのレーザータグゲームでは、フォースフィールドを象徴するために半透明の六角形パターンを利用しています。このデザインの決定は、ゲーム内のすべてのUIに対する全体的な未来的なアートスタイルを強化するだけでなく、テキストや追加のガイダンスなしでプレイヤーの状態を伝えます。

サンプルのレーザータグゲーム内でフォースフィールドスクリーンを正確に再現するには：

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

    1. Explorerウィンドウで、StarterGuiサービスに移動します。

    2. 子のForceFieldGuiオブジェクトにカーソルを合わせ、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。

    3. コンテキストメニューからImageLabelを挿入します。

  2. 新しいラベルを選択し、Propertiesウィンドウで、

    1. Imageをrbxassetid://14462567888に設定します。

    2. BackgroundTransparencyを0.8に設定してフォースフィールドを半透明にします。

    3. Sizeを{1, 0},{1, 0}に設定して、画像が画面全体を埋めるようにします（親のScreenGuiの100%の横幅と100%の縦幅）。

    4. ScaleTypeをTileに設定して、六角形が画面全体にタイル状に表示されるようにします。

    5. TileSizeを{0, 104},{0, 180}に設定します。

  3. ラベルにUIGradientオブジェクトを挿入します。

  4. 新しいグラデーションオブジェクトを選択し、Propertiesウィンドウで、

    1. Colorを青から白に変わり、再び青になるカラシーケンスに設定します。

      1. Colorを120, 192, 250に設定して、すべての六角形に明るい青の色合いを適用します。

      2. Colorプロパティをクリックし、**⋯**ボタンをクリックします。カラシーケンスのポップアップが表示されます。

        カラシーケンスの下軸の各三角形は、そのポイントでのプロパティの色値を決定するキーポイントです。

      3. カラシーケンスをクリックしてドラッグし、Time値が0.05に達するまで続け、次にColorの隣の小さな四角をクリックしてColorsポップアップウィンドウを開きます。

      4. 明るい白を選択し、ポップアップウィンドウを閉じます。

      5. カラシーケンスをクリックしてドラッグし、Time値が0.95に達するまで続け、再度Colorsポップアップウィンドウを開き、前と同じ白を選択します。

    2. Rotationを225に設定して、カラシーケンスの青い部分が左上と右下の隅に表示されるようにします。

    3. Transparencyを設定して、フォースフィールドがきらめいているように見える数値シーケンスにします。

      1. Transparencyプロパティをクリックし、**⋯**ボタンをクリックします。数値シーケンスのポップアップが表示されます。数値シーケンスの開始と終了の各四角は、そのポイントでのプロパティの透明度値を決定するキーポイントです。

      2. 数値シーケンス全体で次の時間と値のプロパティを設定します：

      • Time = 0, Value = 0.25
      • Time = .101, Value = 0.875
      • Time = .183, Value = 0
      • Time = .3, Value = 1
      • Time = .7, Value = 1
      • Time = 1, Value = 0.9

  5. ステップ2からImageLabelを複製します。

  6. 複製したラベル内のUIGradientオブジェクトを選択し、Propertiesウィンドウで、

    1. Rotationを-45に設定して、画像を反転させてY軸に沿ってほぼミラーリングします。

    2. きらめきをより自然に見せるためにTransparencyを変更します。

      1. Transparencyプロパティをクリックし、**⋯**ボタンをクリックします。数値シーケンスのポップアップが表示されます。
      2. 3番目のキーフレームを選択し、Deleteボタンをクリックします。

  7. サンプルのレーザータグプレースファイル内の次のReplicatedStorageスクリプトを参照して、プレイヤーがラウンドに参加または再参加している間にフォースフィールドスクリーンをプログラム的に表示します。

次のReplicatedStorage.ForceFieldClientVisualsクライアントスクリプトは、デフォルトのForceFieldビジュアルをStarterGui.ForceFieldGuiで置き換えます。プレイヤーがゲームにロードされ、Durationプロパティが0より大きいSpawnLocationでスポーンすると、すべてのゲームでのデフォルトの動作は、アバターに保護された青いオーブを提供し、一時的に健康を失うのを防ぎます。

このスクリプトは、ForceFieldがキャラクターに追加されたときにリスニングを開始し、デフォルトの一人称フォースフィールドビジュアルを無効にし、次にForceFieldGui ScreenGuiオブジェクトを有効にします。これは、プレイヤーが他のプレイヤーがゲームに再出現するのを見ているときの三人称ビジュアルには影響しないことに注意してください。

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen.
一人称フォースフィールドビジュアル
Third-person force field visuals include a blue sparkling orb around the player spawning into the game.
三人称フォースフィールドビジュアル
local Players = game:GetService("Players")



local localPlayer = Players.LocalPlayer



local function onCharacterAddedAsync(character: Model)

	local forceField = character:WaitForChild("ForceField", 3)

	if not forceField then

		-- プレイヤーがフォースフィールドが無効なスポーンポイントでスポーンした場合

		return

	end



	forceField.Visible = false

	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true

	forceField.Destroying:Wait()

	localPlayer.PlayerGui.ForceFieldGui.Enabled = false

end



if localPlayer.Character then

	onCharacterAddedAsync(localPlayer.Character)

end



localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

リスポーン画面

リスポーン画面は、プレイヤーがタグ付けされており、サーバーが彼らをスポーンゾーンに戻すプロセスにあることを知らせるためにビューポートを暗くするUI要素です。このUI要素は、プレイヤーがタグ付けされたことを処理し、アクティブなラウンドに再参加する前に次の動きを戦略的に考える時間を与えるために重要です。

サンプルのレーザータグゲームにおけるカスタムリスポーン動作の詳細については、Gameplay ScriptingカリキュラムのRespawn Charactersを参照してください。

サンプルのレーザータグゲーム内でリスポーン画面を正確に再現するには：

  1. 中央情報バナーを作成します。

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

      1. Explorerウィンドウで、StarterGuiサービスに移動します。

      2. 子のOutStateGuiオブジェクトにカーソルを合わせ、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。

      3. コンテキストメニューからImageLabelを挿入します。

    2. 新しいラベルを選択し、Propertiesウィンドウで、

      1. AnchorPointを0.5, 0.5に設定して、新しいボタンの原点をその中央に設定します（ラベルの左から右に50%、上から下に50%）。

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

      3. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルをそのコンテナの中央に配置します（親のScreenGuiの左から右に50%、上から下に50%）。

      4. Sizeを{0.48, 0},{0.06, 0}に設定して、ラベルを広げます（親のScreenGuiの横幅の48%と縦幅の6%）。

      5. NameをBlockに設定します。

      6. Imageをrbxassetid://14304827265に設定して、画像を台形にします。

      7. ImageColorを0,0,0に設定して、台形を黒にします。

      8. ImageTransparencyを0.3に設定して、ラベルの不透明度を30%減少させ、ゲーム内のすべての黒いUI要素と一致させます。

    3. BlockにUIAspectRatioConstraintを挿入して、ラベルとその子UI要素のアスペクト比がプレイヤーの画面サイズに関係なく同じままになるようにします。

    4. 新しい制約を選択し、PropertiesウィンドウでAspectRatioを13.78に設定します。

    5. Blockに情報テキスト用のTextLabelを挿入します。

    6. 新しいラベルを選択し、Propertiesウィンドウで、

      1. AnchorPointを0.5, 0.5に設定して、ラベルの原点をその中央に設定します（ラベルの左から右に50%、上から下に50%）。

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

      3. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルをその親ラベルの中央に配置します（親ラベルの左から右に50%、上から下に50%）。

      4. Sizeを{.85, 0},{0.55, 0}に設定して、テキストが台形の面積のほとんどを占めるようにします（親ラベルの横幅の85%と縦幅の55%）。

      5. NameをBodyTextLabelに設定します。

      6. FontFaceをMontserratに設定して、未来的な美学に合わせます。

      7. WeightをBoldに設定して、フォントを太くします。

      8. Textを**Respawning…**に設定します。

      9. TextColor3を255, 255, 255に設定して、テキストを白にします。

      10. TextScaledを有効にします。

  2. ヘッダーを作成します。

    1. BlockにImageLabelを挿入します。

    2. 新しいラベルを選択し、Propertiesウィンドウで、

      1. AnchorPointを0.5, 1に設定して、ラベルの原点をその下部中央に設定します（ラベルの左から右に50%、上から下に100%）。

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

      3. Positionを{0.5, 0},{0, 0}に設定して、ラベルをその親ラベルの上部中央に配置します（親ラベルの左から右に50%、上から下に0%）。

      4. Sizeを{0.46, 0},{0.56, 0}に設定して、ラベルを広げます（親ラベルの横幅の46%と縦幅の56%）。

      5. NameをHeaderに設定します。

      6. Imageをrbxassetid://14304826985に設定して、画像を多方向にフェードさせます。

      7. ImageColorを245, 46, 46に設定して、フェードを赤にして、プレイヤーがラウンドから一時的に非アクティブであることを示します。

    3. Headerに情報テキスト用のTextLabelを挿入します。

    4. 新しいラベルを選択し、Propertiesウィンドウで、

      1. AnchorPointを0.5, 0.5に設定して、ラベルの原点をその中央に設定します（ラベルの左から右に50%、上から下に50%）。

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

      3. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルをその親ラベルの中央に配置します（親ラベルの左から右に50%、上から下に50%）。

      4. Sizeを{.85, 0},{0.55, 0}に設定して、テキストがフェードエリアのほとんどを占めるようにします（親ラベルの横幅の85%と縦幅の55%）。

      5. NameをHeaderTextLabelに設定します。

      6. FontFaceをMontserratに設定して、未来的な美学に合わせます。

      7. WeightをBlackに設定して、フォントを太くします。

      8. Textを**TAGGED - YOU'RE OUT!**に設定します。

      9. TextColor3を255, 255, 255に設定して、テキストを白にします。

      10. TextScaledを有効にします。

  3. 画面の周囲にフェードを作成します。

    1. OutStateGuiにImageLabelを挿入します。
    2. 新しいラベルを選択し、Propertiesウィンドウで、
      1. AnchorPointを0.5, 0.5に設定して、ラベルの原点をその中央に設定します（ラベルの左から右に50%、上から下に50%）。
      2. BackgroundColor3を0,0,0に設定して、ラベルの背景色を黒に設定します。
      3. BackgroundTransparencyを0.5に設定して、ラベルの背景を半透明にします。
      4. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルをそのコンテナの中央に配置します（親のScreenGuiの左から右に50%、上から下に50%）。
      5. Sizeを{1, 0},{1, 0}に設定して、ラベルを画面全体に広げます（親のScreenGuiの100%の横幅と100%の縦幅）。
      6. ZIndexを-1に設定して、他のUI要素の背後にフェードを表示します。
      7. NameをHeaderに設定します。
      8. Imageをrbxassetid://14309518613に設定して、画像をボーダーフェードにします。
      9. ImageTransparencyを0.1に設定して、フェードをわずかに半透明にします。

  4. サンプルのレーザータグプレースファイル内の次のReplicatedStorageスクリプトを参照して、プレイヤーの健康がゼロに達したときにリスポーン画面をプログラム的に表示し、チームのスポーンゾーンに戻るプロセスにあるときに表示します。

次のReplicatedStorage.PlayerStateHandlerクライアントスクリプトには、playerState属性に応じて異なるタイプの動作をトリガーする関数が含まれています。すべてのイベント応答は、このスクリプト内で論理的にグループ化されており、プレイヤーのコントロール、カメラの動き、およびどのUIレイヤーが表示されるかを有効または無効にするために必要です。

プレイヤーの健康がゼロに達すると、playerStateはTaggedOutになり、onTaggedOut()関数がトリガーされます。onTaggedOut()は、次の動作を即座にトリガーします：

  • プレイヤーはアリーナ内で移動できません。
  • プレイヤーはカメラを動かすことができません。
  • プレイヤーはブラスターを使用できません。
  • StarterGui.OutStateGuiが独占的に有効になります。

プレイヤーがリスポーンすると、playerStateはSelectingBlasterになり、onSelectingBlaster()関数がトリガーされます。onSelectingBlaster()は、StarterGui.PickABlasterGuiを独占的に有効にし、リスポーン画面を自動的に無効にします。これらの条件の詳細については、Gameplay ScriptingカリキュラムのHandle Client Stateを参照してください。

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Players = game:GetService("Players")



local PlayerState = require(ReplicatedStorage.PlayerState)

local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)

local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)

local togglePlayerMovement = require(script.togglePlayerMovement)

local togglePlayerCamera = require(script.togglePlayerCamera)

local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)



local localPlayer = Players.LocalPlayer



local playerGui = localPlayer.PlayerGui

local guiLayers = {

	playerGui:WaitForChild("HUDGui"),

	playerGui:WaitForChild("OutStateGui"),

	playerGui:WaitForChild("PickABlasterGui"),

}



-- 指定された例外を除いてすべてのUIレイヤーを無効にします

local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)

	-- guiLayersには、独占的に設定する必要があるguiのリストが含まれています。

	for _, screenGui in guiLayers do

		screenGui.Enabled = screenGui == enabledGui

	end

end



local function onSelectingBlaster()

	-- ブラスターを選択している間、プレイヤーが周りを見回せるようにカメラを有効にします

	togglePlayerCamera(true)

	togglePlayerMovement(false)

	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)



	-- ブラスターを選択している間はブラスターを無効にします

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)

end



local function onPlaying()

	-- ブラスターを選択した後、プレイヤーの移動を有効にします

	togglePlayerMovement(true)

	setGuiExclusivelyEnabled(playerGui.HUDGui)



	-- プレイ中はブラスターを有効にします

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)



	-- プレイヤーがプレイを開始するときにフォースフィールドの破壊ロジックをスケジュールします

	scheduleDestroyForceField()

end



local function onTaggedOut()

	-- タグ付けされている間はコントロールを無効にします

	togglePlayerMovement(false)

	togglePlayerCamera(false)

	setGuiExclusivelyEnabled(playerGui.OutStateGui)



	-- タグ付けされている間はブラスターを無効にします

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)

end



local function onInLobby()

	-- ロビーにいる間はコントロールを有効にします

	togglePlayerMovement(true)

	togglePlayerCamera(true)



	-- ロビーにいる間はすべてのHUDを非表示にします

	setGuiExclusivelyEnabled(nil)



	-- ロビーにいる間はブラスターを無効にします

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)

end



local function onPlayerStateChanged(newPlayerState: string)

	if newPlayerState == PlayerState.SelectingBlaster then

		onSelectingBlaster()

	elseif newPlayerState == PlayerState.Playing then

		onPlaying()

	elseif newPlayerState == PlayerState.TaggedOut then

		onTaggedOut()

	elseif newPlayerState == PlayerState.InLobby then

		onInLobby()

	else

		warn(`無効なプレイヤー状態 ({newPlayerState})`)

	end

end



-- 初期プレイヤー状態が設定されている場合はそれを処理します

local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)

onPlayerStateChanged(initialPlayerState)



local function updateFromPlayerState()

	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))

end



-- 将来のプレイヤー状態の更新を処理します

localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)



-- リスポーン後も変更が適用されるようにします

localPlayer.CharacterAdded:Connect(updateFromPlayerState)

SurfaceGuiオブジェクトの作成

3D空間内のパートの表面にUIを表示し、各プレイヤー個別のスクリプトロジックに応じて反応させるには、SurfaceGuiオブジェクトを、UIを表示したいパートに親として設定します。この技術により、UIとそのスクリプトロジックがサーバーと各プレイヤーのクライアントの両方で利用可能になります。

SurfaceGuiオブジェクトには、3D空間内のパートの表面に表示されるすべてのGuiObjectsが含まれています。サンプルのレーザータグゲームには、プレイヤーのブラスターの上に表示されるクールダウンメーターの1つのインスタンスのみが含まれています。このオブジェクトは、各プレイヤーの入力に積極的に反応し、再びブラスターを発射できるときの視覚的フィードバックを提供するため、すべてのプレイヤーにスクリプトロジックが必要です。

SurfaceGuiオブジェクトを作成するには：

  1. Explorerウィンドウで、ReplicatedStorageサービスにカーソルを合わせ、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。
  2. コンテキストメニューからPartオブジェクトを挿入します。
  3. パートにScreenGuiオブジェクトを挿入します。
  4. 子のUI要素のコンテキストに応じてSurfaceGuiの名前を変更します。
  5. 3D空間内のパートの表面に表示する必要があるすべてのUI要素について、このプロセスを繰り返します。

クールダウンメーター

クールダウンメーターは、プレイヤーが再びブラスターを発射できるまでの待機時間を知らせるUIコンポーネントです。このわずかな間隔は、プレイヤーがクリックやボタンを押す速度でブラスターを発射できるのを防ぎ、レーザータグのゲームプレイには非現実的です。

サンプルのレーザータグゲーム内でクールダウンメーターを正確に再現するには：

  1. SurfaceGuiオブジェクトを保持するパートを作成します。

    1. Explorerウィンドウで、Workspaceにカーソルを合わせ、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。
    2. コンテキストメニューからblockパートを挿入します。これは、プロセスの各ステップで変更を視覚化するための一時的な場所です。

  2. パートをプレイヤーのキャラクターがブラスターを持つ位置の周りに配置し、Propertiesウィンドウで、

    1. Transparencyを1に設定して、パートを完全に透明にします。

    2. NameをCooldownBarPrefabに設定します。

    3. Sizeを0.169, 0.027, 2.537に設定して、パートをブラスターの長さに近いサイズにスケールします。

    4. CanCollideとCanQueryを無効にします。

  3. CooldownBarPrefabにSurfaceGuiを挿入します。

  4. 新しいSurfaceGuiを選択し、Propertiesウィンドウで、

    1. FaceをTopに設定して、UIが上向きに表示されるようにします。

    2. LightInfluenceとMaxDistanceを0に設定します。

    3. PixelsPerStudを200に設定します。

  5. 黒いバーを作成します。

    1. SurfaceGuiにImageLabelを挿入します。

    2. 新しいラベルを選択し、Propertiesウィンドウで、

      1. デフォルトのImage値を削除します。
      2. AnchorPointを0.5, 0.5に設定して、ラベルの原点をその中央に設定します（ラベルの左から右に50%、上から下に50%）。
      3. BackgroundColor3を0,0,0に設定して、ラベルの背景色を黒に設定します。
      4. BackgroundTransparencyを0.4に設定して、ラベルの背景を半透明にします。
      5. Positionを{0.5, 0},{0.5, 0}に設定して、ラベルをそのコンテナの中央に配置します（親のSurfaceGuiの左から右に50%、上から下に50%）。
      6. Sizeを{1, 0},{1, 0}に設定して、ラベルをパート全体に広げます（親のSurfaceGuiの100%の横幅と100%の縦幅）。
      7. NameをContainerに設定します。

  6. コンテナの角を丸めます。

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

    2. UICornerを選択し、PropertiesウィンドウでCornerRadiusを0.15, 0に設定して、角をわずかに丸めます。

  7. 赤いバーを作成します。

    1. ContainerにImageLabelを挿入します。
    2. 新しいラベルを選択し、Propertiesウィンドウで、
      1. デフォルトのImage値を削除します。
      2. AnchorPointを1, 0.5に設定して、ラベルの原点をその右中央に設定します（ラベルの左から右に100%、上から下に50%）。
      3. BackgroundColor3を172, 13, 13に設定して、ラベルの背景色を暗い赤に設定します。
      4. BackgroundTransparencyを0.2に設定して、ラベルの背景をわずかに透明にします。
      5. NameをBarに設定します。
      6. Positionを{1, 0},{0.5, 0}に設定して、ラベルをその親ラベルの右中央に配置します（親ラベルの左から右に100%、上から下に50%）。
      7. Sizeを{0, 0},{1, 0}に設定して、ラベルをその親ラベルの上部に長くします（親ラベルの横幅の0%と縦幅の100%）。このステップは、ステップ8のスクリプトで発生するツイーン動作にも有益です。

  8. ラベルの角を丸めます。

    1. BarにUICornerオブジェクトを挿入します。
    2. UICornerを選択し、PropertiesウィンドウでCornerRadiusを0.15, 0に設定して、角をわずかに丸めます。

  9. CooldownBarPrefabをReplicatedStorageに移動します。

    1. UIオブジェクトを整理するためのフォルダ構造を作成します。サンプルでは、Instancesフォルダに子のGuisフォルダを使用しています。

    2. CooldownBarPrefabをGuisに移動します。

  10. サンプルのレーザータグプレースファイル内の次のReplicatedStorageスクリプトを参照して、プレイヤーのブラスターにクールダウンメーターをプログラム的に接続し、プレイヤーがブラスターを発射した後に赤いバーをアニメーションさせます。

次のReplicatedStorage.FirstPersonBlasterVisualsクライアントスクリプトは、プレイヤーの一人称ブラスターのすべてのビジュアルロジックを処理します。これは、レーザータグのゲームプレイに対してよりリアルに感じるブラスターのビジュアルを設定するために協力するモジュールスクリプトのセットを必要とします。これには、FirstPersonBlasterVisuals.addCooldownBarとFirstPersonBlasterVisuals.runCooldownBarEffectが含まれます。

local Players = game:GetService("Players")

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Workspace = game:GetService("Workspace")

local RunService = game:GetService("RunService")



local BlastData = require(ReplicatedStorage.Blaster.BlastData)

local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)

local PlayerState = require(ReplicatedStorage.PlayerState)

local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)



local runBlastVisuals = require(script.runBlastVisuals)

local setupAnimations = require(script.setupAnimations)

local addCooldownBar = require(script.addCooldownBar)

local runCooldownBarEffect = require(script.runCooldownBarEffect)



local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent



local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)



local localPlayer = Players.LocalPlayer

local currentCamera = Workspace.CurrentCamera



local rigModel = nil

local cooldownBar = nil

local animations = {}



local function addFirstPersonVisuals()

	local blasterConfig = getBlasterConfig()



	-- 一人称リグを追加

	rigModel = blasterConfig.RigModel:Clone()

	rigModel.Parent = Workspace



	-- クールダウンバーを追加

	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)



	animations = setupAnimations(blasterConfig, rigModel)

end



local function removeFirstPersonVisuals()

	for _, animation in animations do

		animation:Stop()

		animation:Destroy()

		animation = nil

	end

	if rigModel then

		-- これはリグに親付けされているため、クールダウンバーも破壊します

		rigModel:Destroy()

		rigModel = nil

	end

end



-- ブラスターが発生したときに一人称ビジュアル効果を実行します

laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)

	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)

	runCooldownBarEffect(cooldownBar)

end)



-- リグをカメラにバインドします（存在する場合）

RunService.RenderStepped:Connect(function()

	if rigModel then

		-- カメラの位置とRIG_OFFSET_FROM_CAMERAに対してリグのCFrameを更新します

		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)

	end

end)



-- プレイ中にブラスタータイプが変更されたときのビジュアルを処理します

localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()

	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)

	if playerState == PlayerState.Playing then

		removeFirstPersonVisuals()

		addFirstPersonVisuals()

	end

end)



-- プレイヤー状態が変更されたときのビジュアルを処理します

localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()

	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)

	-- プレイヤーがブラスターを選択しているか、ロビーにいるときはビジュアルを削除します

	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then

		removeFirstPersonVisuals()

	-- プレイヤーがブラスターの選択を終えたときにビジュアルを追加します。

	elseif newPlayerState == PlayerState.Playing then

		addFirstPersonVisuals()

	end

end)

BillboardGuiオブジェクトの作成

3D空間内にUI要素を表示し、スクリプトロジックに応じて反応し、各プレイヤーのカメラに常に向くようにするには、BillboardGuiオブジェクトをBasePartまたはAttachmentの子として作成します。これにより、プレイヤー名やマップマーカーなどが表示されます。

サンプルのレーザータグゲームには、ReplicatedStorageサービス内に2つの別々のBillboardGuiオブジェクトが含まれています：

  • OtherPlayerIndicatorGuiPrefab - ラウンドでアクティブな各プレイヤーの頭上にピンクまたは緑の円を表示します。
  • TaggedOutIndicatorGuiPrefab - プレイヤーがラウンドからタグ付けされているときに、その頭上に表示されます。

BillboardGuiオブジェクトを作成した後、各コンテナの目的に応じてその子のGuiObjectsを作成およびカスタマイズできます。次のセクションでは、サンプルのレーザータグゲーム内で両方のインジケータータイプのUI要素を実装する方法を学びます。プロセスの任意の部分を調整して、独自のゲームの仕様に合わせることができます。

BillboardGuiオブジェクトを作成するには：

  1. Explorerウィンドウで、BasePartまたはAttachmentにカーソルを合わせ、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。
  2. コンテキストメニューからBillboardGuiオブジェクトを挿入します。
  3. BillboardGuiの名前をその子のUI要素のコンテキストに応じて変更します。
  4. プレイヤーの頭上に文脈的に表示する必要があるすべてのUI要素について、このプロセスを繰り返します。

チームインジケーター

チームインジケーターは、ラウンド内の他のプレイヤーがどのチームに属しているかをプレイヤーに知らせるUI要素で、味方と敵チームのメンバーを簡単に区別できるようにします。この情報は、ファーストパーソンシューティングゲームのゲームプレイにおいて、プレイヤーが戦闘ゾーンにいる間に迅速な戦略的決定を下す必要があるため、重要です。そうしないと、タグ付けされて試合に負けてしまいます。

サンプルのレーザータグゲーム内でチームインジケーターを正確に再現するには：

  1. 一時的なリグにBillboardGuiオブジェクトを挿入します。

    1. ツールバーのHomeまたはAvatarタブからCharacterをクリックします。

    2. 利用可能なオプションから選択します。サンプルでは、R15リグタイプ、女性の体形、Rthroアバターを使用しています。リグは3DビューポートとExplorerウィンドウの両方にRigという名前で表示されます。

    3. Explorerウィンドウで、リグの子のHeadメッシュに移動し、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。

    4. コンテキストメニューからBillboardGuiを挿入します。

  2. 新しいBillboardGuiを選択し、Propertiesウィンドウで、

    1. LightInfluenceを0に設定して、環境光がインジケーターの色に影響を与えないようにします。

    2. NameをOtherPlayerIndicatorPrefabに設定します。

    3. Sizeを{0, 10},{0, 10}に設定して、ラベルをかなり小さくします。

    4. StudsOffsetWorldSpaceを0, 4, 0に設定して、リグの頭の上に配置します。

  3. OtherPlayerIndicatorPrefabにFrameオブジェクトを挿入します。

  4. 新しいフレームを選択し、Propertiesウィンドウで、

    1. AnchorPointを0.5, 0.5に設定して、フレームの原点をその中央に設定します（フレームの左から右に50%、上から下に50%）。

    2. BackgroundColor3を255, 3, 0に設定して、フレームの背景色を赤に設定します（プレースホルダー色）。

    3. Positionを{0.5, 0},{0.5, 0}に設定して、フレームをそのコンテナの中央に配置します（親のBillboardGuiの左から右に50%、上から下に50%）。

    4. Sizeを{1, -2},{1, -2}に設定して、フレームをBillboardGuiの表面積に短くします。

  5. FrameにUICornerオブジェクトを挿入して、角を完全に丸めます。

  6. FrameにUIStrokeオブジェクトを挿入して、インジケーターの円をアウトラインします。

  7. OtherPlayerIndicatorPrefabをReplicatedStorageに移動します。

  8. サンプルのレーザータグ1Aプレースファイル内の次のReplicatedStorageスクリプトを参照して、アクティブなラウンドに参加しているすべてのプレイヤーのためにチームインジケーターをプログラム的に表示します。ただし、敵チームにいる場合や遮蔽されている場合は表示しません。

次のReplicatedStorage.OtherPlayerIndicatorGuiSetupスクリプトは、プレイヤーがアクティブなラウンドにスポーンするときに実行されます。これは、addIndicatorToCharacter()関数を呼び出してチームインジケーターを接続します。この関数は、ラウンドに参加している各プレイヤーキャラクターのHeadオブジェクトを見つけます。すでにチームインジケーターがない場合、スクリプトはotherPlayerIndicatorPrefab UIをクローンしてキャラクターのHeadに追加し、チームインジケーターの色をそのチームの色に設定します。

他のプレイヤーが同じチームにいる場合、チームインジケーターは常に表示されます。オブジェクトが3D空間にある場合、敵チームの他のプレイヤーが遮蔽されている場合のみ、チームインジケーターが表示されます。

local Players = game:GetService("Players")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local localPlayer = Players.LocalPlayer

local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab



local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}

local playerAddedConnection: RBXScriptConnection?



local function removeIndicatorFromPlayer(player: Player)

	if not player.Character then

		return

	end



	local head = player.Character:WaitForChild("Head", 3)

	if not head then

		return

	end



	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)

	if gui then

		gui:Destroy()

	end

end



local function addIndicatorToCharacter(otherCharacter: Model?)

	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)

	if not otherPlayer then

		return

	end



	task.spawn(function()

		local otherHead = otherCharacter:WaitForChild("Head", 3)

		if not otherHead then

			return

		end



		-- ラウンドに参加しているプレイヤーにのみインジケーターを追加します

		if not otherPlayer.Team then

			return

		end



		-- 重複したインジケーターを追加しないようにし、存在しない場合にのみ新しいものを作成します

		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)

		if not gui then

			gui = otherPlayerIndicatorPrefab:Clone()

			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color

			gui.Parent = otherHead

		end



		-- インジケーターは、プレイヤーが味方の場合のみ常に上に表示されます



		local isFriendly = otherPlayer.Team == localPlayer.Team

		gui.AlwaysOnTop = isFriendly

	end)

end



local function addIndicatorWhenCharacterSpawns(player: Player)

	if characterSpawnConnectionsByPlayer[player] then

		return

	end

	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)

	characterSpawnConnectionsByPlayer[player] = connection

end



local function stopSyncingIndicators()

	for _, connection in characterSpawnConnectionsByPlayer do

		connection:Disconnect()

	end

	table.clear(characterSpawnConnectionsByPlayer)



	if playerAddedConnection then

		playerAddedConnection:Disconnect()

		playerAddedConnection = nil

	end



	for _, player in Players:GetPlayers() do

		removeIndicatorFromPlayer(player)

	end

end



local function addIndicatorToPlayer(player: Player)

	if player == localPlayer then

		return

	end



	addIndicatorToCharacter(player.Character)

	addIndicatorWhenCharacterSpawns(player)

end



local function startSyncingIndicators()

	for _, player in Players:GetPlayers() do

		addIndicatorToPlayer(player)

	end



	if not playerAddedConnection then

		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)

	end

end



local function onLocalTeamChanged()

	local localTeam = localPlayer.Team

	if localTeam then

		startSyncingIndicators()

	else

		stopSyncingIndicators()

	end

end



localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)

onLocalTeamChanged()

タグ付けインジケーター

タグ付けインジケーターは、他のプレイヤーがラウンドでアクティブでなくなり、スポーンゾーンに戻るプロセスにあることをプレイヤーに知らせるUI要素です。この情報は、ファーストパーソンシューティングゲームのゲームプレイにおいて、プレイヤーが他のプレイヤーをタグ付けした後、すぐに次のターゲットに移動する必要があるため、重要です。そうしないと、同じ場所で長時間プレイすることでアリーナで脆弱になってしまいます。

サンプルのレーザータグゲーム内でタグ付けインジケーターを正確に再現するには：

  1. 一時的なリグにBillboardGuiオブジェクトを挿入します。プロセスの各ステップで変更を視覚化できるようにします。

    1. ツールバーのHomeまたはAvatarタブからCharacterをクリックします。

    2. 利用可能なオプションから選択します。サンプルでは、R15リグタイプ、男性の体形、Rthroアバターを使用しています。リグは3DビューポートとExplorerウィンドウの両方にRigという名前で表示されます。

    3. Explorerウィンドウで、リグの子のHeadメッシュに移動し、**⊕**アイコンをクリックします。コンテキストメニューが表示されます。

    4. コンテキストメニューからBillboardGuiを挿入します。

      1. 新しい BillboardGui を選択し、Properties ウィンドウで、

    5. LightInfluence を 0 に設定して、環境光がインジケーターの色に影響を与えないようにします。

    6. Name を TaggedOutIndicatorGuiPrefab に設定します。

    7. Size を {3, 0},{0.5, 0} に設定して、ラベルのためのスペースを広げます。

    8. StudsOffset を 0, 3.25, 0 に設定して、プレイヤーの頭上に位置させます。

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

  3. 新しいラベルを選択し、Properties ウィンドウで、

    1. AnchorPoint を 0.5, 0.5 に設定して、ラベルの原点をラベルの中央に設定します（ラベルの左から右まで50%、上から下まで50%）。
    2. BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
    3. Name を Frame に設定します。
    4. Position を {0.5, 0},{0.5, 0} に設定して、ラベルをそのコンテナの中央に配置します（親の BillboardGui の左から右まで50%、上から下まで50%）。
    5. Size を {1, 0},{1, 0} に設定して、ラベルを親の BillboardGui 全体に広げます（親の BillboardGui の水平方向100%、垂直方向100%）。
    6. Image を rbxassetid://14304826985 に設定して、画像を多方向のフェードにします。
    7. ImageColor を 245, 46, 46 に設定して、ラベルを赤く染めます。

  4. Frame に TextLabel オブジェクトを挿入します。

  5. 新しいラベルを選択し、Properties ウィンドウで、

    1. AnchorPoint を 0.5, 0.5 に設定して、ラベルの原点をラベルの中央に設定します（ラベルの左から右まで50%、上から下まで50%）。

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

    3. Name を BodyTextLabel に設定します。

    4. Position を {0.5, 0},{0.5, 0} に設定して、ラベルをそのコンテナの中央に配置します（親のラベルの左から右まで50%、上から下まで50%）。

    5. Size を {0.85, 0},{0.7, 0} に設定して、テキストがフェードエリアのほとんどを占めるようにします（親の画像ラベルの水平方向85%、垂直方向70%）。

    6. FontFace を Montserrat に設定して、未来的な美学に合わせます。

    7. Weight を Bold に設定して、フォントを太くします。

    8. Text を TAGGED に設定します。

    9. TextColor3 を 255, 255, 255 に設定して、テキストを白くします。

    10. TextScaled を有効にします。

  6. TaggedOutIndicatorGuiPrefab を ReplicatedStorage に移動します。

  7. サンプル Laser Tag 1A プレースファイル内の ServerScriptService スクリプトを参照して、プレイヤーがチームのスポーンゾーンにリスポーンしている間にタグ付けされたインジケーターをプログラム的に表示します。

次の ServerScriptService.SetupHumanoid サーバースクリプトは、プレイヤーがゲームをロードするとすぐに実行されます。プレイヤーのキャラクターがデータモデルに追加されるたびに、setupHumanoidAsync がその Humanoid と共に呼び出されることを保証します。

local Players = game:GetService("Players")



local setupHumanoidAsync = require(script.setupHumanoidAsync)



local function onCharacterAdded(player: Player, character: Model)

	local humanoid = character:WaitForChild("Humanoid")

	setupHumanoidAsync(player, humanoid)

end



local function onPlayerAdded(player: Player)

	-- プレイヤーがすでにキャラクターを持っている場合は onCharacterAdded を呼び出す

	if player.Character then

		onCharacterAdded(player, player.Character)

	end

	-- このプレイヤーの将来のキャラクタースポーンのために onCharacterAdded を呼び出す

	player.CharacterAdded:Connect(function(character: Model)

		onCharacterAdded(player, character)

	end)

end



-- ゲームにすでにいるプレイヤーに対して onPlayerAdded を呼び出す

for _, player in Players:GetPlayers() do

	onPlayerAdded(player)

end

-- 将来のすべてのプレイヤーに対して onPlayerAdded を呼び出す

Players.PlayerAdded:Connect(onPlayerAdded)

ユーザーインターフェースデザインカリキュラムの完了おめでとうございます！アートスタイルを作成し、レイアウトをワイヤーフレーム化し、スタジオでデザインを実装する経験を得たので、新しいUIや機能をプロジェクトに拡張するか、サンプルレーザータグゲームの一般的な構成と主要な実装の詳細について学ぶ Gameplay Scripting Curriculum などの追加のチュートリアルカリキュラムに従ってください。楽しい制作を！

前へ
©2026 Roblox Corporation。Roblox（ロブロックス）、RobloxロゴおよびPowering Imaginationは、米国並びにその他の国における登録商標および非登録商標です。
規約·プライバシー·アクセシビリティ·サポート
日本語