ロブロックス(Roblox)スタジオで体力ゲージと回復アイテムを作る方法|HPバー・ダメージ床・回復を画像で解説

制作手順難易度: 中級所要時間: 約45分(目安)情報確認日: 2026年10月18日

「自分のゲームに、体力ゲージ(HPバー)を出したい」「体力が減ったら、拾って回復できるアイテムを置きたい」

ロブロックス(Roblox)スタジオで、体力ゲージと回復アイテムを作る方法を、実際の画像付きで誰でも簡単に分かるように解説します。この記事では、踏むと体力が減る赤い床、触ると回復する緑の箱、画面の下に出る体力ゲージの3つを作ります。回復アイテムはフォルダーにまとめるので、いくつ置いてもスクリプトは1つで済みます。

中級ステップ21/28 前の記事:ロブロックス(Roblox)スタジオで夜にする方法 全体の順番を見る

使うもの:Roblox Studioが起動するパソコン、マウス、キーボード。画面にボタンや文字を出すScreenGuiの使い方は、ボタンの作り方と同じです。体力が減る仕組みは、追いかけてくる敵の作り方でも使いました。

今回の完成状態:下の画像のように、緑の箱に触ると箱がうすくなり(画像の1)、画面の下の体力ゲージが長くなれば成功です(画像の2)。

体力のしくみと、作る部品

ロブロックスのキャラクターの体力は、体の中の「Humanoid」の Health が持っています。最初は100で、上限は MaxHealth(最初は100)です。Robloxの公式の説明によると、体力が0になるとキャラクターは倒れ、生き返ります。また、何もしなくても、1秒にMaxHealthの1%ずつ体力が戻ります。

名前置く場所役目
DamagePad(Part)とDamageScriptWorkspace踏むと体力が20減る赤い床(試し用)
HealthPickups(Folder)Workspace回復アイテムをまとめる入れ物
HealthPack(Part)HealthPickupsの中触ると体力が30戻る緑の箱
PickupManager(Script)ServerScriptServiceフォルダーの中の箱に、まとめて回復の動きを付ける
HealthGui(ScreenGui)とMeterBar・Fill・HealthTextStarterGui画面の下の体力ゲージ
HealthBar(LocalScript)HealthGuiの中体力に合わせて、ゲージの長さと数字を変える

1. 体力が減る床を置く

新しいBaseplateを開き、エクスプローラの「Workspace」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Part」と入れ、一覧の「Part」を押します(赤い枠)。

エクスプローラで「Part」を押して選び、F2キーを押して名前を「DamagePad」に変えます(赤い枠)。

プロパティの検索欄に「Size」と入力し、Sizeに「8, 1, 8」と入力します(赤い枠)。

プロパティの検索欄に「Position」と入力し、CFrameの中のPositionに「-10, 0.5, -14」と入力します(赤い枠)。床がスポーン地点の左奥に移ります。

プロパティの検索欄に「Color」と入力し、Colorに「220, 50, 50」と入力します(赤い枠)。

プロパティの検索欄に「Anchored」と入力し、Anchoredにチェックを入れます(赤い枠)。

2. 床にダメージのスクリプトを入れる

エクスプローラの「DamagePad」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Script」と入れ、一覧の「Script」を押します(赤い枠)。

DamagePadの中にScriptが入り、中身の画面が開きます。エクスプローラで「Script」を押して選び、F2キーを押して名前を「DamageScript」に変えます(赤い枠)。

開いているDamageScriptの画面で、中身を全部消して、次のコードを貼り付けます。

local pad = script.Parent

local DAMAGE = 20 -- 1回で減る体力
local COOLDOWN = 1 -- 同じ人が続けて減らないように待つ秒数

local lastHit = {} -- 人ごとに、最後に減らした時刻を覚えておく

pad.Touched:Connect(function(hit)
	local humanoid = hit.Parent:FindFirstChildWhichIsA("Humanoid")
	if not humanoid or humanoid.Health <= 0 then
		return
	end
	local now = os.clock()
	if lastHit[humanoid] and now - lastHit[humanoid] < COOLDOWN then
		return
	end
	lastHit[humanoid] = now
	humanoid:TakeDamage(DAMAGE)
end)

TakeDamage は、体力を決めた数だけ減らす命令です。Robloxの公式の説明によると、ForceField(スポーンした直後などに出る守りの光)があるあいだは減りません。足が床に触れるたびにTouchedが何度も起きるので、同じ人は1秒あけてから次を減らすようにしています。

3. 回復アイテムを入れるフォルダーを作る

Robloxの公式のチュートリアルでは、回復アイテムを1つのフォルダーにまとめ、スクリプト1つでフォルダーの中の全部に同じ動きを付けています。箱ごとにスクリプトを入れると、あとで直すときに全部の箱のスクリプトを直すことになるからです。

エクスプローラの「Workspace」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Folder」と入れ、一覧の「Folder」を押します(赤い枠)。

エクスプローラで「Folder」を押して選び、F2キーを押して名前を「HealthPickups」に変えます(赤い枠)。

4. 回復アイテムを置く

エクスプローラの「HealthPickups」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Part」と入れ、一覧の「Part」を押します(赤い枠)。

HealthPickupsの中にPartが入ります。エクスプローラで「Part」を押して選び、F2キーを押して名前を「HealthPack」に変えます(赤い枠)。

プロパティの検索欄に「Size」と入力し、Sizeに「2, 2, 2」と入力します(赤い枠)。

プロパティの検索欄に「Position」と入力し、CFrameの中のPositionに「8, 2, -14」と入力します(赤い枠)。箱がスポーン地点の右奥に浮かびます。

プロパティの検索欄に「Color」と入力し、Colorに「60, 220, 100」と入力します(赤い枠)。

プロパティの検索欄に「Material」と入力し、Materialを「Neon」にします(赤い枠)。箱が光って見え、遠くからでも見つけやすくなります。

プロパティの検索欄に「Anchored」と入力し、Anchoredにチェックを入れます(赤い枠)。

プロパティの検索欄に「CanCollide」と入力し、CanCollideのチェックを外します(赤い枠)。箱にぶつかって止まらず、通り抜けながら触れるようにします。

エクスプローラで「HealthPack」を押して選び、Ctrl + Dキーを押します。同じ設定の「HealthPack」がもう1つでき(画像の1)、同じ場所に重なって置かれます(画像の2)。

2つ目のHealthPackが選ばれたまま、プロパティの検索欄に「Position」と入力し、CFrameの中のPositionに「14, 2, -14」と入力します(画像の1)。箱が2つ並びます(画像の2)。

5. 回復のスクリプトを入れる

エクスプローラの「Workspace」の左の「▼」を押して閉じます。「ServerScriptService」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Script」と入れ、一覧の「Script」を押します(赤い枠)。

ServerScriptServiceの中にScriptが入ります。エクスプローラで「Script」を押して選び、F2キーを押して名前を「PickupManager」に変えます(赤い枠)。

開いているPickupManagerの画面で、中身を全部消して、次のコードを貼り付けます。

local HEAL = 30 -- 1つで回復する体力
local RESPAWN_TIME = 5 -- 取ってから元に戻るまでの秒数

local pickupsFolder = workspace:WaitForChild("HealthPickups")

local function onTouchPickup(hit, pickup)
	if pickup:GetAttribute("Used") then
		return
	end
	local humanoid = hit.Parent:FindFirstChildWhichIsA("Humanoid")
	if not humanoid or humanoid.Health <= 0 or humanoid.Health >= humanoid.MaxHealth then
		return
	end
	-- 上限(MaxHealth)をこえないように回復する
	humanoid.Health = math.min(humanoid.Health + HEAL, humanoid.MaxHealth)

	pickup:SetAttribute("Used", true)
	pickup.Transparency = 0.8 -- うすくして、取ったことを分かるようにする
	task.wait(RESPAWN_TIME)
	pickup.Transparency = 0
	pickup:SetAttribute("Used", false)
end

-- フォルダーの中の回復アイテムに、まとめて同じ動きを付ける
for _, pickup in pickupsFolder:GetChildren() do
	pickup.Touched:Connect(function(hit)
		onTouchPickup(hit, pickup)
	end)
end
行していること
pickupsFolder:GetChildren()フォルダーの中の箱を全部取り出す。箱を増やしても、このスクリプトは直さなくてよい
humanoid.Health >= humanoid.MaxHealth体力が満タンの人は、箱を使わない
math.min(..., humanoid.MaxHealth)足した体力が上限の100をこえないようにする
SetAttribute("Used", true)取ったばかりの箱に印を付けて、RESPAWN_TIMEで決めた5秒は反応しないようにする

Robloxの公式のチュートリアルでは、箱に触ると体力を満タン(100)にしています。この記事では、30だけ回復し、満タンの人は箱を取らないようにしました。何度も拾いたくなる回復アイテムにするための変更です。

6. 体力ゲージの枠を作る

エクスプローラの「StarterGui」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「ScreenGui」と入れ、一覧の「ScreenGui」を押します(赤い枠)。

エクスプローラで「ScreenGui」を押して選び、F2キーを押して名前を「HealthGui」に変えます(赤い枠)。

エクスプローラの「HealthGui」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Frame」と入れ、一覧の「Frame」を押します(赤い枠)。

HealthGuiの中にFrameが入り(画像の1)、3D画面の左上に白い四角が出ます(画像の2)。

エクスプローラで「Frame」を押して選び、F2キーを押して名前を「MeterBar」に変えます(赤い枠)。

プロパティの検索欄に「AnchorPoint」と入力し、AnchorPointに「0.5, 1」と入力します(赤い枠)。四角の位置を決めるときの基準が、四角の「下の真ん中」になります。

プロパティの検索欄に「Position」と入力し、Positionに「0.5, 0, 1, -30」と入力します(赤い枠)。四角が画面の下の真ん中に移ります。

Positionの4つの数は、左から「横の割合, 横のずらし, 縦の割合, 縦のずらし」です。横0.5は画面の横の半分、縦1は画面のいちばん下、-30は30ピクセル上へずらす、という意味です。割合で決めるので、画面の大きさが違っても下の真ん中に出ます。

プロパティの検索欄に「Size」と入力し、Sizeに「0, 300, 0, 28」と入力します(画像の1)。横300ピクセル、縦28ピクセルの細長い帯になります(画像の2)。

プロパティの検索欄に「BackgroundColor3」と入力し、BackgroundColor3に「40, 40, 40」と入力します(赤い枠)。帯が黒っぽくなります。体力が減ったときに見える、ゲージの「空いた部分」の色です。

7. 緑の帯(体力の量)を入れる

エクスプローラの「MeterBar」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Frame」と入れ、一覧の「Frame」を押します(赤い枠)。

MeterBarの中にFrameが入ります。エクスプローラで「Frame」を押して選び、F2キーを押して名前を「Fill」に変えます(赤い枠)。

プロパティの検索欄に「Size」と入力し、Sizeに「1, 0, 1, 0」と入力します(赤い枠)。Fillが、MeterBarの中いっぱいに広がります。

プロパティの検索欄に「BackgroundColor3」と入力し、BackgroundColor3に「60, 200, 90」と入力します(画像の1)。帯が緑になります(画像の2)。

MeterBarの中に入れたので、FillのSizeの「1」はMeterBarの横幅の100%という意味になります。スクリプトで体力が半分になったら0.5にすると、緑の帯が半分の長さになります。

8. 体力の数字を出す

エクスプローラの「MeterBar」の「+」を押し、一覧の検索欄に「TextLabel」と入れて、一覧の「TextLabel」を押します(赤い枠)。

MeterBarの中にTextLabelが入ります。エクスプローラで「TextLabel」を押して選び、F2キーを押して名前を「HealthText」に変えます(赤い枠)。

プロパティの検索欄に「Size」と入力し、Sizeに「1, 0, 1, 0」と入力します(赤い枠)。

プロパティの検索欄に「BackgroundTransparency」と入力し、BackgroundTransparencyに「1」と入力します(赤い枠)。文字の後ろの白い四角が消え、緑の帯が見えるようになります。

プロパティの検索欄に「Text」と入力し、Textに「100 / 100」と入力します(赤い枠)。テストを始めるとスクリプトが書きかえるので、ここでは見た目の確かめ用です。

プロパティの検索欄に「TextColor3」と入力し、TextColor3に「255, 255, 255」と入力します(赤い枠)。文字が白になります。

プロパティの検索欄に「TextScaled」と入力し、TextScaledにチェックを入れます(画像の1)。文字が帯の高さに合わせて大きくなります(画像の2)。

プロパティの検索欄に「ZIndex」と入力し、ZIndexに「2」と入力します(赤い枠)。最初は1です。数が大きい物ほど前に出るので、文字が緑の帯に隠れなくなります。

9. ゲージを動かすスクリプトを入れる

エクスプローラの「MeterBar」の左の「▼」を押して閉じます。「HealthGui」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「LocalScript」と入れ、一覧の「LocalScript」を押します(赤い枠)。

HealthGuiの中にLocalScriptが入ります。エクスプローラで「LocalScript」を押して選び、F2キーを押して名前を「HealthBar」に変えます(赤い枠)。

開いているHealthBarの画面で、中身を全部消して、次のコードを貼り付けます。

local Players = game:GetService("Players")
local StarterGui = game:GetService("StarterGui")

local gui = script.Parent
local meter = gui:WaitForChild("MeterBar")
local fill = meter:WaitForChild("Fill")
local label = meter:WaitForChild("HealthText")

-- Robloxの最初からある体力ゲージ(右上)をかくす
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

local RED = Color3.fromRGB(230, 60, 60)
local GREEN = Color3.fromRGB(60, 200, 90)

local function update(humanoid)
	local ratio = math.clamp(humanoid.Health / humanoid.MaxHealth, 0, 1)
	fill.Size = UDim2.fromScale(ratio, 1) -- 体力の割合だけ、緑の帯をのばす
	fill.BackgroundColor3 = RED:Lerp(GREEN, ratio) -- 減るほど赤に近づける
	label.Text = math.ceil(humanoid.Health) .. " / " .. humanoid.MaxHealth
end

local function onCharacter(character)
	local humanoid = character:WaitForChild("Humanoid")
	update(humanoid)
	humanoid.HealthChanged:Connect(function()
		update(humanoid)
	end)
end

local player = Players.LocalPlayer
if player.Character then
	onCharacter(player.Character)
end
player.CharacterAdded:Connect(onCharacter)
行していること
SetCoreGuiEnabled(...Health, false)Robloxが右上に出す体力ゲージを消し、自分のゲージだけにする
humanoid.Health / humanoid.MaxHealth体力の割合(満タンなら1、半分なら0.5)を出す
UDim2.fromScale(ratio, 1)緑の帯の横の長さを、体力の割合にする
RED:Lerp(GREEN, ratio)体力が減るほど、帯の色を緑から赤に近づける
HealthChanged体力が変わるたびに、ゲージを書きかえる
CharacterAdded倒れて生き返ったあとの新しい体にも、同じ動きを付ける

ゲージはプレイヤーごとに違う画面に出すので、LocalScriptで動かします。体力を減らしたり戻したりするのは、サーバーで動くScript(DamageScriptとPickupManager)です。

10. テストで確かめる

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます(タブの名前はパソコンによって違います)。画面の下に、緑のゲージと「100 / 100」が出ます(赤い枠)。

右上の名前の欄はモザイクにしています。

赤い床に乗ると(画像の1)、体力が減って、緑の帯が短くなります(画像の2)。この画像は、乗ってから少したって撮ったので、自然に戻った分が足されて84になっています。

何度か乗って体力を減らすと、帯がさらに短くなり、色が緑から黄色っぽくなります(赤い枠)。

緑の箱に触ると、箱がうすくなり(画像の1)、体力が30戻ってゲージが長くなります(画像の2)。この画像は、別の回に赤い床で体力を減らしてから箱に触ったときのものです。

5秒たつと、うすくなった箱が元の色に戻り、また拾えるようになります(赤い枠)。

試したこと結果
テストを始める画面の下に「100 / 100」の緑のゲージ
赤い床に乗る体力が20減り、帯が短くなる。右上にRobloxの体力ゲージは出なかった
何度か乗る56まで下がり、帯の色が黄色っぽくなった
緑の箱に触る30戻り、箱がうすくなった
5秒待つ箱が元の色に戻った
何もしないで待つ1秒に1ずつ体力が戻った(Robloxの自動回復)

確かめ終わったら、Shift + F5キーでテストを停止します。

ゲージをなめらかに動かし、ダメージで画面を赤くする

今のゲージは、体力が減った瞬間にパッと短くなります。Robloxの公式のチュートリアルでは、TweenService(トゥイーンサービス)で0.5秒かけてなめらかに動かし、ダメージを受けたときに画面を一瞬赤くする作り方が紹介されています。

エクスプローラでHealthGuiの中の「HealthBar」をダブルクリックして開きます。コードの画面の中を押してからCtrl+Aキーで全部選び、Deleteキーで消して、次のコードに貼りかえます。

local Players = game:GetService("Players")
local StarterGui = game:GetService("StarterGui")
local TweenService = game:GetService("TweenService")

local gui = script.Parent
local meter = gui:WaitForChild("MeterBar")
local fill = meter:WaitForChild("Fill")
local label = meter:WaitForChild("HealthText")

-- Robloxの最初からある体力ゲージ(右上)を消す
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

local RED = Color3.fromRGB(230, 60, 60)
local GREEN = Color3.fromRGB(60, 200, 90)

-- 0.5秒かけて、はじめは速く、最後はゆっくり動かす
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

-- 画面全体の色を変える部品(ダメージのときに赤くする)
local camera = workspace.CurrentCamera
local damageEffect = Instance.new("ColorCorrectionEffect")
damageEffect.Name = "DamageColorEffect"
damageEffect.Parent = camera

local lastHealth = nil -- 前の体力(減ったかどうかを比べる)

local function update(humanoid)
	local ratio = math.clamp(humanoid.Health / humanoid.MaxHealth, 0, 1)
	-- 帯の長さと色を、0.5秒かけてなめらかに変える
	TweenService:Create(fill, tweenInfo, {
		Size = UDim2.fromScale(ratio, 1),
		BackgroundColor3 = RED:Lerp(GREEN, ratio),
	}):Play()
	label.Text = math.ceil(humanoid.Health) .. " / " .. humanoid.MaxHealth

	-- 体力が減ったときだけ、画面を一瞬赤くしてから元に戻す
	if lastHealth and humanoid.Health < lastHealth then
		damageEffect.TintColor = Color3.fromRGB(255, 25, 25)
		damageEffect.Saturation = 2.5
		TweenService:Create(damageEffect, tweenInfo, {
			TintColor = Color3.fromRGB(255, 255, 255),
			Saturation = 0,
		}):Play()
	end
	lastHealth = humanoid.Health
end

local function onCharacter(character)
	local humanoid = character:WaitForChild("Humanoid")
	lastHealth = nil
	update(humanoid)
	humanoid.HealthChanged:Connect(function()
		update(humanoid)
	end)
end

local player = Players.LocalPlayer
if player.Character then
	onCharacter(player.Character)
end
player.CharacterAdded:Connect(onCharacter)
足した部分していること
TweenInfo.new(0.5, ...)0.5秒かけて、はじめは速く、最後はゆっくり動かす決まりを作る
TweenService:Create(fill, ...)緑の帯の長さと色を、決まりどおりになめらかに変える
ColorCorrectionEffect画面全体の色を変える部品。カメラの中に入れるので、自分の画面だけが変わる
humanoid.Health < lastHealth前の体力より減ったときだけ、画面を赤くする(回復のときは光らない)

3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます。赤い床に乗ると、ゲージが少しずつ短くなり、画面全体が一瞬赤っぽくなりました。

0.5秒ほどで、画面はいつもの色に戻ります。

確かめたら、Shift+F5キーでテストを止めます。赤くする強さは、TintColorの「255, 25, 25」の後ろの2つの数を大きくすると弱くなります。

数字を変えて調整する

DamageScriptとPickupManagerは、コードの中の数字です。エクスプローラで「DamageScript」(DamagePadの中)や「PickupManager」(ServerScriptServiceの中)をダブルクリックして開き、上の方の DAMAGE や HEAL の行の数字を書き換えます。

MeterBarのSize・AnchorPoint・Positionはプロパティです。エクスプローラでHealthGuiの中の「MeterBar」を押して選び、プロパティの検索欄に名前を入力して、右の欄を変えます。「Size」と入力するとAbsoluteSizeやAutomaticSizeなども並ぶので、名前がちょうど「Size」の欄に入力します。

変えたいこと変える場所例
床で減る量DamageScriptのDAMAGE20 → 10
回復する量PickupManagerのHEAL30 → 50
箱が戻るまでの時間PickupManagerのRESPAWN_TIME5 → 10
回復アイテムを増やすHealthPickupsの中HealthPackをCtrl + Dで複製して、Positionを変える。スクリプトは直さない
ゲージの長さMeterBarのSize{0, 300},{0, 28} → {0, 400},{0, 28}
ゲージを左上に出すMeterBarのAnchorPointとPositionAnchorPoint 0, 0、Position {0, 20},{0, 20}

Robloxの公式の説明によると、自動回復を止めたいときは、StarterPlayerの中のStarterCharacterScriptsに、中身の空のScriptを「Health」という名前で入れます。

動かないときの確かめ方

症状見るところ直し方
床に乗っても体力が減らないDamageScriptの場所DamagePadの中にあるか。スポーン直後の光(ForceField)が消えてから乗る
箱に触っても回復しない体力満タン(100)のときは取らない作りです。床で減らしてから触る
箱が1つしか反応しない箱の場所どの箱もHealthPickupsの中にあるか。テストの途中で足した箱には反応しない
ゲージが出ないHealthGuiの場所StarterGuiの中にあるか。MeterBar・Fill・HealthTextの名前が合っているか
数字が帯に隠れるHealthTextのZIndex2にする
出力に「Infinite yield possible」と出る名前HealthPickups・MeterBar・Fill・HealthTextの名前が合っているか。この表示の読み方はInfinite yield possibleの直し方で解説しています

AIに相談するときの伝え方

Roblox Studioのアシスタントにも、次のように頼めます。

Roblox Studioで体力ゲージを作っています。
StarterGuiのScreenGui「HealthGui」の中に、Frame「MeterBar」、その中にFrame「Fill」とTextLabel「HealthText」があり、LocalScript「HealthBar」でHumanoid.HealthChangedに合わせてFillの長さを変えています。
体力が減ったときに、ゲージがなめらかに短くなるようにしたいです。

よくある質問

敵の頭の上にも体力ゲージを出せる?

この記事のゲージは、自分の画面に出すScreenGuiです。敵やほかのプレイヤーの頭の上に出すときは、BillboardGuiを使います。頭の上に文字を出すやり方は文字を出す方法で解説しています。

体力の上限を200にできる?

HumanoidのMaxHealthを200にすると上限が変わります。この記事のゲージと回復のスクリプトはMaxHealthを読んでいるので、そのまま200に合わせて動きます。上限を変えるやり方は剣の攻撃の作り方でも使っています。

次のステップ(中級 22/28)

次は、自分の画像を取り込み、看板とコインのアイコン付きスコアを作ります。

→ ロブロックス(Roblox)スタジオの画像の入れ方

次に知りたいことを選ぶ

次に読む記事