HUDメーターの作成

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

一般的なHUD要素は、左側にアイコンがある健康メーターで、タイマーバー、進捗バー、または同様の何かに適応できます。

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

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

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

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

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

1. スタジオでHazardous Space Stationテンプレートを開きます。

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

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

   

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

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

空のScreenGuiを挿入するには：

1. エクスプローラーウィンドウで、StarterGuiコンテナを見つけます。

   

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

   

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

   

セーフエリアを活用する

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

プレイヤーがすべてのUIを障害物なしに見たりアクセスしたりできるようにするために、RobloxはScreenInsetsプロパティを提供しており、ScreenGuiの内容のセーフエリアのインセットを制御します。ScreenGui内に配置するすべてのUIオブジェクトは、インセットBoundsに対して相対的です。

CoreUISafeInsetsのデフォルト設定はすべてのUIオブジェクトをRoblox UIとデバイスの切り欠きからクリアに保つことを保証しますが、DeviceSafeInsetsは限られた画面スペースを有効に活用するのに優れた選択肢です。

1. エクスプローラーウィンドウで、HUDContainerを選択します。

   

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

   

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

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

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

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

   

2. 新しいUIPaddingオブジェクトを選択し、コンテナのすべてのエッジに<Typography noWrap>0, 16</Typography> を入力します（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の値を含んでいます：

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

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

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

1. エクスプローラーウィンドウで、前に挿入したMeterBarフレームを選択します。

   

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

3. AnchorPointプロパティに1, 0を入力します。フレームは今やデバイスセーフエリアの右上隅に配置され、パディングの結果としてわずかに端から内側になります。

   

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

位置と同様に、UIオブジェクトのSizeはUDim2座標セットであり、XおよびY軸に対してScaleとOffsetの値を含んでいます。

デフォルトでは、新しいフレームのサイズは{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を入力します。スタジオはこれを自動的に[0, 0, 0]のRGB値に変換します。

2. BackgroundTransparencyプロパティに0.75を入力します。Robloxでは、透明度は0（完全不透明）から1（完全透明）までの範囲を持ち、したがって0.75は他のアプリケーションで25%の不透明度に相当します。

   

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

   

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

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

   

メーターのフレームスタイルを完成させるために、コーナーを丸めて sharp rectangular の代わりに「ピル」形状にすることができます。

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. 親フレームの「ピル」形状に一致させるために、追加のUICornerをInnerFillに挿入します。

   

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

   

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

   

アイコンを追加する

メーターの目的をより明確に示すために、健康や命を象徴するレッドハートの画像ラベルを左側に追加することができます。

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

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. エクスプローラーウィンドウで、StarterPlayerコンテナを展開し、その中にあるStarterPlayerScriptsコンテナを見つけます。

   

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

   

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

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

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- デフォルトの健康メーターを隠します
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   コードの説明

   行	目的
   1	プレーヤーが体験に参加する際に、デフォルトの健康メーターの内容がPlayerGuiコンテナにクローンされるStarterGuiというコアサービスへの参照を取得します。
   4	サービスのSetCoreGuiEnabled()メソッドを呼び出し、デフォルトの健康メーターを無効化（false）します。

体験をプレイテストすると、ダメージを受けてもデフォルトメーターが無効になり隠れることに気づくでしょう（カスタムメーターが次のセクションで健康変化を反映するスクリプト化をします）。

健康変化を監視する

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

1. エクスプローラーウィンドウで、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()関数を呼び出す主なevent接続です。
   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テーブルを定義して、新しいツイーンを作成し、それを再生します。

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

ダメージ効果を追加する

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

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を新しい値に設定します。次に、色補正の色合いを[255, 25, 25]（赤）に設定し、サチュレーションを上げ、色合いをデフォルトの中立的な白（[255, 255, 255]）にツイーンします。

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