How do you create a badge index gui in-game?
I'm trying to make a badge index GUI in-game that shows the badges you achieved and the badges you still haven't achieved too, where the badges you achieved will have a green background color indicating you already found them and the badges you haven't achieved yet will just have a grey/no background color indicating that they still need to be found.
I also want to make it so that you can click on the badge image from the badge index and it views a hint on how to get it and what area of the map it can be found in.
The best example that has a badge index GUI is this game:
https://www.roblox.com/games/7768149183/238-Find-The-Trollfaces
or this game too: https://www.roblox.com/games/7896264844/Find-the-Markers-151
I'm trying to make a badge index GUI exactly or almost the same as the one in the games mentioned above or any other of the "Find The..." games.
Can anyone please walk me through step by step how to make this badge index GUI?
(I'm a beginner sorry if I ask a lot!)
Thank you very much!
1 answer
Hello there! I will explain you how to do that.
First, we have to make a table where we will store every badge id we want for index:
local BadgeIDs = {1, 2, 3} -- 1, 2 and 3 are just examples by the way
Then, we will use UserHasBadgeAsync along with GetBadgeInfoAsync (Part of BadgeService ) to check if the user has the badge and get informations about it:
local badgeIDs = {100, 200}
local BadgeService = game:GetService("BadgeService")
game.Players.PlayerAdded:Connect(function(player) -- Connect to PlayerAdded event
for i,v in pairs(badgeIDs) do
local success, hasBadge = pcall(function() -- Make a protected call, useful for handling errors.
return BadgeService:UserHasBadgeAsync(player.UserId, v)
end)
end
end)
Quick note: success will return either false or true, use this for error handling
Now, we have to create the new buttons for the badge.
local success2, result = pcall(function()
return BadgeService:GetBadgeInfoAsync(v)
end)
local label = Instance.new("TextLabel", player.PlayerGui.ScreenGui.Frame) -- Change ScreenGui.Frame to
-- The frame where you want the buttons to be
if success2 then -- Example of handling errors
label.Text = result.Name
label.Name = result.Name
else
warn("Unable to fetch data about "..v)
end
if hasBadge then
label.BackgroundColor3 = Color3.new(0.666667, 1, 0) -- Green color for owned badge
else
label.BackgroundColor3 = Color3.new(1, 0, 0) -- Red color for not owned badge
end
Last, we will connect the event MouseButton1Down of buttons to display a frame
v.MouseButton1Down:Connect(function()
if not player.PlayerGui.ScreenGui.Hint.Visible then
player.PlayerGui.ScreenGui.Hint.Visible = true
else
player.PlayerGui.ScreenGui.Hint.Visible = false
end
end)
Now, your code should look like that:
local badgeIDs = {100, 200}
local BadgeService = game:GetService("BadgeService")
game.Players.PlayerAdded:Connect(function(player) -- Connect to PlayerAdded event
for i,v in pairs(badgeIDs) do
local success, hasBadge = pcall(function() -- Make a protected call, useful for handling errors.
return BadgeService:UserHasBadgeAsync(player.UserId, v)
end)
local success2, result = pcall(function()
return BadgeService:GetBadgeInfoAsync(v)
end)
local label = Instance.new("TextLabel", player.PlayerGui.ScreenGui.Frame) -- Change ScreenGui.Frame to
-- The frame where you want the buttons to be
if success2 then -- Example of handling errors
label.Text = result.Name
label.Name = result.Name
else
warn("Unable to fetch data about "..v)
end
if hasBadge then
label.BackgroundColor3 = Color3.new(0.666667, 1, 0) -- Green color for owned badge
else
label.BackgroundColor3 = Color3.new(1, 0, 0) -- Red color for not owned badge
end
label.MouseButton1Down:Connect(function()
if not player.PlayerGui.ScreenGui.Hint.Visible then
player.PlayerGui.ScreenGui.Hint.Visible = true
else
player.PlayerGui.Hint.Visible = false
end
end)
end
end)
If you want to read more about badge service, visit this Hope it helped!
0