ポジションとサイズの UI オブジェクト

*このコンテンツは、ベータ版のAI（人工知能）を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

UI オブジェクトが レイアウト構造 または サイズ変更モジュール/制限 の下にある場合を除き、位置 と 2>サイズ2> の両方に完全に制御できます。5>Z インデックス5> レイヤーのオーダーを設定して、オブジェクトが重複することを制御で

コアプロパティ

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

ポジション

Class.GuiObject.Position|Position プロパティは、オブジェクトを UDim2 と Y 軸に沿って位置付ける 1>Datatype.UDim21> コーディネートセットです。

  • スケール — コンテナのサイズ沿いの パーセンテージ を表す値、 オフセット の値の追加。
  • オフセット — オブジェクトを対応する軸にシフトするピクセルの数を表す値、 スケール 値の任意の追加。

Class.GuiObject のポジションを編集するには、 ポジション フィールドにクリックし、プロパティ ウィンドウで新しい 1> Datatype.UDim21> コーディネートを入設定するします。

サイズ

Class.GuiObject.Size|Size プロパティは、オブジェクトを UDim2 および Y 軸に沿ってサイズ変更する 1>Datatype.UDim21> コーディネート

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

Class.GuiObject のサイズを編集するには、 サイズ フィールドにある プロパティ ウィンドウで新しい 1> Datatype.UDim21> コーディネートを入力し、4> サイズ4> フィールドに入設定するします。

アンカーポイント

Class.GuiObject.AnchorPoint|AnchorPoint プロパティは、オブジェクトが 位置 とサイズを変更する場所の1>起点1>を定義します。デフォルトの 4>Class.GuiObject.AnchorPoint4> 値は、7>

AnchorPoint は、オブジェクトのサイズ 0</

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

  1. In the プロパティ window, click inside the アンカーポイント field.

  2. 新しい Vector2 コーディネートを入力し、Enter を押します。

Zインデックス

Class.GuiObject.ZIndex|ZIndex プロパティは、GuiObjects がレンダリングして重複するレイヤーの順序を定義します。新しいレンダリングレイヤーを作成するには、ZIndex プロパティを正のまたは負の整数値に設定する必要があります。

For UI コンテナ like ScreenGui のデフォルトの ZIndexBehavior は常に親の子供を上にレンダリングし、各子の ZIndex は、他の人より先にレンダリングする順序を決定します。

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

レイアウト構造

レイアウト構造は、横または縦に GuiObjects を素早く整理し、表示することができます。たとえば、横向きまたは縦長の Class.GuiObject|GuiObjects リスト、均等サイズのタイルのグリッド、ページシーケンス など。レイアウト

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

クロスプラットフォームファクター

Roblox は、プレイヤーが PC またはコンソールでエクスペリエンスを発見し、参加できるようになります、然後、電話を拾って続行することができます。Roblox エクスペリエンスを設計する必要があります、それらはすべてのプラットフォームにアクセスでき、楽しいです、オプティマイズされたり、1つのプラッ

予約ゾーン

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

サムムゾーン

ほとんどのモバイルプレイヤーは、2つの親指を使用します - 1つはバーチャル サム スティックにあり、1つはジャンプ ボタンにあります。デバイスの物理的サイズとプレイヤーの手により、遠くからからコーナーに到達すると不快になるため、簡単にアクセスできるゾーン外にボタンを配置することは避ける必要があります。


慣れているサムスンの電話とタブレットのサイズが異なることを覚えてください。サムスンの電話の画面の上部にあるボタンは、電話では 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

モバイルデバイスのスクリーンスペースは限られているため、アクティブなゲームプレイ中にのみ最も重要な情報を表示する必要があります。たとえば、エクスペリエンスに特別な入力アクションを含めてドアや宝箱を開くような特定の入力アクションがある場合は、スクリーン上で常に 開く ボタ

キャラクターがドアやチェストの近くにいるときに表示するカスタムボタン