HUDメーターの作成

HUD（ヘッドアップディスプレイ）は、スコア表示、健康メーター、メニューボタンなど、ゲームプレイ中に常に表示またはアクセス可能なUI要素のセットです。HUDを含めることは、プレイヤーがゲームプレイの目標を達成するために役立つ情報を表示するため、ほとんどのゲームにとって不可欠です。

一般的なHUD要素は、左側にアイコンがあり、タイマーバー、プログレスバー、またはそれに類似したものに適応できる健康メーターです。

Hazardous Space Stationを出発点として、UI Fundamentals - HUD Meterを完成した参照地点として、このチュートリアルでは以下を示します：

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

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

Robloxは本質的にクロスプラットフォームであり、プレイヤーは電話やタブレットでゲームを発見して参加し、その後PCやコンソールで続けることができます。モバイルデバイス（電話やタブレット）は画面スペースが最も少ないため、UI要素が小さな画面に収まるようにし、プレイヤーに明確に表示されることが重要です。

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

1. StudioでHazardous Space Stationテンプレートを開きます。

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

3. メインビューポートのすぐ上のバーから、iPhone XやSamsung Galaxy A51などの電話エミュレーションを選択します。次に、表示サイズをウィンドウにフィットに設定して、Studio内の最大スペースを利用します。

   

スクリーンコンテナを作成する

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

空のScreenGuiを挿入するには：

1. Explorerウィンドウで、StarterGuiコンテナを見つけます。

   

2. コンテナの上にカーソルを合わせ、⊕ボタンをクリックして、ScreenGuiを挿入します。

   

3. 新しいコンテナの名前をHUDContainerに変更して、その目的を反映させます。

   

セーフエリアを利用する

現代の電話は画面全体を活用しますが、通常はノッチ、切り欠き、その他の要素が画面スペースを占有します。すべてのRobloxゲームには、メインメニュー、チャット、リーダーボードなどに迅速にアクセスするための上部バーコントロールも含まれています。

プレイヤーがすべてのUIを妨げられることなく見ることができ、アクセスできるようにするために、RobloxはScreenInsetsプロパティを提供しています。これは、ScreenGuiの内容のセーフエリアインセットを制御します。ScreenGui内に配置するすべてのUIオブジェクトは、インセットの境界に対して相対的です。

CoreUISafeInsetsのデフォルトは、すべてのUIオブジェクトがRobloxのUIやデバイスの切り欠きからクリアされることを保証しますが、DeviceSafeInsetsは、限られた画面スペースを利用するためのより良いオプションとなる場合があります。以下に示すように。

1. Explorerウィンドウで、HUDContainerを選択します。

   

2. プロパティウィンドウで、ScreenInsetsプロパティをDeviceSafeInsetsに設定します。

   

エッジパディングを設定する

ScreenInsetsがDeviceSafeInsetsに設定されると、コンテンツは画面の物理的な上端まで直接拡張できます。ただし、少量のパディングを追加することで、健康メーター（およびコンテナ内の他のオブジェクト）を画面のエッジから少し離して、クリーンな外観を保ち、クリッピングを防ぐことができます。

UIコンテナにパディングを適用する1つの方法は、UIPaddingモディファイアを挿入することです：

1. HUDContainerにUIPaddingモディファイアを挿入します。

   

2. 新しいUIPaddingオブジェクトが選択されている状態で、コンテナのすべてのエッジに対して0, 16の値を入力します（PaddingBottom、PaddingLeft、PaddingRight、PaddingTop）。これにより、画面の解像度に関係なく、コンテナの周りに16ピクセルのパディングが適用されます。

   

健康メーターを構築する

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

親フレームを作成する

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

1. HUDContainerにFrameを挿入します。新しいフレームは、空の白い四角として左上隅に表示されます。

   

   新しいフレームがビューポートに表示されない場合は、3Dビューポートの右上隅にある視覚化オプションウィジェットからGUI オーバーレイがオンになっていることを確認してください。

2. 新しいフレームインスタンスの名前をMeterBarに変更します。

   

フレームの位置を設定する

Robloxでは、UIオブジェクトの位置は、XおよびY軸の両方に対してUDim2座標セットで表されます：

• Scale値は、対応する軸に沿ったコンテナのサイズのパーセンテージを表し、Offset値が加算されます。
• Offset値は、対応する軸に沿ってオブジェクトをシフトするピクセル数を表し、Scale値が加算されます。

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

さらに、親フレームのアンカーポイントを右上に設定して、その原点を定義する必要があります。許可される値は0から1の間で、オブジェクトのサイズに対して相対的です。したがって、アンカー値1, 0は、フレームのアンカーポイントを右上隅に配置します。

1. Explorerウィンドウで、以前に挿入したMeterBarフレームを選択します。

   

2. プロパティウィンドウで、Positionに1, 0, 0, 0を入力し、Enterを押します。Studioは自動的にブラケットを追加してUDim2の{1, 0},{0, 0}を形成します。

3. AnchorPointプロパティに1, 0を入力します。フレームは、セーフエリアの右上隅に配置され、パディングの結果としてエッジからわずかにインデントされるはずです。

   

フレームのサイズを変更する

位置と同様に、UIオブジェクトのSizeは、XおよびY軸の両方に対してUDim2座標セットで表されます。

デフォルトでは、新しいフレームのサイズは{0, 100},{0, 100}であり、幅（X）と高さ（Y）の両方で100 ピクセルを意味します。厳密なピクセル値は特定のケースで便利ですが、多くのUI要素は、全体のスクリーンコンテナサイズのパーセンテージに設定されると、複数の画面でより応答性が高くなります。

1. MeterBarフレームが選択されている状態で、プロパティウィンドウにアクセスし、Sizeプロパティに移動します。

2. 幅が35%、高さが5%で、追加のピクセルオフセットがないように、0.35, 0, 0.05, 0の値を入力します。

   

フレームのスタイルを設定する

デフォルトでは、Framesは無地の白で塗りつぶされています。最終的な健康メーターは、より暗く、わずかに不透明な塗りつぶしと、暗いアウトラインを持つべきであり、明るい背景と暗い背景の両方でより目立つようにします。

1. MeterBarフレームが選択されている状態で、BackgroundColor3プロパティに0を入力します。Studioは自動的にこれをRGB値の[0, 0, 0]に変換します。

2. BackgroundTransparencyプロパティに0.75を入力します。Robloxでは、透明度は0が完全に不透明で、1が完全に透明であるため、0.75は他のアプリケーション（FigmaやPhotoshopなど）で25%の不透明度に相当します。

   

3. フレームにカスタマイズ可能なストロークを追加する強力なUIモディファイアであるUIStrokeオブジェクトを挿入します。

   

4. 新しいUIStrokeが選択されている状態で、以下のプロパティを設定します：

   • Thickness = 3
   • Transparency = 0.25（75%不透明）

   

メーターのフレームのスタイリングを最終化するために、コーナーを丸めて鋭い長方形ではなく「ピル」形状にすることができます。

1. MeterBarフレームにUICornerインスタンスを挿入します。

   

2. 新しいUICornerが選択されている状態で、CornerRadiusを0.5, 0に設定します。スケール値を0.5（50%）にすることで、コンテナがどれだけ高くても幅があっても、完全に丸い曲線を確保できます。

   

内部フィルを作成する

健康メーターのコンテナフレームが完成したので、キャラクターの可変健康を表す内部フィル部分を追加できます。これは、単に塗りつぶされた領域であるため、親フレーム内にサブ子Frameが適しています。

1. MeterBarフレームに子Frameを挿入します。

2. 新しいフレームインスタンスの名前をInnerFillに変更します。

   

3. InnerFillが選択されている状態で、以下のプロパティを設定します：

   • AnchorPoint = 0, 0.5（左端と垂直中央）
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   フレームの子は親に対して配置され、サイズが設定されるため、スケールを使用すると、内部フレームが親の幅と高さを完全に埋め、親の左端から始まります。

   

4. 親フレームの「ピル」形状に合わせるために、InnerFillに追加のUICornerを挿入します。

   

5. 新しいUICornerモディファイアが選択されている状態で、CornerRadiusプロパティを0.5, 0に設定して、親MeterBarフレームの「ピル」形状に合わせます。

   

6. メーターが完全であることを示すために、InnerFillを選択し、BackgroundColor3プロパティを[0, 225, 50]に設定します（後のタスクで、実際の健康に基づいてこの色をスクリプトします）。

   

アイコンを追加する

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

1. MeterBarフレームにImageLabelを挿入します。このオブジェクトを使用すると、Robloxにデカールとしてアップロードされた2D画像アセットを適用できます。

2. 新しいラベルインスタンスの名前をIconに変更します。

   

3. Iconが選択されている状態で、ZIndexプロパティを2に設定します。新しく挿入されたUIオブジェクトは常に以前に挿入されたオブジェクトの前にレイヤーされますが、この変更により、アイコンがメーターのフレーム要素の前に常に表示されることが保証されます。

   

4. アイコンのImageプロパティを見つけ、rbxassetid://91715286435585を入力します。これは、事前にアップロードされたハート画像への参照です（必要に応じて、独自の画像をインポートして、そのアセットIDを使用できます）。

   

5. アイコンのImageLabelが常に1:1のアスペクト比を維持するように、UIAspectRatioConstraintを挿入します。この制約にはアスペクト比を制御するためのカスタマイズ可能なプロパティがありますが、デフォルト値をそのままにしておくことができます。

   

6. Iconが選択されている状態で、以下のプロパティを変更して外観と位置を最終化します：

   • AnchorPoint = 0.5, 0.5（中央アンカー）
   • BackgroundTransparency = 1（100%透明）
   • Position = 0, 0, 0.5, 0（メーターの左側と垂直中央）
   • Size = 2, 0, 2, 0（MeterBarフレームの全体のサイズの200%、UIAspectRatioConstraintによって1:1に制約されます）

   

サイズを制約する

フレームのサイズを変更するセクションでの0.05（5%）のスケール高さは、16:9のアスペクト比またはそれ以上の現代の電話画面やゲームモニターでは良好に見えますが、タブレット画面や古い電話ではメーターが少し高すぎるように見えるかもしれません。デバイスエミュレーターからiPad 7th Generationのようなタブレットをエミュレートしてこれを確認できます。

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

1. MeterBarフレームにUISizeConstraintを挿入します。

   

2. 新しい制約が選択されている状態で、MaxSizeプロパティをinf, 20に設定して、高さを20ピクセルに制限し、幅の制限は課さないようにします。

   

これで、メーターバーは幅のある画面と高い画面の間でより一貫した高さを維持します。

デフォルトの健康メーターを置き換える

Robloxゲームには、キャラクターがダメージを受けたときに表示されるデフォルトの健康メーターが含まれています。デフォルトのメーターを表示したままにすると、カスタムメーターが重複して重なってしまいます。

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

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

1. Explorerウィンドウで、StarterPlayerコンテナを展開し、その中にあるStarterPlayerScriptsコンテナを見つけます。

   

2. コンテナに新しいLocalScriptを挿入し、その目的を説明するためにHideDefaultHealthMeterに名前を変更します。StarterPlayerScripts内のスクリプトは、ローカルプレイヤーがゲームに参加すると自動的に実行されるため、デフォルトメーターを永続的に非表示にするスクリプトを実行するのに理想的なコンテナです。

   

3. 新しいスクリプトを挿入すると、自動的に新しいスクリプトエディタタブが開きます（開かない場合は、Explorerウィンドウでスクリプトをダブルクリックします）。

   HideDefaultHealthMeterスクリプト内に以下のコードを貼り付けます：

   HideDefaultHealthMeter

   local StarterGui = game:GetService("StarterGui")
   
   -- デフォルトの健康メーターを非表示にする
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   コードの説明

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

今、ゲームをプレイテストすると、デフォルトのメーターが無効になり、隠れていることに気付くでしょう（次のセクションで、カスタムメーターが健康の変化を反映するようにスクリプトを作成します）。

健康の変化を監視する

すべてのデフォルトのRobloxキャラクターモデルには、キャラクターに特別な動作や機能を提供するHumanoidクラスが含まれています。これには、歩行/走行速度の設定や健康の管理が含まれます。Healthの変更はサーバーから各プレイヤーのクライアントに複製され、これらの変更を検出してカスタム健康メーターのサイズと色を更新できます。

1. Explorerウィンドウで、StarterPlayer内のStarterCharacterScriptsコンテナを見つけます。

   

2. コンテナに新しいLocalScriptを挿入し、その目的を説明するためにUpdateCustomMeterに名前を変更します。StarterCharacterScripts内のスクリプトは、プレイヤーのキャラクターがスポーンするたびに自動的に実行されるため、各リスポーン時に健康メーターを完全にリセットするスクリプトを実行するのに理想的なコンテナです。

   

3. UpdateCustomMeterスクリプトのエディタウィンドウに、以下のコードを貼り付けます：

   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
   
   	-- 正規化された分数に基づいて始まりと終わりの間を補間します
   	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
   
   -- ヒューマノイドの健康の変化を監視します
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- 初期設定（またはリセット）バーのサイズ/色を現在の健康に設定します
   onHealthChanged()

   コードの説明

   行	目的
   4‑6	ローカルPlayer、そのCharacterモデル、およびその中のHumanoidクラスへの参照を取得します。
   9‑10	メーターのInnerFillオブジェクトへの参照を取得します。これは、健康が変化するたびにサイズ変更および再着色される必要があります。
   13‑19	メーターをさまざまなポイントで再着色するために、5つの色（赤、オレンジ、黄色、ライム、緑）の配列を宣言します。たとえば、100%の健康には緑、50%には黄色、0%には赤、またはキーポイントの間の任意の分数でのブレンドを示します。
   22‑41	任意のグラデーション色キーポイント間の色のブレンドを返すヘルパー関数。
   43‑50	健康の変化を処理する関数。ここでは、キャラクターのMaxHealthのパーセンテージとして新しい健康を計算し、InnerFillをそのスケールパーセンテージにサイズ変更し、getColorFromSequence()関数から返された色に再着色します。
   53	サーバーから複製されたHealthの変化を検出し、onHealthChanged()関数を呼び出すメインイベント接続。
   56	初期設定（キャラクターのスポーンまたはリスポーン時）で、onHealthChanged()関数を呼び出してInnerFillのサイズと色を正しいパーセンテージに設定します。通常、これは全幅で緑になります。

今、ゲームをプレイテストすると、カスタムメーターがダメージを受けると正しくサイズと色を更新することに気付くでしょう：

メーターバーをアニメーション化する

カスタムメーターにさらなる洗練を加えるために、ツイーニングを通じて健康の変化をアニメーション化し、メーターバーのサイズと色を0.5秒かけて徐々に変化させることができます。

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

2. すべての行を選択し（CtrlAまたは⌘A）、次にそれらを以下のコードで上書きします（CtrlVまたは⌘V）：

   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
   
   	-- 正規化された分数に基づいて始まりと終わりの間を補間します
   	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
   
   -- ヒューマノイドの健康の変化を監視します
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- 初期設定（またはリセット）バーのサイズ/色を現在の健康に設定します
   onHealthChanged()

   主な追加/変更

   行	目的
   2	TweenServiceへの参照を取得し、スクリプト内でツイーニング機能を実装します。
   10	ツイーンの持続時間、イージングスタイル、およびイージング方向を定義するTweenInfoコンストラクタを作成します。
   52‑57	以前のバージョンでは、単にバーのサイズと色を設定するのではなく、ターゲットサイズ/色を持つtweenGoalテーブルを宣言し、tweenInfoとtweenGoalパラメータを使用して新しいツイーンを作成し、その新しいツイーンを再生します。

今、ゲームをプレイテストすると、カスタムメーターが健康の各変化の間でツイーンすることに気付くでしょう：

ダメージ効果を追加する

デフォルトの健康メーターシステムには、キャラクターがダメージを受けたときに画面の端に短い微妙な赤い色合いが含まれています。デフォルトメーターを無効にすることで、この効果は削除されますが、独自の実装で置き換えることができます。

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

2. すべての行を選択し、以下のコードで上書きします：

   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
   
   	-- 正規化された分数に基づいて始まりと終わりの間を補間します
   	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
   
   -- ヒューマノイドの健康の変化を監視します
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- 初期設定（またはリセット）バーのサイズ/色を現在の健康に設定します
   onHealthChanged()

   主な追加/変更

   行	目的
   14	キャラクターの健康量を変更間で追跡するためのプレースホルダー参照（cachedHealth）を設定し、変更が低い（ダメージ）かどうかを比較できるようにします。
   17‑18	初期キャラクタースポーン時に、プレイヤーの現在のCamera内に新しいColorCorrectionEffectを作成するか、後のリスポーン時に同じインスタンスへの参照を取得します。このポストプロセッシング効果をプレイヤーのカメラに親子関係を持たせることで、他のプレイヤーの画面ではなく、ローカル画面にのみ適用されます。
   68‑83	最初に健康の変化がcachedHealth値よりも低いことを確認する条件チェックを実行し、ダメージを示します。そうであれば、cachedHealthを新しい値に設定します。次に、ColorCorrectionEffectの色合いを[255, 25, 25]（赤）に設定し、より高い彩度を持たせ、次にデフォルトの中立的な白（[255, 255, 255]）にツイーンします。

今、ゲームをプレイテストすると、キャラクターがダメージを受けるたびに画面が一瞬赤くフラッシュすることに気付くでしょう：