Please look at this post: How to make a badge list - #22 by TheH0meLands
Hello! So recently i’ve seen a tonn of badge list type posts in #help-and-feedback:scripting-support . So today, i’m going to show u how to make it!
First, we need to create our UI.
So inside starter gui, create a screen gui, then create a frame inside the screen ui. Make the frame nice and big, something like this will do:
Once you make the frame, name it “Holder” and add a Ui grid instance into it. This will allow us to create a grid ui for our badges.
Next, create a new frame and name it the badge’s name. For this i’ll name it “Welcome Badge”
Inside that frame, create a text label and set it’s size to “{1, 0},{0.2, 0}”. This will be the badge name. Change the name of the textlabel to “BadgeName” and set the text to “???”. That’s what will display to the people who dont own the badge
Once you make the name text, create a new image label and set it to a random image.
The size of this will be {1, 0},{0.8, 0} and the position will be {0, 0},{0.2, 0}. Set the image color to 0,0,0. This is so our image has a silhouette effect.
This is my UI if you want to copy it:
Now that we’ve gotten our ui, we can start scripting!
scripting
Create a local script inside of StarterPlayerScripts and name it “BadgelistScript”.
First, lets make an array which will store our badges.
Since i’ll only have 1 badge, i’ll have one badge data table. You can add as many as you want.
local badgeService = game:GetService("BadgeService")
local badges = {
[1] = {
["name"] = "Badge1", -- change to the name of the frame that holds the badge's ui
["displayName"] = "SBS welcome badge", -- change to the name of the badge
['id'] = 174605507 -- change to badge id
}
}
Next, we’ll need to check if the player owns the badge:
local badgeService = game:GetService("BadgeService")
local players = game:GetService("Players")
local player = players.LocalPlayer
local badges = {
[1] = {
["name"] = "Badge1", -- change to the name of the frame that holds the badge's ui
["displayName"] = "SBS welcome badge", -- change to the name of the badge
['id'] = 174605507 -- change to badge id
}
}
for _, data in ipairs(badges) do
local badgeId = data.id
local badgeName = data.displayName
local frameName = data.name
if badgeService:UserHasBadgeAsync(player.UserId, badgeId) then
-- TODO: display that user owns badge
else
-- TODO: display that user DOESN't owns badge
end
end
Now that we check this, we need to display that the user owns/doesn’t own the badge. To do this, we can add the following code:
local badgeService = game:GetService("BadgeService")
local players = game:GetService("Players")
local player = players.LocalPlayer
local badgesHolder = player.PlayerGui:WaitForChild("BadgeUi"):WaitForChild("Holder")
local badges = {
[1] = {
["name"] = "Badge1", -- change to the name of the frame that holds the badge's ui
["displayName"] = "SBS welcome badge", -- change to the name of the badge
['id'] = 174605507 -- change to badge id
}
}
for _, data in ipairs(badges) do
local badgeId = data.id
local badgeName = data.displayName
local frameName = data.name
local frameInstance = badgesHolder:FindFirstChild(frameName)
if not frameInstance then warn(string.format("Could not find badge frame with name of %s", frameName)) continue end
local badgeNameInstance = frameInstance:WaitForChild("BadgeName")
local badgeIconInstance = frameInstance:WaitForChild("BadgeIcon")
local success, ownsBadge = pcall(function()
return badgeService:UserHasBadgeAsync(player.UserId, badgeId)
end)
if success and ownsBadge then
badgeIconInstance.ImageColor3 = Color3.fromRGB(255, 255, 255)
badgeNameInstance.Text = badgeName
else
badgeIconInstance.ImageColor3 = Color3.fromRGB(0, 0, 0)
badgeNameInstance.Text = "???"
end
end
Since I own the badge, it’ll display like this:
If i didn’t own the badge it would’ve been like this:
there you go! Now we have a simple badge todo list script. Now there’s an issue with this script, it’ll only check if the player owns the badge after the join. Not if they get the badge during the session. So to fix this, we can wrap the code in a while true do. Paste the following code:
local badgeService = game:GetService("BadgeService")
local runService = game:GetService("RunService")
local players = game:GetService("Players")
local player = players.LocalPlayer
local badgesHolder = player.PlayerGui:WaitForChild("BadgeUi"):WaitForChild("Holder")
local badges = {
[1] = {
["name"] = "Badge1", -- change to the name of the frame that holds the badge's ui
["displayName"] = "SBS welcome badge", -- change to the name of the badge
['id'] = 174605507 -- change to badge id
}
}
local function getUserOwnedBadges()
for _, data in ipairs(badges) do
local badgeId = data.id
local badgeName = data.displayName
local frameName = data.name
local frameInstance = badgesHolder:FindFirstChild(frameName)
if not frameInstance then warn(string.format("Could not find badge frame with name of %s", frameName)) continue end
local badgeNameInstance = frameInstance:WaitForChild("BadgeName")
local badgeIconInstance = frameInstance:WaitForChild("BadgeIcon")
local success, ownsBadge = pcall(function()
return badgeService:UserHasBadgeAsync(player.UserId, badgeId)
end)
if ownsBadge and success then
badgeIconInstance.ImageColor3 = Color3.fromRGB(255, 255, 255)
badgeNameInstance.Text = badgeName
elseif typeof(ownsBadge):lower() == "string" then
warn(string.format("failed to get badge data for reason of: %s", ownsBadge))
else
badgeIconInstance.ImageColor3 = Color3.fromRGB(0, 0, 0)
badgeNameInstance.Text = "???"
end
end
end
while true do
getUserOwnedBadges()
task.wait(1)
end
There you go, now you have a simple badge list hope this could help you out! If you have any questions feel free to ask.
place file:
badge list tutorial v2.rbxl (46.1 KB)
(43.7 KB)