HUDメータを作成 | 文書 - Roblox クリエーターハブ

A HUD またはヘッドアップディスプレイは、スコア表示、体力メータ、メニューボタンなど、ゲームプレイ中に常に表示されたりアクセスできたりする UI 要素のセットです。HUDを含めることは、ほとんどのエクスペリエンスに不可欠です、それはプレイヤーがゲームプレイ目標に成功するのを助ける情報を表示するからです。

共通のHUD要素は、左側にアイコンを持つ健康メーターで、タイマーバー、進行バー、または同様のものに適応できます。

In-game view showing custom health meter in upper-right region.

使用危険な宇宙ステーションをスタート地点とし、UI の基本 - HUD メーターを完了した参照プレース点として使用すると、このチュートリアルでは次のことを示します：

複数のエミュレートされた画面でデザインをテストするためのデバイスエミュレータの設定と使用
デザインとストレージコンテナの両方として StarterGui の使用。
カメラノッチなどのモダンな電話の内蔵 Roblox コントロールやデバイスノッチ/島の周りに UI 要素を配置/サイズする方法
デフォルトの Roblox ヘルスメーターを自分のメーターで置き換え、キャラクターの健康レベルに接続する方法
ヘルスメーターの中央部分をアニメートし、5色のグラデーションキーポイント（赤、オレンジ、黄、ライム、緑）の間の色を設定する方法

デバイスエミュレータを有効にする

Roblox は、プレイヤーが PC またはコンソールで経験を発見し、参加できるため、本質的にクロスプラットフォームです。後で電話を拾い、離れたところから続オフることができます。モバイルデバイス (電話とタブレット) には画面スペースが最も少ないので、UI 要素が小さな画面にフィットし、プレイヤーにははっきりと見えることが重要です。

プラットフォーム間の UI デザインをテストする最良の方法は、Studio のデバイスエミュレータです。このツールは、デバイスのプリセット選択を提供し、独自のカスタムプリセットを追加できます。

Studio で危険な宇宙ステーションテンプレートを開きます。
テストタブから、デバイスツールを切り替えます。
メインビューポートの上にあるバーから、 iPhone X または Samsung Galaxy A51 などの電話エミュレーションを選択します。次に、ビューサイズをウィンドウに合わせるに設定して、Studio の最大スペースを利用します。

A ScreenGui コンテナは、UIオブジェクト ( GuiObjects ) を保持して、プレイヤーの画面 (このチュートリアルでは、健康メーター全体) に表示します。エクスペリエンスに参加するすべてのプレイヤーに ScreenGui とその子オブジェクトを表示するには、StarterGui コンテナ内に配置します。プレイヤーが参加し、キャラクターが最初にスポーンすると、ScreenGui およびそのコンテンツが、PlayerGui コンテナ内のそのプレイヤーにクローンされます。このコンテナは、Players コンテナ内にあります。

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

空の ScreenGui を挿入するには：

In the エクスプローラー window, locate the StarterGui.
コンテナをホバーし、⊕ ボタンをクリックし、ScreenGui を挿入します。
新しいコンテナ HUDContainer の名前を変更して、目的を反映させます。

安全なエリアを利用する

現代の電話は、全画面を利用しますが、通常は画面スペースを占有するノッチ、カットアウト、その他の要素を含みます。すべての Roblox エクスペリエンスには、メインメニューへの迅速なアクセス、チャット、リーダーボード、その他も含まれています。

Mobile device showing Roblox top bar buttons and device cutout.

プレイヤーが障害なくすべてのUIを見てアクセスできるようにするには、Roblox は ScreenInsets プロパティを提供し、安全エリアの内容に対する ScreenGui 挿入を制御します。ScreenGui 内に配置したすべての UI オブジェクトは、挿入境界に対して相対的です。

Mobile device showing the core UI safe area.

デフォルトの CoreUISafeInsets は、すべてのUIオブジェクトが Roblox UI とデバイスカットアウトからクリアになるようにしますが、DeviceSafeInsets は、下のように制限されたスクリーンスペースを活用するためのより良いオプションです。

CoreUISafeInsets メーターをすべての障害物からクリアに保ちますが、メーターと画面の物理的な上端の間に大きなギャップを追加します。

In the エクスプローラー window, select HUDContainer .
In the プロパティ window, set the ScreenInsets プロパティ to DeviceSafeInsets .

端のパッドを設定

With ScreenInsets を DeviceSafeInsets に設定して、コンテンツは直接画面の物理上限まで拡張できるようになりました。しかし、少量のパッドは、健康メーター (およびコンテナ内の他のオブジェクト) を画面の端から少し離し、クリップされるのを防ぐのに役立つことがあります。

Screen container with padding around all edges.

UI コンテナにパッドを適用する方法の 1つは、UIPadding 修正子の挿入です：

挿入 UIPadding 修正子を HUDContainer に挿入します。
新しい UIPadding オブジェクトを選択し、コンテナのすべてのエッジに対して 0, 16 の値を入力します(PaddingBottom、PaddingLeft、PaddingRight、PaddingTop )。これは、画面の解像度に関わらず、容器全体に 16 ピクセルのパッドが適用されます。

健康メータを構築する

画面コンテナが構成されたで、フレームや画像ラベルなどの Roblox UI オブジェクトを使用して、健康メータを構築開始できます。

Basic components used for the health meter.

親フレームを作成する

Figma や Photoshop のようなデザインアプリケーションと同様、Roblox の Frame は、他の UI オブジェクトのコンテナとして機能します。このチュートリアルでは、全体のヘルスメーターが単一の親フレームに含まれ、さまざまなHUDレイアウトの間で簡単に再配置できます。

挿入する Frame を HUDContainer に挿入します。新しいフレームは上左隅に空の白い正方形として表示されます。

新しいフレームがビューポートに表示されない場合は、3Dビューポートの右上隅の GUIオーバーレイウィジェットからビジュアライゼーションオプションウィジェットまたはビュータブから UIビジビリティを切り替えましょう。
新しいフレームインスタンスをメーターバーに名前変更します。

フレームを位置付ける

Roblox（ロブロックス）oblox では、UI オブジェクトの位置は、UDim2 軸と Scale および Offset 両方の軸のための X および Y の値を含む座標セットで表現されます：

Scale 値は、対応する軸に沿ってコンテナのサイズのパーセントを表し、任意の Offset 値を加算します。
Offset 値は、対応する軸でオブジェクトを移動するためのピクセルの数を表し、任意の Scale 値を加算します。

画面コンテナの右上隅に UI オブジェクトを配置するには、Scale が最適のアプローチです。画面の物理ピクセルサイズに関係なく、 X の 1 （100%）がコンテナの右端を表しているからです。同様に、 Y スケール値の 0 (0%) は、コンテナの上端を表します。

Scale ranges for the X and Y axes of a container.

さらに、親フレームがその起源ポイントを定義するために上右のアンカーポイントを設定する必要があります。許容される値は、オブジェクトのサイズに対してとの間であり、それゆえ、のフレームのアンカーポイントは上右隅に配置されます。

Frame anchor point in its upper-right corner.

エクスプローラーウィンドウで、以前挿入したメーターバーフレームを選択する。
In the プロパティ window, enter 1, 0, 0, 0 for Position and press Enter .スタジオは自動的に括弧を追加し、UDim2 の {1, 0},{0, 0}を形成します。
プロパティ 1, 0 に対して AnchorPoint を入力します。フレームは今、デバイスの安全エリアの右上隅に位置付けられ、パッドの結果として端から少し凹んでいます。

フレームのサイズ変更

位置と同様、UI オブジェクトの Size は、UDim2 と Scale の両方の Offset および Y 軸の値を含む **** 座標セットで表現されます。

デフォルトでは、新しいフレームのサイズは {0, 100},{0, 100} 、つまり幅 ( X ) と高さ ( Y ) の両方で 100 ピクセルです。厳密なピクセル値は、特定の場合に有用ですが、UI 要素の多くは、全体の画面コンテナサイズのパーセントに設定すると、複数の画面により柔軟にスケールします。

メーターバーフレームを選択し、プロパティウィンドウにアクセスし、Size プロパティに移動します。
0.35, 0, 0.05, 0 の値を入力して、ピクセルオフセットなしで 35% 幅、5% 高さのパーセントサイズを設定します。

フレームをスタイル化

デフォルトでは、Frames はソリッドホワイトで満たされます。最終的なヘルスメーターは、より暗く、僅かに不透明な充填と、より暗いアウトラインを持つべきであり、明るいと闇の両方の背景でよりよく際立つようになります。

Frame styled with opacity, border, and rounded corners.

メーターバーフレームを選択し、0の BackgroundColor3 にを入力します。スタジオは自動的にRGB 値をに変換します。
0.75 プロパティのために BackgroundTransparency を入力します。RobloRoblox（ロブロックス）では、透明度は、完全に不透明から 0 、完全に透明に至るまで 1 です。そのため、0.75 は、Figma や Photoshop などの他のアプリケーションで 25% の不透明度と同等になります。
挿入する UIStroke オブジェクト、フレームにカスタマイズ可能なストロークを追加する強力なUI修正機能。
新しい UIStroke を選択して、次のプロパティを設定します：
- Thickness = 3
- Transparency = 0.25 (75% 不透明)

メーターフレームのスタイリングを完了するには、鋭い長方形ではなく "ピル" 形状を形成するために、角を丸めることができます。

UICorner インスタンスをメーターバーフレームに挿入します。
新しいを選択し、をに設定します。ピクセル値ではなくスケール（50%）の 0.5 （50%）値を使用すると、メートルバーが特に便利です。容器がどれほど高くても幅が広くても、完全に丸い曲線を保証するからです。

内埋めを作成する

健康メーターのフレームを含む部分が完了したので、キャラクターの変数健康を表す内部充填部分を追加できます。単一の満たされた領域である必要があるので、親フレーム内のサブチャイルド Frame が適しています。

Inner fill frame added to parent frame to represent the character's variable health.

子を Frame 挿入してメータバーフレームに。
新しいフレームインスタンスを内部充填に名前変更します。
内部満タンを選択して、次のプロパティを設定します：
- AnchorPoint = 0, 0.5 （左端と縦中央）
- Position = 0, 0, 0.5, 0
- Size = 1, 0, 1, 0
フレームの子が親に対して位置づけられ、サイズが指定されているため、スケールの使用で内フレームが親の全幅と高さを埋めるように、親の左端から開始します。
親フレームの「ピル」形状に対応するには、内埋めに追加の UICorner を挿入します。
新しい修正子を選択して、親のフレームの「ピル」形状に合わせて、プロパティを設定します。
フルメートが良好な健康を示していることをよりよく表現するには、内部充填を選択し、プロパティを（後のタスクで、実際の健康に基づいて変更するためにこの色をスクリプトする）に設定します。

アイコンを追加

メーターの目的をより明確に示すには、左側に画像ラベルを追加して、この場合は健康または生命を象徴する赤いハートを追加できます。

ImageLabel をメータバーフレームに挿入します。このオブジェクトでは、デカールとして Roblox にアップロードされた 2D 画像アセットを適用できます。
新しいラベルインスタンスをアイコンに名前変更します。
アイコンを選択し、ZIndex を 2。新たに挿入された UI オブジェクトは、以前挿入されたオブジェクトの前に常にレイヤーされますが、この変更により、アイコンはメーターのフレーム要素の前に常に表示されるようになります。
アイコンの Image プロパティを見つけて、rbxassetid://91715286435585 、プリロードされたハート画像の参照を入力し、インポート自分の画像をインポートし、そのアセットIDを使用します (必要に応じて、自分の画像をインポートして使用できます)。
アイコン ImageLabel が常に 1:1 のアスペクト比で保たれるようにするには、UIAspectRatioConstraint を挿入します。この制約には、アスペクト比を制御するカスタマイズ可能なプロパティがありますが、デフォルト値をそのままにすることができます。
アイコンを選択して、次のプロパティを変更すると、最終的な外観と位置を完了します：
- AnchorPoint = 0.5, 0.5 (センターアンカー)
- BackgroundTransparency = 1 (100% 透明)
- Position = 0, 0, 0.5, 0 (メートルの左側と縦中央)
- = ( メーターバーフレームの全体サイズの 200%、1:1 に制限される)

サイズを制限する

現代の電話画面やゲーミングモニター（16:9 またはより広いアスペクト比で 5%）では、スケール高さ（5%）が美しく見えますが、タブレット画面や古い電話では、メーターがわずかに高すぎる可能性があります。これを確認するには、 iPad 7th 世代のようなタブレットをデバイスエミュレータからエミュレートしてください。

Device Emulator set to emulate a tablet device.

Emulation on tablet device with meter bar taller than desired.

メーターバーの高さをより広い画面に一致させるために、UISizeConstraint を適用して最大ピクセル高さを制限できます。

挿入する UISizeConstraint をメータバーフレームに挿入します。
新しい制約が選択されたので、プロパティをに設定して、幅制限を適用しながら高さを 20 ピクセルに制限しました。

次に、メートルバーはより一貫した高さを維持し、より広い画面とより高い画面の間を保持します。

デフォルトのヘルスメーターを置き換える

Roblox の経験には、キャラクターがダメージを受けると表示されるデフォルトのヘルスメーターが含まれています。デフォルトのメートルを表示可能にすると、カスタムメートルを複製し、可能性がありますが重複します。

Default health meter overlapping and duplicating the custom health meter.

デフォルトのメーターを無効にする

デフォルトのヘルスメーターを無効にするには、クライアントスクリプト (LocalScript) を使用して、StarterPlayerScripts 内で StarterGui:SetCoreGuiEnabled() を呼び出します。

エクスプローラーウィンドウで、コンテナを拡張し、その中のコンテナを見つけます。
コンテナに新しい LocalScript を挿入し、目的を説明するために名前を HideDefaultHealthMeter に変更します。ローカルプレイヤーがエクスペリエンスに参加すると、StarterPlayerScripts 内のスクリプトが自動的に実行され、デフォルトのメートルを永久に隠すスクリプトを実行するのに理想的なコンテナになります

新しいスクリプトを挿入すると、新しいスクリプトエディタタブで自動的に開きます (そうでない場合は、エクスプローラウィンドウでスクリプトをダブルクリックします)。

次のコードを HideDefaultHealthMeter スクリプト内に貼り付け：

デフォルトのヘルスメーターを非表示にするHideDefaultHealthMeter
local StarterGui = game:GetService("StarterGui")

-- デフォルトのヘルスメーターを非表示にする
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

コード説明

行	目的
1	コアのサービス、 StarterGui 、にリファレンスを取得し、これは、カスタムヘルスメーターを作成した同じコンテナを表し、そのコンテンツは、エクスペリエンスに参加する各プレイヤーの PlayerGui コンテナにクローンされます。
4	サービスの SetCoreGuiEnabled() メソッドを呼び出し、デフォルトの健康モニタを無効にするように指示します ( false )。

今すぐエクスペリエンスをプレイテストしてダメージを受けると、デフォルトのメーターが無効になって隠されていることに気づくでしょう (次のセクションでカスタムメーターをスクリプトして、健康変更を反映する)。

健康状態の変更を検出する

すべてのデフォルト Roblox キャラクタモデルには、歩行/実行速度を設定したり、体力を管理したりするなど、キャラクタに特別な動作や機能を提供する Humanoid クラスが含まれています。サーバーの変更が各プレイヤーのクライアントにレプリケートされ、サイズと色のカスタムヘルスメーターの両方を更新するためにこれらの変更を検出できます。

エクスプローラーウィンドウで、コンテナを内に見つけます。
コンテナに新しい LocalScript を挿入し、目的を説明するために名前を UpdateCustomMeter に変更します。スクリプト内の StarterCharacterScripts は、プレイヤーのキャラクターがスポーンするたびに自動的に実行され、それぞれのリスポーンでヘルスメーターを完全にリセットするスクリプトを実行するのに理想的なコンテナになります。

UpdateCustomMeter スクリプトのエディタウィンドウで、次のコードを貼り付けます：

更新カスタムメーター
local Players = game:GetService("Players")

-- ローカルプレイヤー、キャラクター、およびヒューマノイドへの参照
local player = Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

-- メーターバー内フレームへの参照
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- グラデーションシーケンスカラー (赤、オレンジ、黄、ライム、緑)
local gradient = {
	Color3.fromRGB(225, 50, 0),
	Color3.fromRGB(255, 100, 0),
	Color3.fromRGB(255, 200, 0),
	Color3.fromRGB(150, 225, 0),
	Color3.fromRGB(0, 225, 50)
}

-- 分数点からグラデーション順序の色を取得する機能
local function getColorFromSequence(fraction: number): Color3
	-- グラデーションの各色は、セクションの始まりと/または終わりを定義します
	local numSections = #gradient - 1

	-- 各セクションは 1 の一部を表します
	local sectionSize = 1 / numSections

	-- 要求された分数がどのセクションに属するかを決定する
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- セクションの始まりと終わりの色を取得する
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- セクション内で小数を 0 から 1 に正常化する
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- 正規化された分数に基づいて、開始と終了の間の Lerp
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- 最大の割合で新しい健康を計算する
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- バーを新しいサイズ/カラーターゲットに設定
	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
end

-- ヒューマノイドの健康状態の変更を検出するListen for changes to humanoid health
humanoid.HealthChanged:Connect(onHealthChanged)

-- 最初にバーサイズ/色を現在の健康状態に再設定/リセットする
onHealthChanged()

コード説明

行	目的
4 ‑ 6	ローカルの Player 、その Character モデル、およびその内部の Humanoid クラスに対する参照を取得します。
9 ‑ 10	メーターの内部充填オブジェクトへの参照を取得し、キャラクターの体力が変更されると、サイズと色が変更されて再表示されます。
13 ‑ 19	5色のアレイ (赤、オレンジ、黄、ライム、緑) を宣言して、メーターをさまざまな場所で再着色します;たとえば、100% の体力に緑、50% の体力に黄、0% の体力に赤、またはキーポイントの間のどこかの割合でブレンドなどです。
22 ‑ 41	グラデーションカラーのキーポイントの間の色ブレンドを返すヘルパー関数。
43 ‑ 50	健康に変更を処理する機能。ここでは、新しい健康をキャラクターののパーセンテージとして計算し、内部満タンをそのスケールパーセンテージに再設定し、関数から返された色に色を変更します。
53	サーバーからレプリケートされた変更を検出し、機能を呼び出す主なイベント接続。
56	最初に (キャラクターのスポーンまたはリスポーン時)、onHealthChanged() 関数を呼び出して、内部満タンを正しい割合にサイズと色に変更します。通常、これはフル幅と緑です。

今、エクスペリエンスをプレイテストすると、キャラクターがダメージを受けると、カスタムメーターが正しくサイズと色を更新していることに気づくでしょう：

デフォルトでは、Roblox の健康測定システムには、キャラクターがゆっくりと体力を回復できる段階的な効果が含まれています。この効果を無効にしたい場合は、空の Script を名前付きの健康を StarterCharacterScripts コンテナに挿入します。これにより、各プレイヤーキャラクターのためのデフォルトの内部スクリプトの読み込みが防止され、再生効果が効果的に削除されます。

メーターバーをアニメート

カスタムメーターに追加レベルのポーランド語を追加するには、減衰を通じて、メーターバーのサイズと色を ½ 秒以上かけて徐々に変更して、健康変更をアニメーションできます。

以前編集した UpdateCustomMeter スクリプトのスクリプトエディタタブにアクセス。

すべての行を選択して（または）、次のコードでそれらを貼り付けます：

更新カスタムメーター
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

-- ローカルプレイヤー、キャラクター、およびヒューマノイドへの参照
local player = Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

-- ティーンプロパティ
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- メーターバー内フレームへの参照
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- グラデーションシーケンスカラー (赤、オレンジ、黄、ライム、緑)
local gradient = {
	Color3.fromRGB(225, 50, 0),
	Color3.fromRGB(255, 100, 0),
	Color3.fromRGB(255, 200, 0),
	Color3.fromRGB(150, 225, 0),
	Color3.fromRGB(0, 225, 50)
}

-- 分数点からグラデーション順序の色を取得する機能
local function getColorFromSequence(fraction: number): Color3
	-- グラデーションの各色は、セクションの始まりと/または終わりを定義します
	local numSections = #gradient - 1

	-- 各セクションは 1 の一部を表します
	local sectionSize = 1 / numSections

	-- 要求された分数がどのセクションに属するかを決定する
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- セクションの始まりと終わりの色を取得する
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- セクション内で小数を 0 から 1 に正常化する
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- 正規化された分数に基づいて、開始と終了の間の Lerp
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- 最大の割合で新しい健康を計算する
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- バーを新しいサイズ/色ターゲットに減らす
	local tweenGoal = {
		Size = UDim2.new(healthFraction, 0, 1, 0),
		BackgroundColor3 = getColorFromSequence(healthFraction)
	}
	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
	meterBarTween:Play()
end

-- ヒューマノイドの健康状態の変更を検出するListen for changes to humanoid health
humanoid.HealthChanged:Connect(onHealthChanged)

-- 最初にバーサイズ/色を現在の健康状態に再設定/リセットする
onHealthChanged()

キーの追加/変更

行	目的
2	スクリプト内でトウェニング機能を実装するための参照を TweenService を取得します。
10	意図したティーンの期間、TweenInfo 緩和スタイル、および緩和方向を定義するコンストラクターを作成する
52 ‑ 57	前のバージョンのようにバーのサイズと色を設定するのではなく、ターゲットサイズ/色のテーブルを宣言し、およびパラメータを使用して新しいティーンを作成し、新しいティーンを再生します。

今、エクスペリエンスをプレイテストすると、ヘルスの各変更の間のカスタムメーターのティーンが気づくでしょう：

ダメージ効果を追加

デフォルトのヘルスメーターシステムには、キャラクターが損傷したときに画面の端に淡い、微妙な赤色の濁りが含まれています。デフォルトのメーターを無効にすることにより、この効果は除去されますが、自分の実装で置き換えることができます。

以前編集した UpdateCustomMeter スクリプトのスクリプトエディタタブにアクセス。

すべての行を選択し、次のコードで上書きします:

更新カスタムメーター
local Workspace = game:GetService("Workspace")
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

-- ローカルプレイヤー、キャラクター、およびヒューマノイドへの参照
local player = Players.LocalPlayer
local character = player.Character
local humanoid = character:WaitForChild("Humanoid")

-- ティーンプロパティ
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- ストア/キャッシュする変数のキャラクターヘルス
local cachedHealth = humanoid.Health / humanoid.MaxHealth

-- プレイヤーカメラ内で新しい色補正効果を取得する（または作成）
local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
colorCorrection.Name = "DamageColorEffect"

-- メーターバー内フレームへの参照
local playerGui = player:WaitForChild("PlayerGui")
local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

-- グラデーションシーケンスカラー (赤、オレンジ、黄、ライム、緑)
local gradient = {
	Color3.fromRGB(225, 50, 0),
	Color3.fromRGB(255, 100, 0),
	Color3.fromRGB(255, 200, 0),
	Color3.fromRGB(150, 225, 0),
	Color3.fromRGB(0, 225, 50)
}

-- 分数点からグラデーション順序の色を取得する機能
local function getColorFromSequence(fraction: number): Color3
	-- グラデーションの各色は、セクションの始まりと/または終わりを定義します
	local numSections = #gradient - 1

	-- 各セクションは 1 の一部を表します
	local sectionSize = 1 / numSections

	-- 要求された分数がどのセクションに属するかを決定する
	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

	-- セクションの始まりと終わりの色を取得する
	local sectionColorStart = gradient[sectionStartIndex]
	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

	-- セクション内で小数を 0 から 1 に正常化する
	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

	-- 正規化された分数に基づいて、開始と終了の間の Lerp
	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
end

local function onHealthChanged()
	-- 最大の割合で新しい健康を計算する
	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

	-- バーを新しいサイズ/色ターゲットに減らす
	local tweenGoal = {
		Size = UDim2.new(healthFraction, 0, 1, 0),
		BackgroundColor3 = getColorFromSequence(healthFraction)
	}
	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
	meterBarTween:Play()

	-- 新しい健康がキャッシュされた健康より低い場合、ダメージ効果を表示する
	if healthFraction < cachedHealth then
		-- 新しい健康値をキャッシュする
		cachedHealth = healthFraction

		-- 設定色補正を、トーン転換前の初期色として赤に設定する
		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
		colorCorrection.Saturation = 2.5

		-- 色合いを白に戻す (普通からの色合いの変更なし、中立)
		local colorCorrectionTweenGoal = {
			TintColor = Color3.fromRGB(255, 255, 255),
			Saturation = 0
		}
		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
		colorCorrectionTween:Play()
	end
end

-- ヒューマノイドの健康状態の変更を検出するListen for changes to humanoid health
humanoid.HealthChanged:Connect(onHealthChanged)

-- 最初にバーサイズ/色を現在の健康状態に再設定/リセットする
onHealthChanged()

キーの追加/変更

行	目的
14	プレースホルダー参照 ( cachedHealth ) を設定して、変更の間のキャラクターの健康量を追跡し、変更が低いかどうかを比較できます。
17 ‑ 18	最初のキャラクタースポーンでは、プレイヤーの現在の ColorCorrectionEffect 内に新しい Camera を作成するか、後のリスポーンで同じインスタンスにリファレンスを取得します。このポストプロセッシング効果をプレイヤーのカメラに親和させることで、サーバー上のすべてのプレイヤーのスクリーンに適用されるのではなく、ローカルスクリーンにのみ適用されます。
68 ‑ 83	最初に、健康状態の変更が cachedHealth 値より低いことを確認する条件検査を実行し、ダメージを示します; そうなると、cachedHealth を新しい値に設定します。次に、の色合いを（赤）に高い飽和度で設定し、その後、色合いを中性白のデフォルトに戻します（）、飽和度なしです。

今、エクスペリエンスをプレイテストすると、キャラクターがダメージを受けるたびに画面が一瞬赤に点滅することに気づくでしょう：

カスタムメーターバーを別の目的、例えばマナメーターや毒メーターに適応することを決めた場合、TintColor 行の 73 をライトブルーの( ) または毒性の緑の( ) といったイベントに合ったものに変更できます。

ヘルスメーターがこのチュートリアルで表示された外観または動作と一致しない場合は、完了した参照モデルとして UI 基本 - HUD メーターを調査できることを覚えておいてください。