Path2D Full Release

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:

  1. 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.
  2. After inserting a Path2D into the tree structure, select it in the Explorer to bring up the in-viewport tooling.

  3. Path2D does not natively clip with other UI objects. However, you can use Path2D as a child of a Canvas Group to achieve clipping.

image4
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.

image2

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.

image1

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!

350 Likes

This topic was automatically opened after 10 minutes.

The RBLX place file links require access, could you update the links?

29 Likes

Will texture/UI masking be implemented in the future? Or possible UI elements like flipbooks?
This will go great in tandem to 2D Path, Amazing work!

29 Likes

I wonder how Roblox uses Path2D with react-lua

22 Likes

Hello! We have uploaded the files directly to the post, feel free to let us know if you still have issue downloading it.

21 Likes

so… peak… too… peak… insanely peak…

26 Likes

This looks nice! I’m gonna enjoy making patterns with this. Thanks!

18 Likes

This seems super convenient for laying out a constrained arc of mobile buttons.

15 Likes

This is really cool! I see potential for this in button layouts, transit maps which show train positions, and a lot more! I messed around with the API for a little bit and managed to get a system that tracks a GUI element both position and rotation-wise:

RobloxStudioBeta_HbJ5Xt98WN
(Don’t mind the jump, that’s just my recording software being weird)

If you’re curious, here’s my code:

function posRot(frame, path, t)
  local tangent = path:GetTangentOnCurveArcLength(t)
  frame.Position = path:GetPositionOnCurveArcLength(t)
  frame.Rotation = math.deg(math.atan2(tangent.Y, tangent.X))
  -- if you wanted, you could add or subtract any value from the above value, 
  -- which effectively changes the direction the frame points relative to the path!
  -- (normal instead of tangent, etc)
end

--- demo loop
for i = 0, 1, 0.01 do
  task.wait(0.01)
  posRot(frame, path, i)
end
44 Likes

Awesome! is Path3D the next project?

Edit: Sorry pressed the wrong reply button

38 Likes

This is a massive release for user interface and I am in love with you.

18 Likes

Lovely. Path3D when? Making boats that “sail the seas” on a pre-defined path easily with TweenService in a clean way would be so useful… :wink:

31 Likes

I am not sure if roblox would release something like a 3D path thingy, the reason is because there are already loads of resources for doing curves and more on 3D for stuff like tower defense games for example and camera movement.

Path 2D did had a need to be made because I assume it supports keeping the path while scaling to people’s screens and other stuff that makes it complex i guess.

13 Likes

They showed a 3D rail splines constraint during RDC a couple years ago in 2021.

I think it’d be insanely useful for physics based things like trams & roller coasters, especially for developers who don’t have the know-how to program 3D curves. I definitely hope it’s getting a beta soon.

65 Likes

That’s true, but I’m pretty sure an in-engine solution for 3D paths would be much more performant than all of them – and that’d be great

15 Likes

I definitely feel like this is going to bring new possibilities of fun mechanics to the games, let’s see how it matures

13 Likes

@NoUniqueAddress Could we customize keybinds through Customize Shortcuts or override existing keybinds when tooling is open? I rebind keys like t to actions I’ll use much more often, but I still want keybinds for path tooling, and currently nothing happens when I press t with tooling.

9 Likes

Nice, excited to see where this goes in the future.

11 Likes

Ive been stalking this for a while on the Roblox API Dump and I’m excited to say the least :100:

12 Likes