Introduction
Roblox recently introduced Free Badge Creations! which allowed a larger variety of games to use Badges, Many games try to implement this as a custom system. But you can not read these on your profile, In this tutorial I will teach you how to create a custom badge system while still having it pop up to the profile page.I hope this will help you, This is my first tutorial. If you have any issues just reply and I will help you!
NOTE: I will be teaching how to make a custom badge pop up system, I will not be teaching how to give a player an non-existent badge.
Scripting
Now in order to start scripting we first need to turn of the badge gui. Thankfully roblox has a function called :SetCore and :SetCoreGui we can turn of the gui like this (This is a local script in StarterGui)
local starterGui = game:GetService(“StarterGui”)
starterGui:SetCoreGuiEnabled(“BadgesNotificationsActive”, false)
At the top we will also add marketPlaceService for the later needs.
local marketPlaceService = game:GetService(“MarketPlaceService”)
Now the BadgeGui will no longer pop up, So now let’s move over to the server. (A new Script in ServerScriptService)
So what our script will have a function that gives a badge to the profile using BadgeService and using a remote event to tell the client to show your custom badge gui.
local badgeService = game:GetService(“BadgeService”)
local function giftBadge(plr, badgeId)
badgeService:AwardBadge(plr, badgeId)
end
Now in ReplicatedStorage make a new RemoteEvent called “GiftBadge”
We now need to fire that event so at the top add
local replicatedStorage = game:GetService(“ReplicatedStorage”)
local event = replicatedStorage:WaitForChild(“GiftBadge”)
Now in the function giftBadge add
event:FireClient(plr, badgeId)
Now when we call giftBadge() the given player will redeem the badge and the client will receive that it should show the gui but won’t respond in any way, So lets fix that!
(Back to the local script)
Now this is the new code
local starterGui = game:GetService(“StarterGui”)
local replicatedStorage = game:GetService(“ReplicatedStorage”)
local event = replicatedStorage:WaitForChild(“GiftBadge”)
starterGui:SetCoreGui(“BadgesNotificationsActive”, false)
event.OnClientEvent:Connect(function(badgeId)
— ur code here
end)
Now you see the “ur code” line, we will now be working on that!
First make a gui with a namegui and imagegui
Now in order to code it we need to receive badge data, we will be using marketplace service. So at the top make a new variable called marketplace service
Now back to scripting
local gui = —[[ur gui]]:clone()
gui.Visible = true
gui.Size = UDim2.new(0,0,0,0)
gui:TweenSize(—[[ur udim2 size]])
Now when we test it both the name is default, so we will fix this by using marketplace service like this
local gui = —[[ur gui]]:clone()
gui.Visible = true
gui.namegui.Text = marketPlaceService:GetProductInfo(badgeId).Name
gui.Size = UDim2.new(0,0,0,0)
gui:TweenSize(—[[ur udim2 size]])
Now the label will display properly but the image won’t so we have to use a roblox owned api, In order to do so since roblox does not allow you to access the api you need to use a proxy.
For this tutorial we will use RoProxy, I will cover how to do so soon.
