Issue with InventorySystem

Cosm080 · December 1, 2024, 6:45pm

Hello Roblox Devs,

I’m facing an issue in my project where I’m trying to display items in a GUI based on their rarity, with each rarity applying distinct visual effects (such as color changes, glow effects, etc.). However, despite following standard practices, I’m encountering several problems that prevent the system from functioning correctly.

Problem Description:

I have a system where players can view items in their backpack, which are categorized by rarity (Common, Uncommon, Rare, Epic, Mythical, Legendary). I’m trying to visual the weapon cells in order based on these rarities, how can I do that?.

I want to see first the weapons with Common, then Uncommon, Rare, Epic, Mythical, Legendary and lastly Unknown.

here’s how I see them at the moment (disordered)

Here’s my script:

local Players = game:GetService(“Players”)
local player = Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local items = {}
local buttons = {}

local EasyVisuals = require(game.ReplicatedStorage.EasyVisuals)

game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false) – Disable the original backpack GUI

– Map of rarities to colors (updated with more vivid but slightly darker colors)
local rarityColors = {
Common = Color3.fromRGB(220, 220, 220), – Light gray
Uncommon = Color3.fromRGB(46, 139, 87), – Bright dark green
Rare = Color3.fromRGB(70, 130, 180), – Steel blue
Epic = Color3.fromRGB(148, 0, 211), – Intense purple
Mythical = Color3.fromRGB(139, 0, 0), – Dark red
Legendary = Color3.fromRGB(255, 215, 0), – Gold
Unknown = nil – No specific color
}

– Table to manage active effects
local activeEffects = {}

– Function to create a glow effect for Mythical
local function createIntenseGlowEffect(button)
local uiStroke = Instance.new(“UIStroke”)
uiStroke.Parent = button
uiStroke.Thickness = 4 – Thicker border
uiStroke.Color = Color3.fromRGB(255, 0, 0) – Intense red
uiStroke.Transparency = 0.1 – Nearly opaque

-- Pulsing effect
local tweenService = game:GetService("TweenService")
local tween = tweenService:Create(uiStroke, TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
    Transparency = 0.5 -- Transparency variation
})
tween:Play()

-- Additional light (Glow)
local lightEffect = Instance.new("ImageLabel")
lightEffect.Parent = button
lightEffect.BackgroundTransparency = 1
lightEffect.Size = UDim2.new(1.5, 0, 1.5, 0) -- Effect size
lightEffect.Position = UDim2.new(-0.25, 0, -0.25, 0) -- Central positioning
lightEffect.Image = "rbxassetid://2581284638" -- Glow image
lightEffect.ImageColor3 = Color3.fromRGB(255, 0, 0) -- Intense red
lightEffect.ImageTransparency = 0.6 -- Nearly transparent

-- Transparency animation for the glow
local glowTween = tweenService:Create(lightEffect, TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
    ImageTransparency = 0.8 -- Pulsing glow
})
glowTween:Play()

end

– Function to apply visual effects based on rarity
local function applyVisualsForRarity(button, rarityValue)
button.Name = rarityValue … “Button”

-- Remove previous effects
if activeEffects[button] then
    activeEffects[button]:Destroy()
    activeEffects[button] = nil
end

-- Basic configurations
button.BackgroundTransparency = 0.6 -- Semi-transparent background
button.ImageTransparency = 0.1 -- Weapon image is visible

-- Animated effect for background color
local tweenService = game:GetService("TweenService")
local originalColor = button.BackgroundColor3

-- Specific configurations for each rarity
if rarityValue == "Legendary" then
    button.BackgroundColor3 = Color3.fromRGB(255, 223, 0) -- Light gold
    local effect = EasyVisuals.new(button, "FireStroke", 0.5, 5, false, Color3.fromRGB(255, 69, 0))
    activeEffects[button] = effect
elseif rarityValue == "Mythical" then
    button.BackgroundColor3 = Color3.fromRGB(139, 0, 0) -- Dark red
    createIntenseGlowEffect(button) -- Enhanced effect for Mythical
elseif rarityValue == "Epic" then
    button.BackgroundColor3 = Color3.fromRGB(148, 0, 211) -- Intense purple
    -- Subtle animation for Epic
    local tween = tweenService:Create(button, TweenInfo.new(1.5, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
        BackgroundTransparency = 0.5
    })
    tween:Play()
elseif rarityValue == "Rare" then
    button.BackgroundColor3 = Color3.fromRGB(70, 130, 180) -- Steel blue
    local stroke = Instance.new("UIStroke", button)
    stroke.Thickness = 2
    stroke.Color = Color3.fromRGB(135, 206, 250) -- Light blue
    stroke.Transparency = 0.4

    -- Pulsing effect for Rare
    local tween = tweenService:Create(stroke, TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
        Transparency = 0.6 -- Transparency variation
    })
    tween:Play()
    activeEffects[button] = stroke
elseif rarityValue == "Uncommon" then
    button.BackgroundColor3 = Color3.fromRGB(46, 139, 87) -- Bright dark green
    local stroke = Instance.new("UIStroke", button)
    stroke.Thickness = 2
    stroke.Color = Color3.fromRGB(124, 252, 0) -- Lime green
    stroke.Transparency = 0.4
    stroke.Parent = button

    -- Animate the border for a pulsing effect
    local tween = tweenService:Create(stroke, TweenInfo.new(1.5, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
        Transparency = 0.6 -- Transparency variation
    })
    tween:Play()
    activeEffects[button] = stroke
elseif rarityValue == "Common" then
    button.BackgroundColor3 = Color3.fromRGB(220, 220, 220) -- Light gray
    -- Subtle animation for the Common button
    local tween = tweenService:Create(button, TweenInfo.new(2, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, true), {
        BackgroundTransparency = 0.65
    })
    tween:Play()
else
    -- Other or unknown rarities
    button.BackgroundColor3 = rarityColors[rarityValue] or Color3.fromRGB(255, 255, 255)
end

end

– Function to refresh and create new buttons
function refresh(filteredItems)
– Remove old buttons
for _, v in pairs(buttons) do
v:Destroy()
end
buttons = {}

-- Create new buttons for each item
for i, v in pairs(filteredItems) do
    local button = script.Sample:Clone()
    button.Name = v.Name
    button.LayoutOrder = i
    button.Parent = script.Parent.Handler
    button.Image = v.TextureId

    local uiCorner = Instance.new("UICorner")
    uiCorner.CornerRadius = UDim.new(0, 10)
    uiCorner.Parent = button

    local rarity = v:FindFirstChild("Rarity")
    if rarity and rarity:IsA("StringValue") then
        applyVisualsForRarity(button, rarity.Value)
    else
        applyVisualsForRarity(button, "Unknown")
    end

    table.insert(buttons, button)

    button.MouseButton1Click:Connect(function()
        if script.Parent.Handler.Selected.Value == nil or script.Parent.Handler.Selected.Value ~= v then
            script.Parent.Frame.ItemName.Text = v.Name
            script.Parent.Frame.ImageLabel.Image = v.TextureId
            local rarity = v:FindFirstChild("Rarity")
            if rarity and rarity:IsA("StringValue") then
                script.Parent.Frame.RarityItem.Text = rarity.Value
                script.Parent.Frame.RarityItem.TextColor3 = rarityColors[rarity.Value] or Color3.fromRGB(255, 255, 255)
            else
                script.Parent.Frame.RarityItem.Text = "Unknown"
                script.Parent.Frame.RarityItem.TextColor3 = Color3.fromRGB(255, 255, 255)
            end

            script.Parent.Handler.Selected.Value = v
            if script.Parent.Handler.Selected.Value ~= script.Parent.Handler.Equipped.Value then
                script.Parent.Handler.Location.Value = v.Parent
                script.Parent.Frame.Equip.Text = "Equip"
            else
                script.Parent.Frame.Equip.Text = "Unequip"
            end
        end
    end)
end

end

– Function for search
local function searchWeapons(query)
local filteredItems = {}
for _, v in pairs(items) do
if v.Name:lower():find(query:lower()) then
table.insert(filteredItems, v)
end
end
refresh(filteredItems)
end

– Add listener for the search TextBox
local searchBox = script.Parent.SearchFrame.TextBox
searchBox:GetPropertyChangedSignal(“Text”):Connect(function()
searchWeapons(searchBox.Text)
end)

function backpackRefresh()
items = {}
search(character)
search(player.Backpack)
refresh(items)
end

function search(location)
for _, v in pairs(location:GetChildren()) do
if v:IsA(“Tool”) then
table.insert(items, v)
end
end
end

player.Backpack.ChildAdded:Connect(backpackRefresh)
player.Backpack.ChildRemoved:Connect(backpackRefresh)
character.ChildAdded:Connect(backpackRefresh)
character.ChildRemoved:Connect(backpackRefresh)

backpackRefresh()

I’ve attached the relevant code below, and I’d be happy to provide further details if needed. Any help or suggestions would be greatly appreciated!

Thanks in advance!

RobloxWobot · December 1, 2024, 7:16pm

Using GridLayout, you could use LayoutOrder and give all cells of Common items the value of 1 and all Uncommon items value of 2 etc. This will sort them in order of rarity.

Cosm080 · December 1, 2024, 7:55pm

Hey, I did it. It works but now I don’t see some transparency effects I had before, can you help?

Before:

After:

Here’s the script If you need It:

local Players = game:GetService(“Players”)
local player = Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local items = {}
local buttons = {}

local EasyVisuals = require(game.ReplicatedStorage.EasyVisuals)
game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)

– Ordine e colori delle rarità
local rarityData = {
Common = {color = Color3.fromRGB(220, 220, 220), order = 1},
Uncommon = {color = Color3.fromRGB(46, 139, 87), order = 2},
Rare = {color = Color3.fromRGB(70, 130, 180), order = 3},
Epic = {color = Color3.fromRGB(148, 0, 211), order = 4},
Mythical = {color = Color3.fromRGB(139, 0, 0), order = 5},
Legendary = {color = Color3.fromRGB(255, 215, 0), order = 6},
Unknown = {color = Color3.fromRGB(255, 255, 255), order = 7}
}

local activeEffects = {}

– Crea un effetto glow per i pulsanti Mythical
local function createIntenseGlowEffect(button)
local uiStroke = Instance.new(“UIStroke”)
uiStroke.Parent = button
uiStroke.Thickness = 4
uiStroke.Color = Color3.fromRGB(255, 0, 0)
uiStroke.Transparency = 0.1

local tweenService = game:GetService("TweenService")
local tween = tweenService:Create(uiStroke, TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
	Transparency = 0.5
})
tween:Play()

local lightEffect = Instance.new("ImageLabel")
lightEffect.Parent = button
lightEffect.BackgroundTransparency = 1
lightEffect.Size = UDim2.new(1.5, 0, 1.5, 0)
lightEffect.Position = UDim2.new(-0.25, 0, -0.25, 0)
lightEffect.Image = "rbxassetid://2581284638"
lightEffect.ImageColor3 = Color3.fromRGB(255, 0, 0)
lightEffect.ImageTransparency = 0.6

local glowTween = tweenService:Create(lightEffect, TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {
	ImageTransparency = 0.8
})
glowTween:Play()

activeEffects[button] = {uiStroke, glowTween, lightEffect}

end

– Funzione per applicare effetti visivi e ordine in base alla rarità
local function applyVisualsForRarity(button, rarityValue)
local rarityInfo = rarityData[rarityValue] or rarityData.Unknown
button.BackgroundColor3 = rarityInfo.color
button.LayoutOrder = rarityInfo.order

if activeEffects[button] then
	for _, effect in pairs(activeEffects[button]) do
		if typeof(effect) == "Instance" then
			effect:Destroy()
		end
	end
	activeEffects[button] = nil
end

if rarityValue == "Mythical" then
	createIntenseGlowEffect(button)
elseif rarityValue == "Legendary" then
	local effect = EasyVisuals.new(button, "FireStroke", 0.5, 5, false, Color3.fromRGB(255, 69, 0))
	activeEffects[button] = {effect}
end

end

– Funzione per rinfrescare e nascondere pulsanti non filtrati
function refresh(filteredItems)
– Nascondi tutti i pulsanti
for _, button in pairs(buttons) do
button.Visible = false
end

-- Rendi visibili solo i pulsanti filtrati
for _, v in pairs(filteredItems) do
	local button = buttons[v.Name]

	if not button then
		-- Crea un nuovo pulsante se non esiste già
		button = script.Sample:Clone()
		buttons[v.Name] = button
		button.Parent = script.Parent.Handler

		-- Eventi per il clic del pulsante
		button.MouseButton1Click:Connect(function()
			if script.Parent.Handler.Selected.Value == nil or script.Parent.Handler.Selected.Value ~= v then
				script.Parent.Frame.ItemName.Text = v.Name
				script.Parent.Frame.ImageLabel.Image = v.TextureId
				script.Parent.Frame.RarityItem.Text = v:FindFirstChild("Rarity") and v.Rarity.Value or "Unknown"
				script.Parent.Frame.RarityItem.TextColor3 = rarityData[v.Rarity.Value].color or Color3.fromRGB(255, 255, 255)

				script.Parent.Handler.Selected.Value = v
				script.Parent.Frame.Equip.Text = script.Parent.Handler.Selected.Value ~= script.Parent.Handler.Equipped.Value and "Equip" or "Unequip"
			end
		end)
	end

	-- Aggiorna i dettagli del pulsante
	button.Visible = true
	button.Name = v.Name
	button.Image = v.TextureId

	local uiCorner = button:FindFirstChild("UICorner") or Instance.new("UICorner", button)
	uiCorner.CornerRadius = UDim.new(0, 10)

	-- Applica effetti visivi
	local rarity = v:FindFirstChild("Rarity")
	applyVisualsForRarity(button, rarity and rarity.Value or "Unknown")
end

end

– Funzione di ricerca
local function searchWeapons(query)
local filteredItems = {}

for _, v in pairs(items) do
	if v.Name:lower():find(query:lower()) then
		table.insert(filteredItems, v)
	end
end

table.sort(filteredItems, function(a, b)
	local rarityA = a:FindFirstChild("Rarity")
	local rarityB = b:FindFirstChild("Rarity")
	local orderA = rarityA and rarityData[rarityA.Value].order or rarityData.Unknown.order
	local orderB = rarityB and rarityData[rarityB.Value].order or rarityData.Unknown.order
	return orderA < orderB
end)

refresh(filteredItems)

end

– Collegamento della casella di ricerca
local searchBox = script.Parent.SearchFrame.TextBox
searchBox:GetPropertyChangedSignal(“Text”):Connect(function()
searchWeapons(searchBox.Text)
end)

function backpackRefresh()
items = {}
search(character)
search(player.Backpack)
refresh(items)
end

function search(location)
for _, v in pairs(location:GetChildren()) do
if v:IsA(“Tool”) then
table.insert(items, v)
end
end
end

player.Backpack.ChildAdded:Connect(backpackRefresh)
player.Backpack.ChildRemoved:Connect(backpackRefresh)
character.ChildAdded:Connect(backpackRefresh)
character.ChildRemoved:Connect(backpackRefresh)

backpackRefresh()