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

UI オブジェクトがレイアウト構造またはサイズ変更/制限の制御下にない限り、その位置とサイズを完全に制御できます。オブジェクトが重複する Z‑index レイヤー順序も設定できます。

コアプロパティ

すべての GuiObjects コアセットのプロパティを位置、サイズ、アンカー、およびレイヤーを画面上またはエクスペリエンス内のコンテナ内に共有します。

地位

Position プロパティは、オブジェクトを UDim2 および Y 軸に沿って位置づける **** 座標セットです。A UDim2 は、各軸の Scale および Offset 価値の両方によって表現されます：

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

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

括弧とスペースは、Studio にオプションで入力すると、UDim2 に入力すると、例えば 0.25,40,0.1,20 の 4つの値をコンマで区切って入力できます。Studio は、意図した値セット設定する推測します。

スタジオは、単一の数字が入力されたときに意図された値セットを推測します。たとえば、単に 0.5 を入力すると、{0.5, 0},{0.5, 0} に変換されますが、0.5 はおそらく 50% のスケール値です。逆に、を入力すると、に変換されますが、は 20 ピクセルのオフセット値であり、2000% のスケールではありません。

サイズ

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

スケール — 対応する軸に沿ってコンテナのサイズのパーセントを表す値、そして任意のオフセット値に加算される。
オフセット — 対応する軸に沿ってオブジェクトのピクセルサイズを表す値、任意のスケール値に加算されます。

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

括弧とスペースは、Studio にオプションで入力すると、UDim2 に入力すると、例えば 0.75,0,0.25,0 の 4つの値をコンマで区切って入力できます。Studio は、意図した値セット設定する推測します。

アンカーポイント

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

値は、オブジェクトのサイズに対してから、オブジェクトのサイズに相対して、値の場所が、横方向と縦方向の両方でオブジェクトの位置を半分まで移動し、オブジェクトの位置やサイズが移動し、移動し、移動し、移動し、移動し、移動し、移動し、移動し、移動し、移動し、移動します。

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

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

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

Zインデックス

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

UI コンテナのように ScreenGui 、デフォルトの ZIndexBehavior は常に親の上に子供をレンダリングし、それぞれの子供の ZIndex は、他の子供をレンダリングする順序を決定するために使用されます。

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

レイアウト構造

レイアウト構造では、例えば、水平または縦向きのリスト、同じサイズのタイルのグリッド、ページシーケンス、などを素早く整理して表示できます。レイアウトは通常、コントロール下のオブジェクトの位置 / サイズをオーバーライドまたは影響します。

レイアウト	説明
リスト	UIListLayout 位置の兄弟 GuiObjects を親コンテナ内の横行または縦行に横向きまたは縦向きに配置します。
グリッド	UIGridLayout 位置の姉妹 GuiObjects は、親コンテナ内の同じサイズのユニフォームセルのグリッド内です。
タブ	UITableLayout 位の姉妹 GuiObjects とその子供をテーブル形式に変換します。
ページ	UIPageLayout 兄弟をスクリプトで移行できるユニークなページに整理する GuiObjects

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

Roblox は、プレイヤーが PC またはコンソールで経験を発見し、参加できるため、本質的にクロスプラットフォームです。後で電話を拾い、離れたところから続オフることができます。あなたは、1つのプラットフォームを最適化し、他のものを無視するのではなく、サポートするすべてのプラットフォームでアクセシブルで楽しい Roblox 体験を設計する必要があります。

予約済みゾーン

モバイルデバイスでは、デフォルトのコントロールが画面の左下と右下の一部を占有します。エクスペリエンスの UI を設計するときは、これらのゾーンに重要な情報やバーチャルボタンを配置しないようにしましょう。

エクスペリエンスがデフォルトのコントロール設定 DevTouchMovementMode.UserChoice を使用している場合、モバイルデバイスのプレイヤーは、ダイナミック Thumbstick 、クラシック Thumbstick 、またはタップして移動から入力を選択でき、画面上のコントロールと予約済みゾーンが少し異なるようになります。この可能性の周りに UI を設計することを忘れないでください。

サムゾーン

ほとんどのモバイルプレイヤーは、2つの親指を使用します - 1つはバーチャルのサムスティック、もう 1つはジャンプボタンです。デバイスの物理サイズとプレイヤーの手の大きさによって、底の隅から遠すぎると不快になるか不可能になるので、簡単に手の届く場所外に頻繁に使用するボタンを配置しないでください。

プレイヤーの右親指の届く範囲内で快適にボタンを操作する

プレイヤーが手または親指を伸ばさない限り、ボタンに到達するのが困難

快適な親指ゾーンは、タブレットに大きな画面があるため、電話とタブレットの間で異なることを覚えてください。画面の上端に 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

コンテキストベースの UI

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

ページ内容