How would i go make a "draggable" skill tree gui, and keep it correctly sized for all devices?

Help and Feedback Art Design Support
, ,
#1

So i wanted to make a skill tree for a td game (woah so unique totally!!), similar to the game called “Infinitode 2” (probably no one knows it), now i don’t need a tutorial on how to do a skill tree or of sorts as i already know how to do one myself by coding. My real issue is on the gui side:

I wanted to make “draggable” skill tree, i know there are tools out there to make
draggable gui, but my concern here is that i want to keep that gui to still take the entire screen and that i would like it to still fit other devices without it like getting offset or stuff on other devices?

ex:

edit: i have no idea if i should put this onto scripting instead

1 Like
#2

sori for bumping this but i really would like to know

#3

This is a cool idea and I am not the most sure on how to do this, however I think if you add the draggable UI function to the frame with the skill-tree, and make the size of the frame exceed screen limits then in theory it should work fine. However I just don’t know if they kept dragging the UI they could reveal what’s under the frame (i.e the game) so look into if the position is over a certain number they cant drag it anymore.

1 Like
#4

ig i can just clamp the positions from the dragging or stuff

tho still idk if it will get offset on different devices: scale kinda tries to get the same size on every devices, it won’t keep the ratio making images being squeezed, i can fix that using ui aspect ratios but i am affraid like said that it offsets some stuff

#5

Yes exactly, I remember seeing a draggableUi module that had bounding boxes. Try search for something implemented in that or just clamp the position relative.

#6

ye i saw that but didn’t really work nice, i just used another module and added my own clamp stuff
and it works well!

(don’t mind the gui i’m trying to find a good design idea)

#7

Aha that’s perfect you’re welcome! Would you mind sharing a bit into how you made your clamp stuff incase anyone in the future stumbles across this post and decides to recreate it?

2 Likes
#8

Sure, here is a simple thing i added from another module that is pretty used (if i remember it is called draggable object or smth: Simple Module For Creating Draggable GUI Elements)

all i did was change a few stuff in a function called “update” in it:

image
image1067×510 70 KB

code originally didn’t really follow stylua or smth like that i forgot and i kinda tried to follow the code style but i was lazy (also i’m bad at naming variables)

local function update(input)
		local delta 		= input.Position - dragStart
		local viewportBounds = camera.ViewportSize
		
		local offsetMinX = viewportBounds.X * -1 / 2
		local offsetMaxX = viewportBounds.X / 2
		local clampedOffsetX = math.clamp(startPos.X.Offset + delta.X, offsetMinX, offsetMaxX)
		
		local offsetMinY = viewportBounds.Y * -1 / 2
		local offsetMaxY = viewportBounds.Y / 2
		local clampedOffsetY = math.clamp(startPos.Y.Offset + delta.Y, offsetMinY, offsetMaxY)
		
		local newPosition	= UDim2_new(startPos.X.Scale, clampedOffsetX, startPos.Y.Scale, clampedOffsetY)
		object.Position 	= newPosition

		return newPosition
	end

all i had to do was calculate some stuff with the viewport cam stuff
tho i personally didn’t test that on other devices

2 Likes
#9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.