How would i make a backpack UI like this?

[JustChillForIt (spiderman)]

Hello, I’m trying to create a backpack/inventory UI like this:

I know how to to make it look the way it does, but I don’t know how to make the actual UI with scripting.

Any type of help is appreciated, thanks.

[BonesIsUseless (Bones)]

i have no idea what this game is or how these items work but i’m assuming when you click or use the selected item, there’s a cooldown that’s shown by using the transparent red frame
you could use either TweenService or :TweenSize() with the tween speed set as the cooldown speed

[JustChillForIt (spiderman)]

I understand how to make the UI and how it looks and such, but I’m just trying to understand how to actually script this, thank you though.

[mejackdaawesome2928 (ergophobia)]

based on what youre asking (cuz its a good idea to elaborate on what you want instead of sendng a screenshot of a game i dont even know the name of) heres something i cooked up:

local tweenservice = game:GetService('TweenService')
local button = --the button here
local redframe = --the red frame showing cooldown. remember to set anchorpoint to (0, 1)
local cooldown = 2 --set to the desired cooldown
game:GetService('UserInputService').InputBegan:Connect(function(key,processed)
    if not key.KeyCode == Enum.KeyCode.One then return end
    
    redframe.Visible = true
    local maxsize = redframe.size
    local tween = tweenservice:Create(redframe, TweenInfo.new(cooldown), {['Size'] = Udim2.new(maxsize.X, 0)})
    tween:Play()
    tween.Completed:Wait()
    redframe.Visible = false
    redframe.Size = maxsize
end)

i havent tested this, so theres probably some types or errors. this should give you the general idea of how to do it, tho