UIオブジェクトの位置とサイズ

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

コアプロパティ

すべてのGuiObjectsは、画面上またはゲーム内のコンテナ内でそれらを位置、サイズ、アンカー、およびレイヤーするためのコアプロパティのセットを共有しています。

位置

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

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

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

サイズ

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

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

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

AnchorPoint

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

AnchorPointの値は、オブジェクトのサイズに対する0から1の割合であり、AnchorPointの値が(0.5, 0.5)の場合、オブジェクトの水平方向と垂直方向の両方でアンカーポイントが中間（50%）に配置され、位置やサイズの変更はこのポイントから外側に移動およびスケールされます。

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

1. プロパティウィンドウで、AnchorPointフィールド内をクリックします。

   

2. 新しいVector2座標を入力し、Enterを押します。

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

ZIndex

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

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

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

レイアウト構造

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

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

Robloxは本質的にクロスプラットフォームであり、プレイヤーは携帯電話やタブレットでゲームを発見して参加し、その後PCやコンソールで続けることができます。サポートするすべてのプラットフォームでアクセス可能で楽しいRobloxゲームを設計するべきであり、1つのプラットフォームに最適化して他を無視するべきではありません。

予約ゾーン

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

サムゾーン

ほとんどのモバイルプレイヤーは、仮想スティックの上に1本、ジャンプボタンの上に1本の2本の親指を使用します。デバイスの物理的なサイズやプレイヤーの手によって、下隅から遠くに手を伸ばすことは不快または不可能になるため、頻繁に使用されるボタンを簡単に届くゾーンの外に配置しないようにしてください。

プレイヤーの右親指が快適に届くボタン

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

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

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

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

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

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

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("デバイスはタッチ対応ではないか、Studioはタッチ対応デバイスをエミュレートしていません！")
end

コンテキストベースのUI

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