デザインを実装することは、スクリプトで UI コンテキストをトリガーするための組み込みUIエレメントと Studio のワイヤーフレームを作成するプロセスです。このチュートリアルのワークフローでは、ワイヤーフレームを作成するプロセス、デザインを実装するプロセス、 1> デザインを完
ユーザーインターフェイスデザイン教科書の サンプルレーザータグエクスペリエンス を参照して、このユーザーインターフェイスデザイン教科書のセクション .rbxl を参照して、UI プランを実行する方法を示しています。これには、次のガイドが含まれます：
- UI アセットライブラリからアセット ID を取得し、サンプルレーザータグエクスペリエンスの UI コンポーネントを再構築できます。
- Studio で様々なデバイスをエミュレートして、UI が異なる画面とアスペクト比率でどのように表示されるかを見るために。
- Class.ScreenGui 、SurfaceGui 、および BillboardGui オブジェクトを作成して、プレイヤーの画面、表面、および 3D 空間内の UI を表示します。
このセクションで説明したテクニックを自分のプロジェクトに適用して、プレイヤーがエクスペリエンス内で何をすることができるかを助けるエキサイティングな UI コンポーネントを作成できます。
このチュートリアルのセクションの説明は、UI デザインアセットライブラリを使用して UI コンポーネントを正確に再現する方法を示しています。このプロセスは開始から終了まで約 90 分かかります。提供される値を使用しない場合は、各 UI 要素をカスタマイズして、特定のエクスペリエンスの仕様に従わせ
アセットライブラリを取得
アセットライブラリは、インベントリに追加して簡単にアクセスでき、再利用できるアセットのコレクションです。クリエイターストアからのプロジェクトのアセットライブラリには、9つの 2D 個々の UI 要素アセット、目標のブラスターセレクター、およびプレイヤー情報コンポーネントを含む、あなたが作成してい
ライブラリのほとんどを Studio のインベントリに追加するには、次のコンポーネントの インベントリに追加 リンクをクリックします。アセットがインベントリ持ち物リスト入ると、プラットフォームの任意のプロジェクトで再使用できます。
インベントリからアセットライブラリをエクスペリエンスに取得するには：
In the menu bar, メニューバーで ビュー タブを選択します。
In the ショー セクション, click ツールボックス . The ツールボックス ウィンドウが表示されます。
ツールボックス ウィンドウで、インベントリタブをクリックします。マイモデル ソートが表示されます。
ドロップダウンメニューをクリックし、 パッケージ ソートを選択します。
クリックして、最終画面 UI コンポーネント タイル、エクスプローラ ウィンドウで、完了したコンポーネント を選択し、2>スターターGUI2> サービスにドラッグします。現在、デザインを参照するために任意のコンポーネントを有効にすることができます。
エミュレートデバイス
Studio の デバイスエミュレータ は、プレイヤーがあなたの UI をどのように見てインタラクトするかをさまざまなデバイスでテストすることができます。このツールは実装プロセスの重要な部分であり、Studio のビューポートのアセプト比率は、プレイヤーがアクセスするあなたのエクスペリエンス
たとえば、大きな画面サイズのテストを行わないと、大きな画面のプレイヤーはテキストを読み取ることができないかもしれません、および小さな画面のプレイヤーは、UI 要素がディスプレイに取りすぎるため、3D 空間を見ることができません。
画面を最小サイズに拡大/縮小するには：
In the menu bar, メニューバーで テスト タブを選択します。
In the エミュレーション section, click デバイス . The viewport changes to reflect the aspect ratio of an average laptop.
リゾリューションドロップダウンで 現在の解像度 を選択します。これにより、エミュレートされているデバイスの UI 要素の真の解像度を見ることができます。
デバイスドロップダウンで、プレイヤーがあなたのエクスペリエンスにアクセスできる唯一のデバイスを持つデバイスを選択します。エクスペリエンスがサポートするデバイスの種類にかかわらず、サンプルレーザータグエクスペリエンスは、iPhone 4Sを含むすべてのデバイスで UI のサイズ制限をテストして、限られた画面スペースで UI がどのように見えるかを確認します。
ScreenGUI オブジェクトを作成
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
ゲームプレイ中にユーザーグループを整理し、表示するために複数の ScreenGui オブジェクトを作成できます。たとえば、サンプルレーザータグエクスペリエンスには、メインの ScreenGui のユーザーフローの 5つの異なる Class.ScreenGui オブジェクトが含まれています：
- HUDGui - プレイヤーがラウンド中にゲームプレイに関するキー情報を表示します。例えば、目標とチームの合計ポイントです。
- PickABlasterGui - プレイヤーがラウンドに参加するときにすべてのブラスターの選択を表示します。
- ForceFieldGui - プレイヤーがブラスターを選択しているときと、一時的に無敵であるときに六角形のグリッドを表示します。
- OutStateGui - プレイヤーがタグアウトしたときに画面の周りに暗い境界を表示します。
- RoundResultsGui - スクリーンのトップにある闇のオーバーレイを表示し、チームがラウンドに勝利したかどうかに関する情報を表示します。
Class.ScreenGui オブジェクトを作成した後、子 GuiObjects を各コンテナの目的に応じて作成およびカスタマイズできます。 サンプルレーザータグエクスペリエンスの成功には、ユーザーが知る
Class.ScreenGui オブジェクトを作成するには：
In the エクスプローラー window, hover over the StarterGui service, then click the ⊕ icon. A コンテキストメニューが表示されます。
Insert a ScreenGui 。
子ユーザー UI 要素のコンテキストに応じて ScreenGUI を名前変更します。
必要なユーザーエレメントのグループごとに、このプロセスを繰り返して、各プレイヤーの画面に表示する必要があります。
目標 UI
ワイヤーフレームのレイアウト のビジュアルハイエラーベストプラクティスに従って、このセクションでは、エクスペリエンスの目的に関連するすべての画面 UI 要素を実装する方法を教えています。このグループ化の UI 要素は、目標とチームのポイントのほとんどがゲームの勝利に関する方法で最も重要な場所です。
たとえば、サンプルには、プレイヤーがラウンドで成功するために何をする必要があるかを知る目的の UI コンポーネントが提供されています。プレイヤーが敵チームメンバーをタグアウトし、ポイントを獲得すると、このコンポーネントはヘッダーのプロンプト内の各チームのスコア
サンプル Laser Tag エクスペリエンス内の目標 UI を正確に再現するには：
コンポーネント全体のコンテナを作成します。
フレーム を HUDGui オブジェクトに挿入します。
- In the エクスプローラー window, navigate to the StarterGui service.
- 子オブジェクトの HUDGui オブジェクトの上にマウスポインタを置き、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
- コンテキストメニューから フレーム を挿入します。
新しい フレーム を選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0 に設定して、フレームのオリジンポイントを上部の中央に設定します (フレームの左から右に 50% 、フレームの上部からの 0%)。
- 背景透明度 を 1 に設定して、フレームの背景を完全に透明にします。
- 位置 を設定します を {0.5, 0},{0.03, 0} に設定して、画面の上部の中央にフレームを設置します (50% から左側から右側の画面、3% から上部の画面から) を設定します。
- フレームの要素がプレイヤーの注目を引くように、サイズ を {0.5, 0},{0.13, 0} に設定します。50% 横における、13% 縦における。
- 名前 を 目標 に設定します。
(オプション) UIAspectRatioConstraint を オブジェクティブ に挿入して、ラベルのアスペクト比率を変更なしに保持するために。サンプルは 0> Class.UIAspectRatioConstraint.AspectRatio0> プロパティを 3> 7 3> に設定します。
目標のプロンプトオブジェクトのコンテナを作成します。
フレーム を 目標 に挿入します。
新しい フレーム を選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0 に設定して、フレームのオリジンポイントを上部の中央に設定します (フレームの左から右に 50% 、フレームの上部からの 0%)。
- 背景透明度 を 1 に設定して、フレームの背景を完全に透明にします。
- ポジション を{0.5, 0},{0, 0} に設定して、コンテナの中央にフレームを設定します（親フレームの左から右に50%、親フレームの上から下に0%）。
- サイズ をコンテナのトップから最上部までの 1, 0,0.67, 0 に設定して、選択 UI コンポーネントがコンテナの上部から下部にわたっての長方形のコンテナの大部分を占有するようにします (100% 横長および 67% 縦長の親フレーム)。
- 名前 を 目標ディスプレイ に設定します。
タイトルエレメントを作成します。
ImageLabel を ObjectiveDisplay に挿入する。
Select the 画像ラベル , then in the プロパティ window,
- アンカーポイント を 0.5, 1 に設定して、ラベルのオリジンポイントを自分の下半中央に設定します (ラベルの左から右へ 50%、レーベルの上から下へ 100%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- レイアウトオーダー を -1 に設定します。
- ポジション を{0.5, 0},{0.34, 0} に設定して、フレームのトップ上部の中央にラベルを設定します (50% から左に、34% から右にかけて親フレーム、5% から上に)。
- サイズ を{0.46, 0},{0.34, 0} に設定して、プロンプトエリアをフレームのほぼ半分に拡大します。(46% 横において、34% 縦において、親フレームのフレームに対して)。
- ヘッダーに 名前 を設定します。
- 画像 を rbxassetid://14304828123 に設定して、トラペツを表示します。
- 透明効果 を0.15 に設定してヘッダーを半透明にします。
(オプション) 画像ラベルに UIAspectRatioConstraint を挿入して、レーベルのアスペクト比率をプレイヤーの画面サイズに関わらず保証します。サンプルは Class.UIAspectRatioConstraint.AspectRatio を0> 13.7810>に設定します。
ヘッダーに TextLabel を挿入してタイトルを表示します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、新しいラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に移動する (親ラベルの左から右へ 50%、親ラベルの上から下に 50%)。
- サイズ を{0.62, 0},{0.55, 0} に設定して、テキストスペースを親ラベルの半分以上に拡大します。%横における 62% と 55%縦における 55% の両方を含みます）。
- Set Name to ヘッダーテキストラベル 。
- フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
- 重量 を 中くらい に設定して、フォントを太くします。
- Set テキスト を 目標 に設定します。
- 有効化 TextScaled 。
プロンプトエレメントを作成します。
ImageLabel を ObjectiveDisplay に挿入する。
Select the 画像ラベル , then in the プロパティ window,
- アンカーポイント を 0.5, 1 に設定して、ラベルのオリジンポイントを自分の下半中央に設定します (ラベルの左から右へ 50%、レーベルの上から下へ 100%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を {0.5, 0},{1, 0} に設定して、ラベルを親フレームの下部中央に移動する (50% から左にかけて、親フレームの右にかけて)。
- サイズ を{0.89, 0},{0.66, 0} に設定して、テキストスペースを親フレームの幅のほぼ半分に拡大します。(89% 横において 66% 縦において)
- Set 名前 to ボディ 。
- 画像 を rbxassetid://14304827265 に設定して、上下逆さの三角形を表示します。
- イメージカラー3 を 0, 0, 0 に設定して、画像を黒に色付けします。
- 透明効果を設定0.3 を 0.3 に設定してヘッダーを半透明にします。
(オプション) 画像ラベルに UIAspectRatioConstraint を挿入して、レーベルのアスペクト比率を保持し、プレイヤーの画面サイズに関わらずラベルのアスペクト比率が同じであることを確認します。サンプルは Class.UIAspectRatioConstraint.AspectRatio プロパ
テキストラベルを ボディ に挿入して、プロンプトを表示する。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、新しいラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に移動する (親ラベルの左から右へ 50%、親ラベルの上から下に 50%)。
- サイズ を{0.85, 0},{0.39, 0}に設定して、テキストスペースを親ラベルの半分以上に拡大します。
- Set Name を BodyTextLabel に設定します。
- フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
- 重量 を 中くらい に設定して、フォントを太くします。
- TextColor3 を 255, 255, 255 に設定して、テキストを暗い背景に対して白にする。
- Set テキストを タグしてスコアを入れる！最初のチームが%dポイントを獲得します。。
- 有効化 TextScaled 。
目標チームのカウンターのコンテナを作成します。
フレーム を 目標 に挿入します。
新しい フレーム を選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 1 に設定して、ラベルのオリジンポイントをフレームの底部中央に設定します (フレームの左から右に 50% 、フレームの上部から下に 100%)。
- 背景透明度 を 1 に設定して、フレームの背景を完全に透明にします。
- ポジション を {0.5, 0},{1, 0} に設定して、コンテナの下部中央にフレームを設定します（親フレームの左から右に 50% 、親フレームの上部から親フレームの下部に 100%）。
- サイズを0.44, 0,0.27, 0 に設定して、選択 UI コンポーネントがコンテナの左から右にわずかにオフセットされるようにします。これにより、選択 UI コンポーネントの親フレームからのコンテナの左から右のオフセットが約 44% です。
- Set 名前 to チームポイントカウンター 。
チームカウンターのパッドを作成します。
- ステップ 5 からフレームに UIListLayout オブジェクトを挿入します。
- Select the UIListLayout object, then in the プロパティ window,
- パッド を設定して 未来のチームカウンターの間のスペースを提供します。
- FillDirection を 横長 に設定して、各チームカウンターが互いに隣に表示されるようにします。
- Set HorizontalAlignment to Center so each team counterが互いの中央に沿うように設定します。
グリーンチームのカウンターエレメントを作成します。
画像ラベルを チームポイントカウンター に挿入します。
Select the 画像ラベル , then in the プロパティ window,
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を {0.5, 0},{1, 0} に設定して、ラベルを親フレームの下部中央に移動する (50% から左にかけて、親フレームの右にかけて)。
- サイズ を{0.5, 0},{1, 0} に設定して、ラベルを親フレームの幅の半分に拡大します(50%横におよび100%縦において親フレームの頂点)。
- Set 名前 to チームカウンター 。
- 画像 を rbxassetid://14304826831 に設定して、向きを表示するためのフェイドを表示します。
- イメージカラー3 を 88, 218, 171 に設定して、イメージをミントグリーンに色付けします。
カスタムアトリビュートを構成して、このラベルがグリーンチームのためであることを追跡します。
- In the プロパティ ウィンドウ, 属性 セクションに移動し, then click the plus icon. A pop-up ダイアログが表示されます。
- In the 名前 フィールドに、 チームカラー を入力します。
- In the タイプ ドロップダウンメニュー, select レンガの色 .
- クリックしてください 保存 ボタン。
- 新しい チームカラー 属性を ミント に設定します。
チームカウンターに TextLabel を挿入して、プロンプトを表示する。
新しいラベルを選択し、 プロパティ ウィンドウで、
- 1, 0.5 を 1, 0.5 に設定して、新しいラベルのオリジンポイントを正中央に設定します (ラベルの左から右に 100% 、ラベルの上から下に 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を{0.95, 0},{0.5, 0} に設定して、ラベルを親ラベルの右に移動する (親ラベルの左から 95% の左に、上から 50% の下に)。
- サイズ を{0.85, 0},{0.39, 0}に設定して、テキストスペースを親ラベルの半分以上に拡大します。
- フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
- 重量 を ボルト に設定して、フォントを太くします。
- TextColor3 を 255, 255, 255 に設定して、テキストを暗い背景に対して白にする。
- Set テキスト を - に設定します。
- 有効化 TextScaled 。
- Set TextXAlignment to Right 。
Insert a UIStroke オブジェクト into the TextLabel , then in the Properties window, set 1> Color1> to 4> 8, 78, 524> to outline the dash with a dark green stroke.
ピンクチームのカウンターエレメントを作成します。
Duplicate チームAICounter and its children.
Select the duplicate チームカウンター , then in the プロパティ window,
- Set 名前 to チームBCCounter 。
- 画像 を rbxassetid://14305849451 に設定して、向きを反対方向にフェイドするためのディレクションフェードを表示します。
- イメージカラー3 を 255, 170, 255 に設定して、画像カラーピンクを輝かせます。
- チームカラーの属性を カーネーションピンク に設定します。
Select the duplicate TextLabel child of TeamBCounter , then in the プロパティ window,
- アンカーポイント を 0, 0.5 に設定して、新しいラベルの起点を左中央に設定します (ラベルの左から右への 0% とラベルの上からの 50% の両方)。
- ポジション を{0.05, 0},{0.5, 0} に設定して、ラベルを親ラベルの左に移動する (親ラベルの左から 5% の距離で、上から 50% の距離で)。
- Set TextXAlignment to Left .
Select the duplicate UIStroke child of TeamBCounter , then in the プロパティ window, set 1>色1> to 4> 158, 18, 944> to outline the dash with a dark pink stroke.
参照する ReplicatedStorage スクリプトは、サンプルの Laser Tag 場所ファイルで、プログラムで目標の提示を更新し、チームポイントを追跡します。
次のスクリプトには、setObjective という名前のモジュールスクリプトのセットが必要です。これには、startSyncingTeamPoints が含まれます。このスクリプトは、プレイヤーがラウンドに参加し、デバイスラスターを選択すると、この HUD UI 要素が適切に表示されるようにします。
さあ、プレイヤーがブラスターを選択した後、目標 UI は画面の上部に表示され、各チームのポイントを追跡します。
Blaster UI
ワイヤーフレームのレイアウト のビジュアルハイエラルーツのベストプラクティスに従って、このセクションでは、プレイヤーのブラスターに関連するすべての画面 UI 要素を実装する方法を教えています。このグループ化された UI 要素は、画面の中央にあるため、ワイヤ
クロスヘア
クロスヘアは、プレイヤーが武器を爆破するときに影響を与える場所を伝える UI エレメントです。この UI エレメントは、第一人称射撃体験のための重要なゲームプレイ要件で、プレイヤーはブラスターを正確に照準し、敵チームメンバーをタグアウトする必要があります。
最初の人称シューターゲームのほとんどのエクスペリエンスと同様に、サンプルレーザータグエクスペリエンスは、プレイヤーのアバターが 3D 空間を通過するたびに、中央にスクリーンを置くことでクロスヘアを中心に配置します。モーション sickness を減少することに加えて、この配置はクロスヘアを環境に溶け込
サンプル レーザータグ エクスペリエンス内のクロスハートを正確に再現するには：
ImageLabel を HUDGui オブジェクトに挿入する。
In the エクスプローラー window, navigate to the StarterGui service.
子オブジェクトの HUDGui オブジェクトの上にマウスポインタを置き、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
コンテキストメニューから 画像ラベル を挿入します。
新しい 画像ラベル を選択し、 プロパティ ウィンドウで、
- Set 画像 to rbxassetid://14400935446 。
- アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントをラベルの中央に設定します (ラベルの左から右に 50% 、ラベルの上から下に 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- 名前 を クロスハート に設定します。
- 位置 を{0.5,0},{0.5,0} に設定して、画面の中央にラベルを設定します。
- スケールタイプ を フィット に設定して、画像がコンテナ内にフィットし、さまざまな画面サイズでストレットされないようにします。
(オプション) サンプルを Crosshair に挿入して、ラベルのアスペクト比率をプレイヤーの画面サイズにかかわらず保持して、ラベルのアスペクト比率が変わらないようにします。サンプルは Class.UIAspectRatioConstraint.AspectRatio を 0> 0
ヒットマーカー
ヒットマーカーは、他のプレイヤーと敵チームの間で爆発がインパクトを与えるときにのみ表示される UI エレメントです。像のように、この UI エレメントは、ファーストパーソンシューターエクスペリエンスでタグアウトの成功に対するビジュアルフィードバックを提供するため、重要なゲームプレイ要件です。
サンプル レーザータグ エクスペリエンス内のヒットマーカーを正確に再現するには：
画像ラベル を クロスハール オブジェクトに挿入します。
In the エクスプローラー window, navigate to the StarterGui service.
子オブジェクトの クロスハー シャー オブジェクトにカーソルを置き、 ⊕ アイコンをクリックします。コンテキストメニューが表示されます。
コンテキストメニューから 画像ラベル を挿入します。
新しい 画像ラベル を選択し、 プロパティ ウィンドウで、
- 画像 を rbxassetid://14401148736 に設定して、長方形のヒットマーカーアイコンを表示します。
- アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントをラベルの中央に設定します。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- 位置 を{0.5,0},{0.5,0} に設定して、画面の中央にラベルを設定します。
- Set 名前 to ヒットマーカー 。
- サイズ を{0.6, 0},{0.06, 0} に設定して、クロスハートの中央の四角形のサイズを減少します。
- 透明な画像 を1 に設定して、ヒットマーカーを完全に透明にします。次のステップのスクリプトは、プレイヤーの爆発が敵チームのプレイヤーに影響するたびに 透明 に戻ります。
参照する ReplicatedStorage スクリプト内のサンプル Laser Tag 位置ファイル、プログラムでヒットマーカーを表示するときに爆発チームのプレイヤーに影響を与える。
次のスクリプトには、メインのヘッズアップディスプレイ (HUD) を設定するために、モジュールスクリプトのセットが必要합니다。これには、setupHitmarker などが含まれます。このスクリプトは、プレイヤーがラウンドに参加し、ブラスターを選択した後、このHUD UI要素がプレイヤーの状況態、デバイス、チームステータスに�
さあ、プレイヤーがブラスターを爆破し、他のプレイヤーのブラストが影響を与えると、ヒットマーカーは一時的に表示されます。
ブラスターセレクター
ブラスターセレクターは、ラウンドに参加する前にまたは参加しなおす前にプレイヤーが選択するブラスタータイプを選択する UI コンポーネントです。サンプルレーザータグエクスペリエンスは、ワイド、横長のスプレッドを持つ複数のビームを生成する 1つのビームを生成するブラスタータイプを選択します。プ
次のステップでは、さまざまな UI 要素グループに複数のコンテナを作成する方法、プロンプト、ナビゲーション、および選択ボタン、およびブラスターボタンプリファブを説明しています。スクリプトロジックは、各ブラスタータイプを表す Configuration によって、ビジュアル入力性をブラスター
この設定により、ブラスター型の追加の Configuration インスタンスを作成できますが、StarterGui.PickABlasterGui 内のボタンを個別に作成する必要はありません。
サンプル レーザータグ エクスペリエンス内のブラスターセレクターを正確に再現するには：
コンポーネント全体のコンテナを作成します。
フレーム を PickABlaster オブジェクトに挿入します。
- In the エクスプローラー window, navigate to the StarterGui service.
- 子オブジェクトの PickABlaster オブジェクトの上にマウスポイントし、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
- コンテキストメニューから フレーム を挿入します。
新しいフレームを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 1 に設定して、フレームのオリジンポイントをフレームの底部中央に設定します (50% から 90% の左から右への移動、 100% から 90% のフレームの底部への移動)。
- 背景透明度 を 1 に設定して、フレームの背景を完全に透明にします。
- 位置 を{0.5, 0},{0.9, 0} に設定して、画面の下部中央にフレームを設定します (画面の左から右に50%、画面の上から下に92.4%)。
- サイズ をブラスターセレクターの UI コンポーネントの大部分を占有するために 0.8, 0,0.25, 0 に設定し、プレイヤーの注目を引くためにブラスターセレクターの UI コンポーネントが大部分の画面を占有するようにします(80%横向き、25%縦向き)。
- コンポーネントに Name を設定します。
(オプション) コンポーネントに UIAspectRatioConstraint を挿入して、フレームとその子の UI エレメントのアスペクト比率を同じに保持して、プレイヤーの画面サイズにかかわらずフレームとその子の UI エレメントのアスペクト比率が同じであることを確認します
UI 要素グループを保持するコンテナを作成します。
フレームを コンポーネントに挿入する 。
新しいフレームを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、フレームのオリジンポイントを中央に設定します (50% から左から右へ、50% から上から下へ)。
- 背景透明度 を 1 に設定して、フレームの背景を完全に透明にします。
- ポジション を{0.5, 0},{0.375, 0} に設定して、コンテナのトップ中央にフレームを設定します (50% から左から親フレーム、37.5% から上から親フレーム)。
- サイズを 1, 0,0.75, 0 に設定して、選択 UI コンポーネントがコンテナの 3/4 を占有するようにします。(親フレームの 100% 横におよび 75% 縦に沿って)。
- Set Name to SelectionFrame 。
ブラスターセレクターのプロンプトを作成します。
画像ラベルを挿入する 画像ラベルを挿入する 選択フレームに。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 1 に設定して、ラベルのオリジンポイントを自分の下半中央に設定します (ラベルの左から右へ 50%、レーベルの上から下へ 100%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- レイアウトオーダー を -1 に設定します。
- ポジション を{0.5, 0},{0.22, 0} に設定して、フレームのトップ上部の中央にラベルを設定します (50% から左に、22% から右にかけて親フレーム、50% から上に)。
- サイズ を{0.45, 0},{0.22, 0} に設定して、プロンプトエリアをフレームのほぼ半分に拡大します（45% 横における 22% 縦における）。
- Set Name を ヘッダー に設定します。
- 画像 を rbxassetid://14304828123 に設定して、トラペツを表示します。
- 透明効果 を0.15 に設定してヘッダーを半透明にします。
(オプション) ラベルに UIAspectRatioLimit を挿入して、プレイヤーの画面サイズにかかわらずレーベルのアスペクト比率が同じように保持されることを確認します。サンプルは UIAspectRatioConstraint.AspectRatio プロパティを 0>13.780> に設定します。
ヘッダーに TextLabel を挿入して、プロンプトを表示します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、新しいラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に移動する (親ラベルの左から右へ 50%、親ラベルの上から下に 50%)。
- サイズ を{0.6, 0},{0.55, 0}に設定して、テキストスペースを親ラベルの半分以上に拡大します。
- Set Name to ヘッダーテキストラベル 。
- フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
- 重量 を 中くらい に設定して、フォントを太くします。
- Set テキスト を ブラスターを選択 に設定します。
- 有効化 TextScaled 。
ブラスターボタンコンテナと選択矢印のコンテナを作成します。
画像ラベルを挿入する 画像ラベルを挿入する 選択フレームに。
新しいラベルを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- アンカーポイント を 0.5, 1 に設定して、ラベルのオリジンポイントを自分の下半中央に設定します (ラベルの左から右へ 50%、レーベルの上から下へ 100%)。
- 背景色 を 0, 0, 0 に設定してラベルを黒にする。
- 背景透明度 を 0.3 に設定して、ラベルの不明瞭度を 30% 減少させ、エクスペリエンス内のすべてのブラック UI 要素にマッチします。
- ポジション を {0.5, 0},{1, 0} に設定して、ラベルをフレームの下部中央に設定します (親フレームの左から右に 50% 、親フレームの上部から 100%)。
- サイズ を{1, 0},{0.77, 0} に設定して、ラベルエリアを親フレームの下のスペースに拡大します(100%横長と77%縦長)。
コンテナの隅をラウンドします。
- ラベルに UICorner オブジェクトを挿入します。
- 新しいコーナーオブジェクトを選択し、 プロパティ ウィンドウで、 コーナーラウンド を 0.075, 0 に設定して、コーナーをラウンドします。
ブラスターボタンのコンテナを作成します。
ステップ 4 からラベルに フレーム を挿入します。
新しいフレームを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、新しいフレームのオリジンポイントを中央に設定します (フレームの左から右に 50% 、フレームの上部から下部に 50%)。
- 背景透明度 を 1 に設定して、フレームの背景を完全に透明にします。
- ポジション を {0.5, 0},{0.5, 0} に設定して、フレームを親ラベルの中央に設定します (親ラベルの左から右への 50%、親ラベルの上から下に 50%)。
- サイズ を{0.85, 0},{0.77, 0}に設定して、フレームエリアをラベルのほとんどのサイズに拡大する (85% 横におよび 77% 縦に)。
- コンテナ 名前を設定します。
すべての将来のブラスターボタンのパッドを作成します。
- ステップ 5 からフレームに UIListLayout オブジェクトを挿入します。
- 新しいレイアウトオブジェクトを選択し、 プロパティ ウィンドウで、
- パッド を設定して 未来のボタンの間のスペースを提供します。
- FillDirection を 横長 に設定して、それぞれのボタンが隣接して表示されるようにします。
- Set both HorizontalAlignment and VerticalAlignment to Center so each button algos to the middle of one another.
左のナビゲーションボタンを作成します。
ステップ 4 から 画像ラベル に 画像ボタン オブジェクトを挿入します。
新しいボタンを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- アンカーポイント を 0, 0.5 に設定して、新しいボタンの起源ポイントを左中央に設定します (ボタンの左側から右側に 0%、ボタンの上部から下部に 50%)。
- BackgroundTransparency を 0.15 に設定して、ボタンが選択可能であることに関する視覚的なフィードバックを提供します。
- ポジション を{0.02, 0},{0.5, 0} に設定して、ボタンの親コンテナからのボタンの左側にパッドを提供します (2% から左側にかけて、親ラベルから上部にかけての親コンテナ)。
- サイズ を{0.04, 0},{0.33, 0}に設定して、選択ボタンをブラスターボタンのサイズよりも小さくする(4%横におよび33%縦における親フレームの子)。
- Set 名前 to ナビゲーションボタン左 .
ボタンの隅を丸くします。
- ボタンに UICorner オブジェクトを挿入します。
- 新しいコーナーオブジェクトを選択し、 プロパティ ウィンドウで、 コーナーラウンド を 0.1, 0 に設定して、コーナーをラウンドします。
ボタンに 画像ラベル オブジェクトを挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、新しいラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50%)。
- ポジション を{0.45, 0},{0.5, 0} に設定して、ラベルを親ボタンの中央に設定します (45% から左から親ボタン、50% から上から親ボタン)。この
- サイズ を{0.8, 0},{0.8, 0} に設定して、ラベルエリアをパラパラに空間を増やします (80% 横におよび 80% 縦において親フレームの下のスペース)。
- BackgroundTransparency を 1 に設定して、画像の背景を完全に透明にします。
- Set 画像 to rbxassetid://14309187238 。
- スケールタイプ を フィット に設定します。
正しいナビゲーションボタンを作成します。
Duplicate ナビゲーションボタン左 。
複製ボタンを選択し、 プロパティ ウィンドウで、
- 1, 0.5 を 1, 0.5 に設定して、新しいボタンのオリジンポイントを右中央に設定します (ボタンの左から右への 100% 、ボトムから上の 50%)。
- 位置 を設定して 親コンテナ (98% から左右の親ラベルから、および親コンテナのトップから 50% まで) のボタンの右側にパッドを提供するために設定しました。
- Set 名前 to ナビゲーションボタン右 .
Select its イメージラベル child object.
- Rotation を 180 に設定して、画像をフリップします。
- ポジション を{0.55, 0},{0.5, 0} に設定して、ラベルを親ボタンの中央に設定します (55% から左から親ボタンの左側、50% から上から親ボタ
クリエートする SELECT ボタン。
画像ボタンを コンポーネント に挿入します。このプロセスは、選択フレームから選択ボタンを分離して、コンポーネントのメイン部分から選択ボタンの間にパッドを追加できるようにします。
新しいボタンを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- アンカーポイント を 0.5, 1 に設定して、新しいボタンのオリジンポイントを下中央に設定します (ボタンの左から右に 50% 、ボタンの上から下に 100%)。
- BackgroundTransparency を 0.15 に設定して、ボタンが選択可能であることに関する視覚的なフィードバックを提供します。
- Set Position to {0.5, 0},{0.99, 0} to set the button near the bottom middle of its container (50% from the left to the right of the parent frame, and 99% from the top to the bottom of the parent frame).
- Size サイズ を {0.17, 0},{0.18, 0} に設定して、ブラスターボタンの下のボタンの長さを拡張します (17% 横におけると 18% 縦における)。
- Set Name を SelectButton に設定します。
ボタンの隅を丸くします。
- ボタンに UICorner オブジェクトを挿入します。
- 新しいコーナーオブジェクトを選択し、 プロパティ ウィンドウで、 コーナーラウンド を 0.2, 0 に設定して、コーナーをラウンドします。
ボタンに TextLabel オブジェクトを挿入して、アクションを表示できるようにします。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、新しいラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルをボタンの中央に移動する (親ボタンの左から右に 50% 、親ボタンの上部から下に 50%)。
- サイズ を{0.9, 0},{0.55, 0} に設定して、テキストスペースを親ラベルの幅のほぼ全体に拡大します。% 横における 90% と 55% 縦における 55% を含む）。
- Set Name to SelectTextLabel に。
- フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
- 重量 を 中くらい に設定して、フォントを太くします。
- Set テキスト を 選択 に設定します。
- 有効化 TextScaled 。
ブラスターボタンのプリファブを作成します。
- In the ReplicatedStorage サービスで、UI オブジェクトを整理するためのフォルダ構造を作成します。サンプルは、子 Guis フォルダを含む、子 インスタンス フォルダを使用しています。
- 画像ボタンを Guis フォルダに挿入します。
- 新しいボタンを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- アンカーポイント を 0.5, 0.5 に設定して、新しいボタンのオリジンポイントを中央に設定します (ボタンの左から右への 50% とボタンの上から下の 50%)。
- 背景透明度 を 0.65 に設定して、ボタンがフォーカスされていない視覚的フィードバックを提供します。ステップ 12 のスクリプトは、ボタンがフォーカスされているときにプログラマチックな視覚フィードバックを提供します。
- レイアウトオーダー を 2 に設定します。
- Set Name to BlasterButtonPrefab に設定します。
- サイズ を{0.8, 0},{0.8, 0} に設定します。
- 透明な画像 を 1 に設定して、画像を完全に透明にします。
- UIAspectRatioConstructor を BlasterButtonPrefab に挿入して、ボタンのアスペクト比率がコンポーネント間で同じであることを確認してください。
- ボタンの隅を丸くします。
- Insert a UICorner オブジェクト into BlasterButtonPrefab .
- Select the UIコーナー , then in the プロパティ window, set コーナーラウンド to 1> 0.05, 01> to round the corners.
- ImageLabel を BlasterButtonPrefab に挿入する。
- 新しいラベルを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- アンカーポイント を 0.5, 0.5 に設定して、新しいラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- 0.52, 0,0.497, 0 を設定して、ラベルが親ボタンの中央に設定されるようにします。この値は、ブラスターが視覚的に親ボタンの中央に見えるよう
- サイズ を{1.20, 0},{0.9, 0} に設定して、ボタンの外のラベルエリアを拡大する (親ボタンの横に 120% 横に 90% 縦に 100% を設定します)。
- スケールタイプ を フィット に設定します。
サンプル内の ReplicatedStorage スクリプトを参照してください Laser Tag 場所ファイル、そのプログラムでボタンを表示するボタンのためにスケール、プレイヤーがボタンを選択しない場合、ボタンをスケール、およびプレイヤーのブラスターの選択をアバターに付けます。
次のスクリプトには、ブラスターセレクターを作成するために共同で動作するスクリプトが必要です。プレイヤーがエクスペリエンスに参加したり、体力が 0 になった後にラウンドにリスポーンしたりすると、このスクリプトはブラスターセレクターの UI 要素をすべて有効にします。プレイヤーが選択を行うまで、ブラスターセレクターの UI 要素をすべて有効にするまで
さあ、プレイヤーがエクスペリエンスに参加したり、体力がゼロになったりした後、ラウンドにリスポーンしたり、ブラスターセレクター UI が表示され、選択を行うことができます。各ボタンは期待通りに機能します。
爆発ボタン
爆発ボタンは、モバイルまたはタブレットデバイスを介してエクスペリエンスにアクセスするプレイヤーに使用する UI コンポーネントです。サンプルレーザータグエクスペリエンスは、クロスハートと爆発の両方を表示するアイコンで、ボタンの機能をテキストなしで伝達するために使用します。
サンプル Laser Tag エクスペリエンス内の爆発ボタンを正確に再現するには：
画像ボタン を HUDGUI オブジェクトに挿入します。
In the エクスプローラー window, navigate to the StarterGui service.
子オブジェクトの HUDGui オブジェクトの上にマウスポインタを置き、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
コンテキストメニューから 画像ボタン を挿入します。
ビューポートで、ボタンがプレイヤーのサムネイルに自然に休む場所を移動するため、ボタンの外観をプレイヤーのデバイスで実際に見ることができ、 プロパティ ウィンドウで、
- 画像 を rbxassetid://18308375035 に設定して、爆発ボタンアイコンを表示します。
- PressedImage を rbxassetid://18308372558 に設定して、プレイヤーがボタンを押すと、爆発ボタンの逆向きバージョンを表示するようにします。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- Set 名前 to ボタン爆弾 。
- スケールタイプ を フィット に設定して、画像がコンテナ内にフィットし、さまざまな画面サイズでストレットされないようにします。
- 透明効果 を0.3 に設定して、ラベルのオペークビューをすべてのエクスペリエンスで一致させるためにレーベルの不透明度を減少させます。
UIAspectRatioConstructor を ボタン に挿入して、プレイヤーの画面サイズにかかわらずボタンのアスペクト比率を同じに保証します。
参照する ReplicatedStorage スクリプト内のサンプル Laser Tag 場所ファイル、プログラム式にブラスターボタンを表示するプログラムを使用しているデバイスで touch 入力を使用しているプレイヤーの場合、ブラスターボタンを表示するプログラムをプログラムで表示する。
次のスクリプトには、メインのヘッズアップディスプレイ (HUD) を設定するために、モジュールスクリプトのセットが必要합니다。これには、setupTouchButtonAsync が含まれます。後に、プレイヤーがラウンドに参加し、ブラスターを選択すると、このスクリプトは、プレイヤーの状況態、デバイス、チームステータスに適切にす
さあ、プレイヤーがエクスペリエンスに参加し、タッチ入力を使用するデバイスでタッチコントロールをサポートすると、ブラスターボタンはジャンプボタンの右上に表示されます。
プレイヤー UI
「ワイヤーフレームのレイアウト」のビジュアルハイエラーベストプラクティスに従って、このセクションでは、プレイヤーの状態に関連するすべての画面 UI 要素を実装する方法を教えています。このグループ化された UI 要素は、プレイヤーがゲームプレイから目を離さないようにするために画面のサイドにあります。
プレイヤーインジケータ
プレイヤーインジケーターは、プレイヤーがチームのスポーンゾーンにスポーンするときにクイックにチームをどのチームに属するかを参照する UI コンポーネントです。サンプルレーザータグエクスペリエンスは、プレイヤーがチームの 緑 または ピンク チームにいるかどうかに応じて、プレイヤーインジケー
Select a Color Theme のガイドに従い、両方のバージョンのプレイヤーインジケーターは、チームカラーをユニークな、単純なアイコンで組み合わせて、小さな画面で読みやすくなります。2つのフォームのビジュアルフィードバックを提供することは、デザインをカラーブラインドのプレイヤーにアクセスしやすく保つために重要です。
サンプル レーザータグ エクスペリエンス内のプレイヤーインジケーターコンポーネントを正確に再現するには：
フレーム を HUDGui オブジェクトに挿入します。
- In the エクスプローラー window, navigate to the StarterGui service.
- 子オブジェクトの HUDGui オブジェクトの上にマウスポインタを置き、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
- コンテキストメニューから フレーム を挿入します。
新しい フレーム を選択し、 プロパティ ウィンドウで、
0, 1 を設定してフレームのオリジンポイントをフレームの下部中央に設定します (0% から左に、フレームの右にかけて、フレームのオリジンポイントを設定します)。
BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
名前 を PlayerDisplay に設定します。
ポジション を{0.02, 0},{0.97, 0} に設定して、画面の下の左にフレームを設定します。
サイズ を{0.23, 0},{0.08, 0} に設定して、フレームを短く押したり、幅を広げたりします。
子 GuiObjects をクリップによって 下降 するようにします。
円形の形状を作成します。
画像ラベル を PlayerDisplay に挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- 画像 を rbxassetid://14304828123 に設定して、三角形アイコンを表示します。
- 1, 1 を設定して、ラベルのオリジンポイントを自身の右下に設定します (ラベルの左から右まで 100%、レーベルの上から下まで 100%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- Set 名前 to ブロック 。
- 1,0>1,0 を設定してラベルをフレームの右側に設定します。
- サイズ を{1.858, 0},{0.581, 0} に設定して、ラベルをフレームの外に拡大し、フレームの長さのほぼ半分の長さに縮小します。
- 透明効果 を 0.15 に設定して、ラベルをわずかに透明にします。
- スケールタイプ を フィット に設定して、画像がコンテナ内にフィットし、さまざまな画面サイズでストレットされないようにします。
- Insert a UIAspectRatioConstructor into Block to ensure the label and its children UI elements' aspect ratio remains the same no matter the player's screen size.
- 新しい制限を選択し、プロパティ ウィンドウに서 アセプト比率 を 13.78 に設定します。
プレイヤーのポートレート用のボックスを作成します。
画像ラベル を PlayerDisplay に挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- 画像プロパティの中のプレースホルダーアセットIDを削除します。ステップ 7 のスクリプトは、プレイヤーのポートレートを画像ラベルに入れます。
- アンカーポイント を 0, 1 に設定して、ラベルのオリジンポイントを左下に設定します (ラベルの左から右への 0% とラベルの上からの 100% の両方)。
- BackgroundColor3 を 0, 0, 0 に設定して、ラベルの背景色を黒に設定します。
- 背景透明度 を 0.3 に設定して、ラベルの不明瞭度を 30% 減少させ、エクスペリエンス内のすべてのブラック UI 要素にマッチします。
- 名前 を PlayerPortrait に設定します。
- ポジション を{0.11, 0},{1, 0} に設定して、ラベルをポリゴナル形状の左側に設定します。
- サイズ を {0.23, 0},{1, 0} に設定して、ラベルを縮小します。
- 透明効果 を 0.15 に設定して、ラベルをわずかに透明にします。
- スケールタイプ を フィット に設定して、画像がコンテナ内にフィットし、さまざまな画面サイズでストレットされないようにします。
- UIAspectRatioConstructor を PlayerPortrait に挿入して、ラベルとその子の UI 要素のサイズに関わらず、アスペクト比率が同じように保持されることを確認してください。
- UICorner を PlayerPortrait に挿入し、 プロパティ ウィンドウで 1>CornerRadius1> を 4>4> 0.05, 04> に設定して、コーナーをわずかに丸くします。
プレイヤーの名前のテキストラベルを作成します。
テキストラベルを PlayerDisplay に挿入する。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0, 0.5 に設定して、新しいボタンの起源ポイントを左中央に設定します (ボタンの左側から右側に 0%、ボタンの上部から下部に 50%)。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- Set 名前 to PlayerNameTextLabel 。
- ポジション を{0.35, 0},{0.72, 0} に設定して、ラベルをコンテナの右側に設定します (35% から左側へ、親ラベルから上位ラベルへ)。
- サイズ を{0.52, 0},{0.3, 0}に設定して、テキストが親フレームの大部分を占有するようにします(52%は横向き、30%は縦向き)。
- フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
- 重量 を ボルト に設定して、フォントを太くします。
- Text プロパティの置き換えテキストを削除します。ステップ 7 のスクリプトは、プレイヤーの名前をテキストラベルにプログラマチックに挿入します。
- 有効化 TextScaled 。
- Set TextXAlignment to Left .
プレイヤーのポートレートの左に表示されるチームアイコンと色を作成します。
フォルダ を PlayerDisplay に挿入し、 TeamIcons に名前を変更します。
緑のチームアイコンと色を作成します。
- 画像ラベルを チームアイコン に挿入します。
- 新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0, 1 に設定して、ラベルのオリジンポイントを左下に設定します (ラベルの左から右への 0% とラベルの上からの 100% の両方)。
- BackgroundColor3 を 88, 218, 171 に設定して、ラベルの背景色をミントグリーンに設定します。
- Set 名前 to チームアイコン 。
- ポジション を{0, 0},{1, 0} に設定して、ラベルをフレームの左側に設定します。
- サイズ を{0.135, 0},{0.58, 0} に設定して、ラベルをプレイヤーのポートレートの左にシュリンクします。
- 透明な画像 を 1 に設定してラベルを透明にする。
- カスタムアトリビューションを構成して、このラベルがグリーンチームのためにあることを追跡します。このステップは、ステップ 7 のスクリプトにとって非常に重要です。
- In the プロパティ ウィンドウ, 属性 セクションに移動し, then click the plus icon. A pop-up ダイアログが表示されます。
- In the 名前 フィールドに、 チームカラー を入力します。
- In the タイプ ドロップダウンメニュー, select レンガの色 .
- クリックしてください 保存 ボタン。
- 新しい チームカラー 属性を ミント に設定します。
- Insert a UIAspectRatioConstructor into TeamAIcon to ensure the label and its children UI elements' aspect ratio remains the same no matter the player's screen size.
- アイコンを作成します。
- 画像ラベルを チームアイコン に挿入します。
- 新しいラベルを選択し、 プロパティ ウィンドウで、
- 画像 を rbxassetid://14309678670 に設定して、グリーンチームアイコンを表示します。
- アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- Set 名前 to アイコン .
- ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に設定します。
- サイズ を{0.7, 0},{0.6, 0} に設定して、ラベルを縮小します。
- スケールタイプ を フィット に設定して、画像がコンテナ内にフィットし、さまざまな画面サイズでストレットされないようにします。
チームアイコンと色を作成します。 ピンク
- Duplicate チームアイコン and its children.
- Select the duplicate チームアイコン , then in the プロパティ window,
- BackgroundColor3 を 255, 170, 255 に設定して、ラベルの背景色をカーネーションピンクに設定します。
- Set 名前 to チームボイコン 。
- チームカラーの属性を カーネーションピンク に設定します。
- Select the duplicate アイコン child of チームアイコン , then in the プロパティ window, set 1>画像1> to 4> rbxassetid://143096785494> to display the pink team icon.
参照する ReplicatedStorage スクリプト内のサンプル Laser Tag 場所ファイル、プログラムでプレイヤーのインジケーターを適切なチームカラーとアイコンで表示しながら、ラウンド中にプレイヤーがアクティブになります。
次のスクリプトには、メインのヘッズアップディスプレイ (HUD) を設定するために、モジュールスクリプトのセットが必要합니다。これには、startSyncingTeamColor、setPlayerName、および setPlayerPortrait などが含まれます。プレイヤーがラウンド状況参
さあ、プレイヤーがリスポーン後にラウンドに参加すると、プレイヤーインジケーターは画面の左下に表示されます。
フォースフィールドスクリーン
フォースフィールドスクリーンは、ラウンドに参加するときやリジョインするときにプレイヤーが敵チームから安全であることを知らせるためのUIエレメントです。エステティックガイドラインのためのアイコンの例、選択アートスタイル
サンプル レーザータグ エクスペリエンス内のフォースフィールドスクリーンを正確に再現するには：
ImageLabel を ForceFieldGui オブジェクトに挿入する Class.ScreenGui オブジェクト。
In the エクスプローラー window, navigate to the StarterGui service.
彼の子オブジェクト ForceFieldGui にカーソルを置き、 ⊕ アイコンをクリックします。コンテキストメニューが表示されます。
コンテキストメニューから 画像ラベル を挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
Set 画像 to rbxassetid://14462567888 。
背景透明度を 0.8 以下に設定して、フォースフィールドを透明にする。 3. サイズ を{1, 0},{1, 0} に設定して、画像を親のScreenGUIの全体に満たす (100% 横におよび 100% 縦に沿って)。
スケールタイプ を タイル に設定して、サマードサイズのタイルを全画面に広げます。
タイルサイズを 0, 104,0, 180 に設定します。
ラベルに UIGradient オブジェクトを挿入します。
新しいグラデーションオブジェクトを選択し、 プロパティ ウィンドウで、
Set Color をブルーからホワイトに変更し、再びブルーに戻す。
120, 192, 250 を設定して、すべての六角形にライトブルーの色を適用します。
クリックする Color プロパティ、然後クリックする ⋯ ボタン。色のシーケンスポップアップが表示されます。
カラーシーケンスの下軸にある各トライアングルは、画像の左から右にあるプロパティの色値を決定するキーポイントです。
色のシーケンスをクリックしてドラッグして、タイム値が0.05になるまでクリックし、色 の隣の小さな正方形をクリックして、2> 色2>ポップアップウィンドウを開きます。
明るい白を選択し、ポップアップウィンドウを閉じます。
色のシーケンスをクリックしてドラッグして、タイム 値が0.95 を 、そして、色 ポップアップウィンドウを再び開き、前のように同じ色のホワイトを選択します。
ローテーション を225 に設定して、色のシーケンスの青い部分を、上の左側と下の右側のコーナーで表示します。
透明効果をシマー効果のように見せる数値シリアルを設定します。
クリックする 透明度 プロパティ、 ⋯ ボタンをクリックします。 数字のシーケンスが表示されます。各スクエアの開始と終了にある数字のシーケンスは、キーポイントであり、画像の左側から右側にかけての画像の透明度の値を決定します。
数値シーケンス全体に次の時間と値プロパティを設定します:
- 時間 = 0、 価値 = 0> 0.250>
- 時間 = .101、 値 = 0> 0.8750>
- タイム = .183、 値 = 0> 00>
- 時間 = .3、 値 = 0> 10>
- 時間 = .7、 値 = 0> 10>
- 時間 = 1、 価値 = 0> 0.90>
ステップ 2 から 画像ラベル を複製します。
Select the UIGradient オブジェクト within the duplicate label, then in the プロパティ window,
Rotation を -45 に設定して、画像を Y 軸に沿ってほぼ同じように反射させます。
透明度を変更して、シマーがもっとオーガニックに見えるようにします。
- クリックして透明度プロパティ、然後クリックして⋯ボタン。数字シーケンスポップアップが表示されます。
- 3つ目のキーフレームを選択し、 Delete ボタンをクリックします。
参照する ReplicatedStorage スクリプト内のサンプル Laser Tag 場所ファイル、プログラムでフォースフィールド画面を表示するプレイヤーが参加または再参加するラウンドです。
次の ReplicatedStorage.ForceFieldClientVisuals クライアントスクリプトは、ForceField ビジュアルを StarterGui.ForceFieldGui で置き換えます。プレイヤーがエクスペリエンスにロードさ
このスクリプトは、ForceField がキャラクターに追加されるときに聞き、デフォルトの第一人称フォースフィールドビジュアルを無効にし、Class.ForceFieldGui オブジェクトを有効にします。これは、プレイヤーが他のプレイヤーをリスポーンさせるバック
local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer
local function onCharacterAddedAsync(character: Model)
local forceField = character:WaitForChild("ForceField", 3)
if not forceField then
-- ForceField が無効になったスポーンポイントにプレイヤーがスポーンする
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 がデフォルトの 1人称ビュー ForceField のビジュアルで表示されるようになりました。
スクリーンをリスポーン
リスポーン画面は、プレイヤーがタグアウトされたことを通知し、サーバーがリスポーンを完了するまでスポーンゾーンに戻すようにする UI エレメントです。この UI エレメントは、プレイヤーがタグアウトされたことを処理する時間を提供し、サーバーがリスポーンを完了するまで、スポーンゾーンに戻る戦略を策
サンプルレーザータグエクスペリエンスでのカスタムリスポーン動作に関する詳細は、「ゲームプレイスクリプト教科書」の「Respawn Characters」を参照してください。
サンプル レーザータグ エクスペリエンス内のリスポーン画面を正確に再現するには：
中央情報バナーを作成します。
画像ラベル を OutStateGui オブジェクトに挿入します。
In the エクスプローラー window, navigate to the StarterGui service.
子オブジェクトの OutStateGui オブジェクトの上にマウスポインタを置き、⊕ アイコンをクリックします。コンテキストメニューが表示されます。
コンテキストメニューから 画像ラベル を挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
アンカーポイント を 0.5, 0.5 に設定して、新しいボタンのオリジンポイントを中央に設定します (ラベルの左から右に 50% 、ラベルの上部から下部に 50%)。
BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
ポジション を {0.5, 0},{0.5, 0} に設定して、ラベルを親のスクリーンギューに中央に設定します (親のスクリーンギューの左から右に 50% 、親のスクリーンギューの上から下に 50%)。
サイズ を{0.48, 0},{0.06, 0} に設定して、ラベルを拡大する (48% 横におよび 6% 縦における親の ScreenGUI の子)。
Set 名前 to ブロック 。
画像 を rbxassetid://14304827265 に設定して、画像をトラペツにする。
イメージカラー を 0,0,0 に設定して、トラペツを黒にする。
透明効果 を 0.3 に設定して、ラベルの不明瞭度を 30% 減少させ、エクスペリエンス内のすべてのブラック UI 要素にマッチします。
Insert a UIAspectRatioConstructor into Block to ensure the label and its children UI elements' aspect ratio remains the same no matter the player's screen size.
新しい制限を選択し、プロパティ ウィンドウに서 アセプト比率 を 13.78 に設定します。
情報テキストの テキストラベル を ブロック に挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に設定します (50% から左に、50% から右に、50% から上に)。
サイズ を{.85, 0},{0.55, 0}に設定して、テキストがトラペジオンのエリアの大部分を占有できるようにします(85%は横向き、55%は縦向きの親ラベルの上に)。
Set Name を BodyTextLabel に設定します。
フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
重量 を ボルト に設定して、フォントを太くします。
Set テキスト を Respawning… に設定します。
TextColor3 を 255, 255, 255 に設定して、テキストを白にする。
有効化 TextScaled 。
ヘッダーを作成します。
ブロックに 画像ラベル を挿入する
新しいラベルを選択し、 プロパティ ウィンドウで、
アンカーポイント を 0.5, 1 に設定して、ラベルのオリジンポイントを自分の下半中央に設定します (ラベルの左から右へ 50%、レーベルの上から下へ 100%)。
BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
ポジション を{0.5, 0},{0, 0} に設定して、ラベルを親ラベルの中央上部に設定します (50% から左に、親ラベルの左から右に)。
サイズ を{0.46, 0},{0.56, 0} に設定して、ラベルを拡大する (46% 横における、56% 縦における親ラベルの子ラベル):
Set Name を ヘッダー に設定します。
画像 を rbxassetid://14304826985 に設定して、画像をマルチ方向のフェイドにする。
イメージカラー を 245, 46, 46 に設定して、プレイヤーがラウンドから一時的に非アクティブであることを示すために、フェイドレッドを設定します。
情報テキストのヘッダーに TextLabel を挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルを親ラベルの中央に設定します (50% から左に、50% から右に、50% から上に)。
サイズ を{.85, 0},{0.55, 0}に設定して、テキストがフェイドエリアの大部分を占有できるようにします(85%横における父親ラベルの親ラベルの 55%)。
Set Name to ヘッダーテキストラベル 。
フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
重量 を 黒 に設定して、フォントを太くします。
Set テキスト を タグ - あなたは出ています！ 9. TextColor3 を 255, 255, 255 に設定して、テキストを白にする。
有効化 TextScaled 。
画面の境界線の周りにフェイドを作成します。
- 画像ラベルを OutStateGui に挿入します。
- 新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
- BackgroundColor3 を 0,0,0 に設定して、ラベルの背景色を黒に設定します。
- 背景透明度 を 0.5 以下に設定して、ラベルの背景を半透明にします。
- ポジション を {0.5, 0},{0.5, 0} に設定して、ラベルを親のスクリーンギューに中央に設定します（親のスクリーンギューの左から右に 50%、親のスクリーンギューの上から下に 50%）。
- サイズ を{1, 0},{1, 0} に設定して、ラベルを親の ScreenGUI の全体に拡大する (100% 横におよび 100% 縦に沿っての親 ScreenGUI の子)。
- ZIndex を他の UI 要素の後ろに表示するために -1 に設定します。
- Set Name を ヘッダー に設定します。
- 画像 を rbxassetid://14309518613 に設定して、画像をフレームボードにする。
- 透明効果 を 0.1 以下に設定して、フェイドをわずかに透明にします。
パフォーマンスを向上させるために、画像アセットをスキップし、代わりにカスタムの透明度番号のシーケンスで UIGradient オブジェクトを使用できます。このフェイドテクニックについては、「UI アイテムモディファイター - グラデーション」を参照してください。
参照する ReplicatedStorage スクリプトは、サンプルの Laser Tag 場所にあるプログラムで、プレイヤーの体力がゼロになると、プレイヤーがチームのスポーンゾーンにリスポーンするようにプログラム的に表示するリスポーン画面を表示します。
次の ReplicatedStorage.PlayerStateHandler クライアントスクリプトには、playerState 属性により異なるタイプの動作をトリガーする機能が含まれています。すべてのイベントのレポートは、このスクリプト内のイベントのレポートであり、プレイヤーコントロール、カメラの操作動、およびどの UI レイヤーが表示されるかを有
プレイヤーの体力が 0 になると、playerState は TaggedOut になり、onTaggedOut() 機能がトリガーされます。1>onTaggedOut1> は次の動作を即座にトリガーします：
- プレイヤーはアリーナで動けません。
- プレイヤーはカメラを動かすことができません。
- プレイヤーはブラスターを使用できません。
- The StarterGui.OutStateGui は専用に有効化されます。
プレイヤーがリスポーンすると、その playerState が SelectingBlaster になり、これは onSelectingBlaster() 機能をトリガーします。 2>onSelectingBlaster2> では、リスポーン画面を
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?)
-- GUI レイヤーには、独立して設定する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(`Invalid player state ({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)
さあ、プレイヤーの体力が 0 になると、リスポーン画面がプレイヤーがスポーンゾーンにリスポーンするまで表示されます。
さあ、あなたは常に画面上の UI のためのコモン GuiObjects を知っているため、 RoundResultsGui ScreenGui オブジェクトとそのすべての子供たちを試して、マッチの一致利または
SurfaceGui オブジェクトを作成
To display UI on a part's surface in the 3D space that responds to scripting logic for each individual player , you can parent a SurfaceGui object to the part that you want to display your UI within the ReplicatedStorage service. This technique ensures your UI and its scripting logic are available to both the server and each player's client.
SurfaceGui オブジェクトには、3D 空間の表面に表示されるすべての GuiObjects が含まれています。サンプルレーザータグエクスペリエンスには、SurfaceGui オブジェク
Class.SurfaceGui オブジェクトを作成するには：
In the エクスプローラー ウィンドウ, hover over the ReplicatedStorage サービス, then click the ⊕ アイコン. コンテキストメニューが表示されます。
コンテキストメニューから パーツ オブジェクトを挿入します。
部品に ScreenGui オブジェクトを挿入します。
子ユーザー UI 要素のコンテキストに応じて SurfaceGui を名前変更します。
3D 空間の表面でパーツの表面に表示する必要があるすべての UI 要素について、このプロセスを繰り返します。
クールダウンメーター
クールダウンメーターは、プレイヤーがブラスターを再び爆破できるまでに待たなければならない時間をプレイヤーに伝える UI コンポーネントです。このわずかな一時停止は、プレイヤーがクリックまたはボタンを押すたびに爆発できるようになるまで、実際的でないレーザータグゲームプレイで待ち時間を長くすることを防ぐことができます。
サンプル レーザータグ エクスペリエンス内のクールダウンメーターを正確に再現するには：
パーツを作成して SurfaceGui オブジェクトを持つ。
- In the エクスプローラー ウィンドウ, hover over the ワークスペース , then click the ⊕ icon. A コンテキストメニューが表示されます。
- コンテキストメニューから、 ブロック 部分を挿入します。これは、パーツの一時的な場所であり、プロセスの各ステップで変更を視覚化できます。
位置と方向を変更して、プレイヤーのキャラクターがブラスターを持つ場所の周りにパーツを配置し、 プロパティ ウィンドウで、
透明効果を 1 に設定してパーツを完全に透明にします。
Set Name を CooldownBarPrefab に設定します。
サイズ を0.169, 0.027, 2.537 に設定して、パーツのサイズをブラスターの長さに対応させます。
Disable CanCollide と CanQuery を無効にする。
Insert a サーフェスGUI into CooldownBarPrefab .
新しい サーフェスGUI を選択し、 プロパティ ウィンドウで、
顔 を 上部 に設定して、UI が上に表示されるようにします。
Set LightInfluence と MaxDistance を 0 に設定します。
ピクセル PixelsPerStud を 200 に設定します。
ブラックバーを作成します。
画像ラベルを サーフェスGUI に挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
- BackgroundColor3 を 0,0,0 に設定して、ラベルの背景色を黒に設定します。
- BackgroundTransparency を 0.4 に設定して、ラベルの背景を半透明にします。
- ポジション を {0.5, 0},{0.5, 0} に設定して、ラベルを親の SurfaceGui の中央に設定します (親の SurfaceGui の左から右への 50% と親の SurfaceGui の上から下に 50% の距離)。
- サイズ を{1, 0},{1, 0} に設定して、ラベルを親サーフェスGUIの全体に拡張します (100% 横におよび 100% 縦に沿っての親サーフェスギューの親サーフェスギュー。
- コンテナ 名前を設定します。
コンテナの隅をラウンドします。
コンテナに UICorner オブジェクトを挿入します。
Select the UIコーナー , then in the プロパティ window, set コーナーラウンド to 1> 0.15, 01> to slightly round the corners.
赤いバーを作成します。
- 容器に 画像ラベル を挿入する。
- 新しいラベルを選択し、 プロパティ ウィンドウで、
- デフォルトの 画像 値を削除します。
- 1, 0.5 を 1, 0.5 に設定して、ラベルのオリジンポイントを右中央に設定します (ラベルの左から右へ 100%、ラベルの上から下へ 50%)。
- BackgroundColor3 を 172, 13, 13 に設定して、ラベルの背景色を暗い赤に設定します。
- 背景透明度 を 0.2 以下に設定して、ラベルの背景をわずかに透明にします。
- Set 名前 to バー 。
- Set Position to {1, 0},{0.5, 0} to set the label at the right-middle of its container (100% from the left to the right of the parent label, and 50% from the top to the bottom of the parent label).
- サイズ を 0, 0,1, 0 に設定して、ラベルを親ラベルのトップに拡長するために (0% 横におよび 100% 縦における親ラベルの) を減らします。このステップは、スクリプトで発生する減少動作にも役立ちます。
ラベルの隅をラウンドします。
- Insert a UICorner オブジェクト into バー 。
- Select the UIコーナー , then in the プロパティ window, set コーナーラウンド to 1> 0.15, 01> to slightly round the corners.
移動 CooldownBarPrefab を ReplicatedStorage に。
フォルダ構造を作成して UI オブジェクトを整理します。サンプルは、子供の GUI フォルダに子供の インスタンス フォルダを使用しています。
移動 CooldownBarPrefab を GUI に。
参照する ReplicatedStorage スクリプトは、サンプル内の Laser Tag 場所にあるファイル、プログラムでクールダウンメーターをプレイヤーのブラスターに接続し、その後、プレイヤーがブラスターを爆破すると、赤いバーをアニメートします。
次の ReplicatedStorage.FirstPersonBlasterVisuals クライアントスクリプトは、プレイヤーの第一人称ブラスターのビジュアルロジックをすべて処理します。必要なモジュールスクリプトのセットが必要になります。これには、 FirstPersonBlasterVisuals.addCooldownBar
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
-- 爆発が発生すると、1人目の視覚効果を実行する
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)
-- blasterType がプレイ中に変更するビジュアルをハンドルする
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)
さあ、プレイヤーがブラスターを爆破するたびに、クールダウンバーをアニメーションして、プレイヤーが爆破できるときにコミュニケーションします。
ビルボードGUI オブジェクトを作成
スクリプトロジックに応答し、常にプレイヤーのカメラの角度にかかわらず、3D 空間内の UI 要素を表示するための子オブジェクトを作成するには、BillboardGui または BasePart などの 3D 空間内の子オブジェクトまたは、Attachment を
サンプルレーザータグエクスペリエンスには、BillboardGui サービス内の 2つの独立した ReplicatedStorage オブジェクトが含まれています：
- OtherPlayerIndicatorGuiPrefab - ラウンドでアクティブなプレイヤーの頭上にピンクまたは緑のサークルを表示します。
- TaggedOutIndicatorGuiPrefab - ラウンドからタグアウトした時にプレイヤーの頭の上に表示します。
Class.BillboardGui オブジェクトを作成した後、子オブジェクトを作成およびカスタマイズできます。子オブジェクトは、各コンテナの目的に応じて GuiObjects を作成およびカスタマイズできます。フォローの即座に続くセクションで、サンプルレー
Class.BillboardGui オブジェクトを作成するには：
- In the エクスプローラー ウィンドウ, hover over a BasePart または Attachment , then click the 1>⊕1> icon. A コンテキストメニューが表示されます。
- コンテキストメニューから BillboardGui オブジェクトを挿入します。
- 子ユーザー UI 要素のコンテキストに応じて BillboardGui を名前変更する 。
- プレイヤーの頭の上にコンテキストで表示する必要があるすべての UI 要素のために、このプロセスを繰り返します。
チームインジケータ
チームインジケーターは、ラウンド中の他のプレイヤーがどのチームに属するかをプレイヤーに通知する UI エレメントです。これは、プレイヤーが戦闘ゾーンに入ると、タグを取得してマッチを失う可能性があるため、ゲームプレイの初期のシューターエクスペリエンスでは、プレイヤーが戦闘ゾーンに入るたびに
サンプル レーザータグ エクスペリエンス内のチームインジケータを正確に再現するには：
一時的なリグに BillboardGui オブジェクトを挿入します。
メニューバーで アバター タブに移動し、 リグビルダー をクリックします。
利用可能なオプションから選択します。サンプルは R15 リグタイプ、女性の体形、および Rthro アバターを使用しています。リグは 3D ビューポートと名前の 2> Rig2> の両方に表示されます。
In the エクスプローラー ウィンドウ, navigate to the rig's child ヘッド メッシュ, then click the ⊕ アイコン. コンテキストメニューが表示されます。
コンテキストメニューから BillboardGui を挿入します。
新しい BillboardGui を選択し、 プロパティ ウィンドウで
LightInfluence を 0 に設定して、環境光がインジケータの色に影響するのを防止します。
Set 名前 to OtherPlayerIndicatorPrefab 。
サイズ を {0, 10},{0, 10} に設定して、ラベルを大幅に小さくします。
StudsOffsetWorldSpace を 0, 4, 0 で設定して、リグの頭上に配置します。
フレーム オブジェクトを OtherPlayerIndicatorPrefab に挿入します。
新しいフレームを選択し、 プロパティ ウィンドウで、
アンカーポイント を 0.5, 0.5 に設定して、フレームのオリジンポイントを中央に設定します (ラベルの左から右へ 50%、ラベルの上から下に 50%)。
BackgroundColor3 を 255, 3, 0 に設定して、フレームの背景色を赤を保持データとして設定します。
ポジション を {0.5, 0},{0.5, 0} に設定して、フレームをコンテナの中央に設定します (親 BillboardGui の左から右に 50% 、親 BillboardGui の上部から下に 50%)。
1, -2 を 1, -2 に設定して、BillboardGui の表面エリアにフレームを縮小します。
コーナーを完全にラウンドするために UICorner オブジェクトをフレームに挿入します。
Insert a UIStroke オブジェクト into フレーム to outline the circle of the indicator.
OtherPlayerIndicatorPrefab を ReplicatedStorage に移動します。
参照する ReplicatedStorage スクリプトは、サンプル内の Laser Tag 1A 場所ファイル、プログラムでチームインジケーターを表示するチームインジケーターを表示するプログラムで、敵チームにあり、隠されていない場合、すべてのプレイヤーのチームインジケーターを表示する Class.ReplicatedStorage スクリプトです。
次の ReplicatedStorage.OtherPlayerIndicatorGuiSetup スクリプトは、プレイヤーがアクティブなラウンドでアリーナにスポーンすると実行されます。チームインジケーターを呼び出すために <
他のプレイヤーが同じチームにある場合、チームインジケータは常に表示され、3D 空間のオブジェクトの後ろに隠されていても; 他のプレイヤーが敵チームにある場合、チームインジケータは、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 要素です。この情報は、ゲームプレイヤーのシューターエクスペリエンスのゲームプレイには、プレイヤーがタグアウトしたプレイヤーの次のターゲットに移動することが重要
サンプル レーザータグ エクスペリエンス内のタグ付きのインジケーターを正確に再現するには：
プロセスの各ステップを視覚化するために、一時的なリグに BillboardGui オブジェクトを挿入します。
メニューバーで アバター タブに移動し、 リグビルダー をクリックします。
利用可能なオプションから選択します。サンプルは R15 リグタイプ、 男性の体形、および Rthro アバターを使用しています。リグは 3D ビューポートと 2> Explorer 2> ウィンドウの両方で表示されます。名前 5> Rig
In the エクスプローラー ウィンドウ, navigate to the rig's child ヘッド メッシュ, then click the ⊕ アイコン. コンテキストメニューが表示されます。
コンテキストメニューから BillboardGui を挿入します。
新しい BillboardGui を選択し、 プロパティ ウィンドウで
LightInfluence を 0 に設定して、環境光がインジケータの色に影響するのを防止します。
Set Name to TaggedOutIndicatorGuiPrefab 。
サイズ を {3, 0},{0.5, 0} に設定して、ラベルのスペースを拡大します。
StudsOffset を 0, 3.25, 0 に設定して、プレイヤーの頭上に配置する。
タグ付きの 画像ラベル オブジェクトを TaggedOutIndicatorGuiPrefab に挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
- アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
- BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
- Set Name を Frame に設定します。
- ポジション を {0.5, 0},{0.5, 0} に設定して、ラベルをコンテナの中央に設定します (親 BillboardGui の左から右に 50% 、親 BillboardGui の上部から下に 50%)。
- サイズ を{1, 0},{1, 0} に設定して、ラベルを親 BillboardGui の全体に拡大するようにします。
- 画像 を rbxassetid://14304826985 に設定して、画像をマルチ方向のフェイドにする。
- イメージカラー を 245, 46, 46 に設定して、ラベルを赤に色付けします。
パフォーマンスを向上させるために、画像アセットをスキップし、代わりにカスタムの透明度番号のシーケンスで UIGradient オブジェクトを使用できます。このフェイドテクニックについては、「UI アイテムモディファイター - グラデーション」を参照してください。
フレームに テキストラベルオブジェクト を挿入します。
新しいラベルを選択し、 プロパティ ウィンドウで、
アンカーポイント を 0.5, 0.5 に設定して、ラベルのオリジンポイントを中央に設定します (ラベルの左から右への 50% 、ラベルの上から下への 50% ）。
BackgroundTransparency を 1 に設定して、ラベルの背景を完全に透明にします。
Set Name を BodyTextLabel に設定します。
ポジション を{0.5, 0},{0.5, 0} に設定して、ラベルをコンテナの中央に設定します (親ラベルの左から右へ 50%、親ラベルの上から下に 50%)。
サイズ を{0.85, 0},{0.7, 0}に設定して、テキストがフェイドエリアの大部分を占有できるようにします(85%横における父親画像ラベルの親画像、70%縦における親画像ラベル)。
フォントフェイス を モントセラット に設定して、未来的な美しさに対応する。
重量 を ボルト に設定して、フォントを太くします。
Set テキスト を タグ付き に設定します。
TextColor3 を 255, 255, 255 に設定して、テキストを白にする。
有効化 TextScaled 。
移動 TaggedOutIndicatorGuiPrefab を ReplicatedStorage に。
参照する ServerScriptService スクリプト内のサンプル Laser Tag 1A 位置ファイル、プログラムでタグを表示しながら、プレイヤーがチームのスポーンゾーンにリスポーンするときにタグを表示します。
次の 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)
-- プレイヤーがすでにキャラクターを持っている場合は、Call onCharacterAdded を呼び出します
if player.Character then
onCharacterAdded(player, player.Character)
end
-- このプレイヤーのすべてのキャラクターのスポーンには、Call onCharacterAdded を呼び出します
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- ゲームにすでにいるプレイヤーを呼び出す
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- 今後のすべてのプレイヤーに callonPlayerAdded を呼び出す
Players.PlayerAdded:Connect(onPlayerAdded)
さあ、プレイヤーの体力が 0 になると、タグ付きのインジケーターは、リスポーンするまで頭上に表示されます。
ユーザーインターフェイスデザインのカリキュームを完了しておめでとうございます！あなたはアートスタイルを作成する経験を持って、レイアウトのワイヤーフレーミングとデザインの実装を開始から終了まで、あなたのプロジェクトを拡張することができます新しい UI と