How do I script a customizable inventory?

I partially know how this could be scripted, but I’m gonna need a few questions answered because I’m unsure of a few things.

  • How do I drag a TextButton?
  • When I let go from dragging how do I check if the TextButton is inside of the inventory?
  • Does anyone who’s made this before have a step by step explanation on how I could go about creating the system for starters?

You don’t have to answer every question, but if you at least know something, or even just have an idea would you mind sharing?

1 Like

I have never did such a thing, but this is how I would I go about this:

  1. First I would find a way to know when the mouse is being hold down on a gui
  2. Then u can just make it so gui follows your mouse position (probably with RenderStepped for smooth movement)
  3. I was thinking how to detect if a gui is inside of another gui. Maybe it would work if u use just that mouse hovering function
1 Like

You can also use a UIGridLayout for the actual inventory layout

This is a fun one! Most of this answer will be links / ‘borrowed’ code since I don’t see the point in re-inventing the wheel.

Dragging a GUI
This shoudn’t be too difficult at all to implement in lua and was actually previously a built-in feature that was deprecated. As a general rule, you want to do what @nuttela_for1me suggested. Here is a module you can use or look at that attempts to replicate the draggable behaviour:

Detecting if a GUI is inside of an another
This requires a tiny bit of maths as we need to use the size and position of both elements to see if they overlap - note that this will only work with rectangles/squares due to the nature of adding position to size. This code from @WrathOfTheElvhen checks for collision on all four sides (top,bottom,left,right):

local function BoundaryCheck(Gui1, Gui2)
    local pos1, size1 = Gui1.AbsolutePosition, Gui1.AbsoluteSize;
	local pos2, size2 = Gui2.AbsolutePosition, Gui2.AbsoluteSize;

	local top = pos2.Y-pos1.Y
	local bottom = pos2.Y+size2.Y-(pos1.Y+size1.Y)
	local left = pos2.X-pos1.X
	local right = pos2.X+size2.X-(pos1.X+size1.X)

	if top > 0 then
    	Gui1.Position = Gui1.Position + UDim2.new(0,0,0,top)
    elseif bottom < 0 then
    	Gui1.Position = Gui1.Position + UDim2.new(0,0,0,bottom)
	end
	if left > 0 then
		Gui1.Position = Gui1.Position + UDim2.new(0,left,0,0)
	elseif right < 0 then
    	Gui1.Position = Gui1.Position + UDim2.new(0,right,0,0)
    end
end 

General inventory system backend
I’ve made one before but that was a long time ago and it was pretty inefficient. For this, I would recommend storing information via DataStore2 and Serialization. As far as actually adding/using objects, that has been discussed a number of times in far more depth than I can give here so I will link a few good threads:

This one is a little more basic but I suppose gives a good outline:

An open source one that slightly annoyingly uses a load of object values:

And lastly:

10 Likes

You can actually avoid this complexity if you use the MouseEnter event.
That’s what I did when I wrote the inventory for my game, Whisperbit.
I have an ImageLabel position itself to the mouse’s X and Y properties.

2020-06-18_08-35-59

If you really want draggable Ui stuff, I’d recommend this post by a Roblox staff member. It works pretty well.

When I wrote that open source inventory, I used a load of object values because I wanted things to be simple. The only real drawback to that system is that you can’t have infinite items in your backpack. It works fine for most games.

This is a viable alternative though I would be weary of using the default MouseEnter/Leave events as they can be unreliable, especially when moving the mouse through multiple objects at speed. I would consider using something like this module, which attempts to solve the problem.

1 Like

Honestly MouseEnter/MouseLeave is the quicker way, but as people say it’s unreliable. I like this method more given by @Increated, because it’s not only the harder way but it’s reliable enough to where there are no bugs.

Thanks for the help!

One more question though, you have a script that makes it so 2 guis inside of eachother can function something. But it uses size to create the boundary in order for this to happen.

What about mouses? They don’t really have a size, so how do you know if the mouse’s hit position is inside of a gui for like dragging a tool.

I was going to give an answer based on the last code sample but it just occurred to me that PlayerGui has a function to get a table of visible guiobjects at a certain point on the screen called GetGuiObjectsAtPosition so i would just recommend feeding that Mouse.X and Mouse.Y.

Ah I see now, it prints only if the mouse is inside of a gui. Thanks for your help!

No problem, glad I could help!