2D パス

Path2D インスタンス、API メソッドとプロパティとともに、UI 効果のパスベースアニメーションやグラフ編集機能のような 2D スプラインと 2D カーブラインを実装できます。

2D パスを作成

画面または経験オブジェクトに Path2D を追加するには：

エクスプローラーウィンドウで、表示可能な Path2D または ScreenGui （直接の子である必要はありません）の下に SurfaceGui インスタンスを挿入します。
新しい Path2D を選択して、ビューポートツールウィジェットを表示します。デフォルトでは、ポイント追加ツールが選択されます。
画面をクリックし始めて、コントロールポイントのシリーズを追加して、パスを形成します。最初のパスは不正確である可能性が高いが、後で任意のコントロールポイントの位置を微調整できます。

クリック後にマウスをドラッグすると、弧がそのポイントに作成されます。 tangents は、手続きによって任意の制御ポイントに追加できます。
終了したら、ウィジェットの完了ボタンをクリックするか、Enter を押します。

コントロールポイントを変更する

エクスプローラ階層で選択された個々のコントロールポイントと、その切角を修正できます。

ポイントを移動

パス上の個々の制御ポイントを移動するには、選択ツールを有効にして（V）、新しい位置にクリックしてドラッグします。

Select tool indicated in the 2D path editor widget.

Diagram illustrating how a path control point is moved to a new position by clicking and dragging with the Select tool enabled.

非常に特定の位置には、コントロールポイントを選択し、プロパティウィンドウで、ポイントの SelectedControlPointData プロパティに新しい位置を設定します(UDim2 )。

SelectedControlPointData property of a Path2D instance indicated in the Properties window.

ポイントの位置は絶対ではなく、パスの親コンテナに対して相対です。たとえば、コントロールポイントを左から 30%、上から 20% 比較して、内のパスと、同じパスを上右隅の内に配置したものと比較します。

Diagram illustrating how the positions of path control points are relative to their parent container.

ポイントを追加

新しい制御ポイントは、既存のポイントの間またはポイント追加ツール ( ) を使用して、どちらかの端点から追加できます。

Add Point tool indicated in the 2D path editor widget.

Diagram illustrating how a control point is added between two existing points using the Add Point tool. — パスのどこかをホバーし、2つの既存のポイント間にコントロールポイントを追加するためにクリック

Diagram illustrating how a control point is added to the end of a path using the Add Point tool. — 端点をクリックし、その後もう一度クリックして、その端点からコントロールポイントを追加します

新しいコントロールポイントを追加するためにマウスをドラッグした後、クリックしても、弧がそのポイントに作成されます。

ポイントを削除

コントロールポイントを削除するには、マウスでホバーして右クリックし、コンテキストポップアップメニューからポイントを削除するを選択します。

Diagram illustrating how a path control point is deleted by right-clicking it and selecting Delete Point.

コントロールポイントの弧を制御

コントロールポイント弧は、パス上の弧を作成して調整できます。

Diagram illustrating a curved path with several tangent control points.

切り角を追加

すでに tangentsを持っていないどのコントロールポイントにも tangentsを追加するには：

ツールウィジェットでタンジェントを追加ツールを有効にします。
必要な制御ポイントの上にマウスポインタを置き、クリックして2つの反射 tangentsを追加します (オプションで、クリック後に調整する新しい tangentsをドラッグすることもできます)。

切角を調整する

個々のコントロールポイントの既存の切角を調整するには：

選択ツールを有効にします (V ).
tangent マーカー (コントロールポイントではない) の上にマウスポインタを置き、新しい位置にクリックしてドラッグします。切角が反転すると、ペアの切角ポイントが同時に移動します。

特定の UDim2 位置を手動で設定するには：

選択ツールを有効にして (V) コントロールポイントを選択します。プロパティウィンドウで、SelectedControlPointDataを拡張して、LeftTangentとRightTangentを露出させます。
および/またはの位置を設定します。これは、 tangents の反射行動を破壊することに注意してください。

角度を削除

コントロールポイントから両方の切角を削除するには、そのポイントをホバーして右クリックし、コンテキストポップアップメニューから切角をクリアするを選択します。

Diagram illustrating how both tangents of a control point are cleared by right-clicking it and selecting Clear Tangents.

左または右の切角の 1つだけを削除するには、その切角のマーカーをホバーして右クリックし、切角を削除するを選択します。

Diagram illustrating how one tangent of a control point is deleted by right-clicking it and selecting Delete Tangent.

ブレークとミラー

デフォルトでは、 tangents はお互いを鏡像します。一つの tangent マーカーを調整するときにドラッグして、ペアの tangent ポイントが同時に移動します。

Diagram illustrating how the tangents of a control point are adjusted with the Select tool enabled.

各々が相互に独立して移動できるように、関連する制御ポイントをホバーして右クリックし、コンテキストメニューから角度を壊すを選択します。一度壊れると、他の影響を受けずに各 tangent マーカーを移動できます。

Diagram illustrating how the tangents of a control point are broken by right-clicking it and selecting Break Tangents.

ミラー動作を再設定するには、関連するコントロールポイントをホバーして右クリックし、コンテキストメニューからミラー極点を選択します。ミラーリングを再設定した後、パスにすぐに変更が見られないことに注意してください。システムは、どの傾斜点をミラーリング開始したいかを予測できないためです。 not パスに即時の変更が見られないことに注意してください。ミラー動作は、タンジェントマーカーの 1つを調整するためにドラッグすると再開されます。

パスビジュアルプロパティ

次のプロパティを使用して、Path2D の視覚的外観をカスタマイズできます：

性質	説明
Color3	パスラインの色を設定します。
Thickness	パスラインの厚さを、ピクセルで設定します。
Visible	編集と実行時の両方でパスを表示するかどうかを設定します。
ZIndex	パスが他の GUI に対してレンダリングされる順序。

Diagram illustrating a path with Thickness of 2 and Color3 of (125, 125, 125). — 厚さ = 2Color3 = (125、125、125)

Diagram illustrating a path with Thickness of 10 and Color3 of (225, 0, 50). — 厚さ = 10Color3 = (225、0、50)

Diagram illustrating a path layered in front of another using the ZIndex property. — ZIndex レイヤー

パススクリスクリプト作成

スクリプトは、複数のパスに関連するワークフローに有用です。次の例では、などのメソッドを使用し、およびで、スプライン沿いに指定された位置を返す方法を使用します。

パス全体で UI オブジェクトを配置する
local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")

local function arrangeChildren()
	local segmentCount = #path:GetControlPoints()
	local objectsToArrange = {}

	for _, child in parent:GetChildren() do
		if child:IsA("GuiObject") then
			table.insert(objectsToArrange, child)
		end
	end

	for idx, child in objectsToArrange do
		local t = idx / (#objectsToArrange + 1)
		child.Position = path:GetPositionOnCurveArcLength(t)
	end
end

-- 最初にパス全体に子 UI オブジェクトを配置する
arrangeChildren()

-- 配置を調整するために、追加/削除される子供を聞く
parent.ChildAdded:Connect(arrangeChildren)
parent.ChildRemoved:Connect(arrangeChildren)

パス沿いの UI オブジェクトをアニメート
local Tweenservice = game:GetService("TweenService")

local parent = script.Parent
local path = parent:FindFirstChildWhichIsA("Path2D")
local objectToAnimate = parent:FindFirstChildWhichIsA("GuiObject")

local TWEEN_DURATION = 4
local TWEEN_EASING_STYLE = Enum.EasingStyle.Cubic
local TWEEN_EASING_DIRECTION = Enum.EasingDirection.InOut

local pathSampleValue = Instance.new("NumberValue")
local tweenInfo = TweenInfo.new(TWEEN_DURATION, TWEEN_EASING_STYLE, TWEEN_EASING_DIRECTION, 0, true, 2)
local tween = Tweenservice:Create(pathSampleValue, tweenInfo, {Value = 1})

local function onSampleValueChanged()
	objectToAnimate.Position = path:GetPositionOnCurveArcLength(pathSampleValue.Value)
end
pathSampleValue.Changed:Connect(onSampleValueChanged)

tween:Play()

ページ内容