Simple Inventory GUI

Resources Community Resources
, ,
#1

Hello everyone!

I don't usually make anything open sourced or whatever, but I was practicing my GUI skills and thought "Hey, why not just share this with everyone else, maybe they'll have a better use for it than me.", so here we are.
This Inventory GUI is nothing less special than the rest, except for it's design, maybe. I'll go through quickly how it looks and functions, what's already in it and what you should add to make it work better.
Preview

ingame
ingame1599×899 155 KB

phone version
phone version872×415 58.1 KB

standalone

That’s essentially how the GUI looks in-game and by itself. A simple image but with the advantage of roblox GUI elements such as the ScrollFrame and ImageButtons.

When we are at these, let me show you the hierarchy of the whole GUI:

Hierarchy

hierarchy

Going one by one, nothing seems out of the ordinary. We’ve got the ImageLabel named “InventoryBG” which is the image of the inventory box. It holds an Aspect Ratio object so it can scale properly with the rest of the elements on all screens.

The “List” object is the ScrollFrame I mentioned earlier, it is automatically scaled based on the amount of frames inside it. However if the “AutomaticCanvasSize” property fails you, you can enable the script “AutomaticSize” which I’ve placed inside of it that’ll do the same job, otherwise delete it. It also holds a “Grid Layout” object which can be modified if you don’t like how it looks already.

Moving on to each frame inside of the “List” object, it contains only one thing which is an ImageButton object. This object should contain the image of your item. Currently there is no script attached to it, but you should make one to determine the logic of when a player presses the item. Duplicating/Deleting these frames is absolutely fine and shouldn’t break anything.

The final piece of the puzzle is the simple ImageButton named “CloseButton”. It’s sole purpose is to animate the whole inventory to go away from the screen in a satisfying manner. The script is below:

Code 
--[[
	This script is supposed to close the inventory.
	It can be as simple as setting it's visibility to false
	or animating it going off screen.
	
	I chose the latter cause let's face it, it's much more satisfying
]]

local TWEEN_SERVICE = game:GetService("TweenService")

local button = script.Parent
local Inventory = button.Parent

local info = TweenInfo.new(
	1.4,
	Enum.EasingStyle.Quint,
	Enum.EasingDirection.InOut,
	0,
	false,
	0
)

local hideInventory = TWEEN_SERVICE:Create(Inventory, info, {Position = Inventory.Position + UDim2.new(-1, 0, 0, 0)})

button.Activated:Connect(function()
	hideInventory:Play()
	
	-- This just simply hides it once the animation completes.
	hideInventory.Completed:Connect(function()
		Inventory.Visible = false
	end)
end)

This is all there is! I hope you fellas might have a use for it. Unfortunately, it’s only in a blue color scheme, however you can modify the whole image if you own photoshop. I’ve included the PS file down below too.

Files: InventoryGUI.rbxl (38.4 KB) inventoryGUI.psd (336.2 KB)

– Happy Coding everyone :slight_smile:

17 Likes
#2

That Gui Image looks really good! :+1:

1 Like