UIを表示しよう

ゲームをプレイするとき、「スコア」や「残りライフ」「タイマー」などの情報が画面に表示されていることがありますよね？
これらの情報をプレイヤーに見せる仕組みを UI（ユーザーインターフェース） といいます。

Roblox Studioでも、ScreenGui や TextLabel を使って、簡単にUIを作ることができます。
このページでは、スコアやタイマーのような基本的なUIを表示する方法を紹介します。

---

UIってどんなもの？

• スコア（ポイント数）
• 残りライフ・体力バー
• タイマー（時間のカウント）
• アイテムの所持数
• ボタン（タップ操作対応）

---

基本のUIを作ってみよう（スコア表示）

① UIの配置

1. StarterGui を右クリック → 「ScreenGui」を追加
2. ScreenGui の中に「TextLabel」を追加
3. TextLabel の Text を「Score: 0」に変更して、サイズや色を調整

② スクリプトでスコアを更新する

local player = game.Players.LocalPlayer
local screenGui = script.Parent
local scoreLabel = screenGui:WaitForChild("TextLabel")

local score = 0

-- スコアを更新する関数
local function updateScore(amount)
	score = score + amount
	scoreLabel.Text = "Score: " .. score
end

-- 例：5秒ごとにスコア加算（テスト用）
while true do
	wait(5)
	updateScore(10)
end

✅ このスクリプトは TextLabel の中にある LocalScript として配置してください。

---

タイマーを表示したい場合

local player = game.Players.LocalPlayer
local timerLabel = script.Parent:WaitForChild("TextLabel")

local timeLeft = 60

while timeLeft > 0 do
	wait(1)
	timeLeft = timeLeft - 1
	timerLabel.Text = "Time: " .. timeLeft
end

timerLabel.Text = "Time Up!"

• これで、残り時間が1秒ずつカウントダウンされていきます。

---

よくあるUIアイデア

• コインを拾うとスコアが上がる
• 敵に当たるとHPバーが減る
• 制限時間以内にゴールしないと失敗になる

---

見た目の工夫ポイント

• TextColor3 や BackgroundColor3 を使って色を変えよう
• 位置（Position）やサイズ（Size）を調整して、スマホでも見やすく！
• 透明度（BackgroundTransparency）を使うと画面の邪魔にならない

---

UIを追加することで、ゲームの目的がわかりやすくなり、プレイヤーの没入感がアップします！
次は「ゲームを完成させて公開しよう」で、最後のまとめと公開の手順に進みましょう！

👉 [ゲームを完成させて公開しよう]