UIオブジェクトの位置とサイズ | 文書 - Roblox クリエーターハブ

UIオブジェクトがレイアウト構造またはサイズ修飾子/制約の管理下にない限り、オブジェクトの位置とサイズを完全に制御できます。また、オブジェクトが重なる順序を示すZ‑indexのlayeringも設定できます。

コアプロパティ

全てのGuiObjectsは、画面上または体験内のコンテナ内でオブジェクトを位置、サイズ、アンカー、レイヤーするためのコアプロパティセットを共有します。

位置

Positionプロパティは、オブジェクトをX軸とY軸に沿って配置するUDim2座標セットです。UDim2は、各軸に対してScaleとOffsetの値の両方で表現されます：

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

選択したGuiObjectの位置を編集するには、プロパティウィンドウでPositionフィールドをクリックし、新しいUDim2座標セットを入力します。

スタジオでUDim2を入力する際、角括弧とスペースはオプションです — 例えば、0.25,40,0.1,20のように、4つの値をカンマで区切って入力するだけで、スタジオは意図された値セットを推測します。

スタジオは、単一の数値が入力された場合にも意図された値セットを推測します。例えば、単に0.5と入力するだけで、{0.5, 0},{0.5, 0}に変換されます。これは0.5が50%のScale値だからです。逆に、20を入力すると、{0, 20},{0, 20}に変換され、これは20が20ピクセルのOffset値であり、2000%のスケールではないからです。

サイズ

Sizeプロパティは、オブジェクトをX軸とY軸に沿ってサイズ指定するUDim2座標セットです。UDim2は、各軸に対してScaleとOffsetの値で表現されます：

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

選択したGuiObjectのサイズを編集するには、プロパティウィンドウでSizeフィールドをクリックし、新しいUDim2座標セットを入力します。

スタジオでUDim2を入力する際、角括弧とスペースはオプションです — 例えば、0.75,0,0.25,0のように、4つの値をカンマで区切って入力するだけで、スタジオは意図された値セットを推測します。

スタジオは、単一の数値が入力された場合にも意図された値セットを推測します。例えば、単に0.5と入力するだけで、{0.5, 0},{0.5, 0}に変換され、これは0.5が50%のScale値だからです。逆に、20を入力すると、{0, 20},{0, 20}に変換され、これは20が20ピクセルのOffset値であり、2000%のスケールではないからです。

AnchorPoint

AnchorPointプロパティは、オブジェクトが位置とサイズを変更する起点を定義します。デフォルトのAnchorPoint値は(0, 0)で、オブジェクトの左上隅にアンカーが配置されます。

AnchorPoint値は、オブジェクトのサイズに対して0から1の比率であり、AnchorPoint値が(0.5, 0.5)のオブジェクトは、オブジェクトの水平および垂直の中央（50%）にアンカーポイントを配置します。したがって、これに対する位置やサイズの変更は、どちらもこのポイントから外側に移動し、スケーリングされます。

選択したGuiObjectのアンカーポイントを表示および編集するには：

プロパティウィンドウでAnchorPointフィールド内をクリックします。
新しいVector2座標を入力し、Enterを押します。

スタジオは、単一の数値が入力された場合に意図された値ペアを推測します。例えば、単に0.5と入力するだけで、0.5, 0.5の中心アンカーポイントに変換されます。

ZIndex

ZIndexプロパティは、GuiObjectsが描画され、互いに重なる順序を定義します。新しい描画レイヤーを作成したい場合、各オブジェクトのZIndexプロパティを異なる正または負の整数値に設定する必要があります。

ScreenGuiのようなUIコンテナでは、デフォルトのZIndexBehaviorが常に子を親の上に描画し、各子のZIndexが、他のオブジェクトの上にどのように描画されるかを決定するために使用されます。

オブジェクトのZIndexを編集するには、プロパティウィンドウでZIndexを探し、新しい整数値を入力します。

レイアウト構造

レイアウト構造を使用すると、GuiObjectsをすばやく整理して表示できます。たとえば、水平または垂直のリスト、均一なサイズのタイルのグリッド、ページシーケンスなどです。レイアウトは通常、その管理下にあるオブジェクトの位置/サイズに上書きまたは影響を与えます。

レイアウト	説明
リスト	UIListLayoutは、兄弟のGuiObjectsを親コンテナ内に水平の行または垂直の列として配置します。
グリッド	UIGridLayoutは、兄弟のGuiObjectsを親コンテナ内に均一なサイズのセルのグリッドとして配置します。
テーブル	UITableLayoutは、兄弟のGuiObjectsとその子をテーブル形式に配置します。
ページ	UIPageLayoutは、兄弟のGuiObjectsをユニークなページに整理し、スクリプトを通じて遷移できます。

クロスプラットフォーム要因

Robloxは本来クロスプラットフォームであり、プレイヤーはスマートフォンやタブレットで体験を発見して参加し、その後PCやコンソールで中断した場所から続けることができます。サポートすることを選んだすべてのプラットフォームでアクセス可能で楽しい体験を設計することが重要です。一つのプラットフォームの最適化に偏ることなく、他のプラットフォームを無視しないようにしましょう。

予約エリア

モバイルデバイスでは、デフォルトのコントロールが画面の左下隅と右下隅の一部を占有します。体験のUIを設計する際には、重要な情報や仮想ボタンをこれらのエリアに配置することを避けてください。

サムゾーン

ほとんどのモバイルプレイヤーは両手の親指を使います — 一つは仮想スティックに、もう一つはジャンプボタンに使います。デバイスの物理的なサイズやプレイヤーの手によって、下隅からあまりにも遠くに届くことが不快または不可能になるため、よく使うボタンを簡単に届くゾーンの外に配置することは避けるべきです。

プレイヤーの右手の親指の届く範囲にボタンがあります

プレイヤーが手や親指を伸ばさないと届きにくいボタンです

快適なサムゾーンは、電話とタブレットで異なることに注意してください。タブレットは画面が大きいため、画面の上端から40%下に配置されたボタンは、電話では届きますが、タブレットではほぼ届かなくなります。

電話の上端から40%の位置にあるボタンは、プレイヤーの親指の届く範囲です

タブレットの上端から40%の位置にあるボタンは、伸ばさないと届きにくいです

電話とタブレットの両方で信頼できるアプローチは、デフォルトのジャンプボタンのような頻繁に使用されるコントロールの近くにカスタムボタンを相対的に配置することです。これにより、簡単に届く範囲にボタンを配置できます。

次のコードは、StarterPlayerScripts内のクライアントサイドスクリプトに配置され、ジャンプボタンの位置を取得し、その左側に20ピクセルのプレースホルダボタンを作成します。

Client Script - Custom Button Near Jump Button
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- ジャンプボタンが完全にロードされるまで待つ
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- ジャンプボタンの左側に新しいカスタムボタンを配置
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("デバイスはタッチ非対応またはスタジオでタッチ対応デバイスをエミュレートしていません！")
end

コンテキストベースのUI

モバイルデバイスでは画面スペースが限られているため、アクティブなゲームプレイ中には最も重要な情報のみを表示するべきです。たとえば、体験にドアや宝箱を開くための特別な入力アクションが含まれている場合、画面に「開く」ボタンを常に表示するのは意味がありません。代わりに、キャラクターがドアや宝箱に近づいたときのみ入力を受け付けるために、近接プロンプトや同様の方法を使用してください。