roblox-gui

Roblox GUI リファレンス

GUI コンテナの種類

コンテナ	親	用途
ScreenGui	PlayerGui	HUD、メニュー、オーバーレイ — 常に画面に固定されます
SurfaceGui	BasePart	パート表面上のワールド空間 UI (看板、スクリーン)
BillboardGui	BasePart または Model	3D 空間でパートの上に浮かびます (名前タグ、体力バー)

ScreenGui

-- LocalScript in StarterGui or StarterPlayerScripts
local player = game:GetService("Players").LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "HUD"
screenGui.ResetOnSpawn = false   -- keep GUI across respawns
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
screenGui.Parent = playerGui

SurfaceGui

local surfaceGui = Instance.new("SurfaceGui")
surfaceGui.Face = Enum.NormalId.Front
surfaceGui.SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud
surfaceGui.PixelsPerStud = 50
surfaceGui.Parent = workspace.ScreenPart

local label = Instance.new("TextLabel")
label.Size = UDim2.fromScale(1, 1)
label.Text = "Hello World"
label.Parent = surfaceGui

BillboardGui

local billboard = Instance.new("BillboardGui")
billboard.Size = UDim2.fromOffset(200, 50)
billboard.StudsOffset = Vector3.new(0, 2.5, 0)  -- float above head
billboard.AlwaysOnTop = false
billboard.Parent = character:WaitForChild("Head")

local nameLabel = Instance.new("TextLabel")
nameLabel.Size = UDim2.fromScale(1, 1)
nameLabel.BackgroundTransparency = 1
nameLabel.Text = player.DisplayName
nameLabel.Parent = billboard

---

UDim2 によるサイズ指定と位置指定

UDim2.new(xScale, xOffset, yScale, yOffset) — scale は親に対する 0〜1 の比率、offset はピクセルです。

frame.Size     = UDim2.new(1, 0, 0, 50)       -- full width, 50px tall
frame.Position = UDim2.new(0, 0, 0, 0)         -- top-left corner

frame.Size     = UDim2.fromScale(0.6, 0.4)     -- 60% wide, 40% tall
frame.Position = UDim2.new(0.2, 0, 0.3, 0)    -- centered (0.2 = (1-0.6)/2)

UDim2.fromScale(0.5, 0.5)    -- scale only
UDim2.fromOffset(300, 150)   -- pixels only

AnchorPoint は要素のピボットを移動します (各軸で 0〜1):

frame.AnchorPoint = Vector2.new(0.5, 0.5)   -- pivot at center
frame.Position    = UDim2.fromScale(0.5, 0.5)  -- truly centered on screen

---

レスポンシブデザイン

UI がすべての画面サイズに適応するよう、offset よりも scale を優先してください。

button.Size     = UDim2.fromScale(0.2, 0.07)
button.Position = UDim2.new(0.4, 0, 0.85, 0)

-- Prevent distortion with UIAspectRatioConstraint
local arc = Instance.new("UIAspectRatioConstraint")
arc.AspectRatio = 4   -- width:height = 4:1
arc.Parent = button

---

TweenService アニメーション

local TweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local menuFrame = script.Parent

local function openMenu()
    TweenService:Create(menuFrame, tweenInfo, {
        Position = UDim2.new(0.05, 0, 0.1, 0)
    }):Play()
end

local function closeMenu()
    TweenService:Create(menuFrame, tweenInfo, {
        Position = UDim2.new(-0.5, 0, 0.1, 0)
    }):Play()
end

-- Animated progress bar
local function setProgress(bar, pct)
    TweenService:Create(bar, TweenInfo.new(0.2), {
        Size = UDim2.new(pct, 0, 1, 0)
    }):Play()
end

---

LocalScript の配置場所

場所	備考
StarterGui	参加時に PlayerGui にクローンされます。永続化するには ResetOnSpawn = false を使用します
StarterPlayerScripts	一度だけ実行され、リスポーン時にリセットされません。永続的なマネージャーに適しています
StarterCharacterScripts	スポーンごとに再実行されます。キャラクター依存の UI に適しています

-- Safe pattern: wait for character
local player = game:GetService("Players").LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

humanoid.HealthChanged:Connect(function(health)
    -- update health bar
end)

---

ResetOnSpawn

screenGui.ResetOnSpawn = false  -- persist across respawns (inventory, settings)
screenGui.ResetOnSpawn = true   -- re-create on respawn (respawn timer) — default

---

よくあるパターンのクイックリファレンス

パターン	主な設定
全画面オーバーレイ	Size = UDim2.fromScale(1,1)、Position = UDim2.fromScale(0,0)
下部中央の HUD バー	AnchorPoint = (0.5,1)、Position = UDim2.new(0.5,0,1,-10)
パディング付きリスト	Frame 内に UIPadding + UIListLayout
スクロール可能なリスト	ScrollingFrame + UIListLayout。CanvasSize は UIListLayout.AbsoluteContentSize から設定します
角丸	UICorner で CornerRadius = UDim.new(0, 8)
スケールするテキスト	TextLabel/TextButton で TextScaled = true にすると、フォントがコンテナに合わせて拡大します
動的なフレームの高さ	AutomaticSize = Enum.AutomaticSize.Y にすると、フレームが子要素に合わせて拡張されます
体力バー	ネストしたフレーム: 外側 = 背景、内側は Size.X.Scale でトゥイーンします
名前タグ	Head に BillboardGui、StudsOffset = Vector3.new(0, 2.5, 0)

---

よくある間違い

間違い	修正方法
リスポーン時に GUI が消える	ResetOnSpawn = false を設定するか、StarterPlayerScripts を使用します
モバイルで UI が崩れて見える	UDim2.fromScale + UIAspectRatioConstraint を使用します
スクリプトが PlayerGui を見つけられない	player:WaitForChild("PlayerGui") を使用します
Tween が実行されない	プロパティがトゥイーン可能か確認します。Text は不可、Position と Size は可能です
BillboardGui が壁越しに見える	AlwaysOnTop = false を確認します
最初のフレームで AbsoluteSize がゼロになる	task.defer 内、または最初のレンダリングステップの後に読み取ります
重なったフレームをクリックが貫通する	透明な入力ブロック用 Frame を追加するか、Modal = true を設定します
SurfaceGui がちらつく	LightInfluence = 0 を設定します。パートが薄すぎないことも確認します
モバイルでテキストが小さい	TextScaled = true を設定します — 固定の TextSize は画面サイズに適応しません
モバイルで UI のテストが難しい	Studio の Device Emulator (Test タブ → Device) を使用してレイアウトをプレビューします