Hi Creators!
After being a beta feature for three months (previous Beta release announcement), we are excited to announce the full release of the new Path2D API and tooling to support this API!
Path2D allows you to create, edit, and visualize 2D splines and provides a 2D spline instance, enabling you to create UI elements and effects like graph editors and UI animations.
How to Use Path2D
To use Path2D:
-
Insert a Path2D instance (from the Explorer) in the UI hierarchy under any ScreenGUI and SurfaceGUI.
- Path2D will also work as a child of any GuiObject but it wonāt ignore folders like other UI elements.
-
After inserting a Path2D into the tree structure, select it in the Explorer to bring up the in-viewport tooling.
-
Path2D does not natively clip with other UI objects. However, you can use Path2D as a child of a Canvas Group to achieve clipping.
Path2D Demo
API
-
For Path2D APIs, check out our documentation here.
-
For Path2D Control Point APIs, check out our documentation here.
Example Usage
Below, weāre sharing two examples showcasing the capability of Path2D: one for 2D path animations in UI elements, and the other for UI layout design.
Create a 2D path animation
You can use Path2D to create a path animation to help the little bear get home, as seen below.
Hereās an example RBLX place file:
2DPathAnimationExample.rbxl (58.6 KB)
Below is example code:
local Tweenservice = game:GetService("TweenService")
local littlebear = script.Parent.LittleBear
local path2d = script.Parent.Path2D
local startButton = script.Parent.StartButton
local pathSampleValue = Instance.new("NumberValue")
local tweenDurationSeconds = 8
local tweenInfo = TweenInfo.new(tweenDurationSeconds, Enum.EasingStyle.Cubic, Enum.EasingDirection.InOut)
local tween = Tweenservice:Create(pathSampleValue, tweenInfo, {Value = 1})
pathSampleValue.Value = 0
local function onSampleValueChanged()
littlebear.Position = path2d:GetPositionOnCurveArcLength(pathSampleValue.Value)
end
pathSampleValue.Changed:Connect(onSampleValueChanged)
local function onStartButtonClicked()
pathSampleValue.Value = 0
tween:Play()
end
startButton.MouseButton1Click:Connect(onStartButtonClicked)
Tip: Toggle the Visible property on or off to show or hide the Path2D, which will work for both Edit and Run time.
Create a layout for 2D cards
You can use Path2D to create a UI layout for poker cards on the screen, as seen below.
Hereās an example RBLX place file:
poker-layout-example.rbxl (53.7 KB)
Below is example code:
local parent = script.Parent
local LayoutPath = script.Parent:FindFirstChildWhichIsA("Path2D")
local function layoutChildren()
local segmentCount = #LayoutPath:GetControlPoints()
local objectToLayout = {}
for _, child in pairs(parent:GetChildren()) do
if child:IsA("GuiObject") and not child:IsA("Path2D") then
table.insert(objectToLayout, child)
end
end
for idx, child in pairs(objectToLayout) do
local t = idx / (#objectToLayout + 1)
child.Position = LayoutPath:GetPositionOnCurveArcLength(t)
end
end
parent.ChildAdded:Connect(layoutChildren)
parent.ChildRemoved:Connect(layoutChildren)
We look forward to seeing incredible creations that will be crafted with Path2D. Thank you all for your support and feedback!
Special thanks to the team who worked on this feature: @PotionSeller33, @Metavars, @guacandtoast, @wengawenga, @0xabcdef1234, @ProtoValence, @Slim_Fandango, and @TangyTrout and everyone else who helped contribute!
