Most code by @ZU6N from his youtube tutorial: How To Make A Custom Badge Notification Just Like Doors! - YouTube , how is this tutorial different? This tutorial includes how to tween the notification and has the entire code to copy & paste if you want. Make sure to drop him a sub!
Hey there! In this new and improved tutorial, I’ll show you how to make a custom badge notification! Let’s go right into it!
Old one if you really want to see it for some reason: Custom Badge Notification Tutorial
GUI Creation
First of all, we want to create the GUI for the badge notification, so insert a ScreenGui inside StarterGui and rename it to Badge.
Now insert a Frame into the Badge Gui.
And now it should look like this:
Next, select the frame and position it in the area where you want the badge notification to be located. (If you can’t select the frame, you can right-click it and click on "Select UI Layer 'Frame", or select the frame in the explorer)
This is where I will place my badge notification:
Now resize the UI to fit your needs:
Now we will insert 3 GUI objects, 2 text labels, and 1 image label.
Position the objects to fit properly on the badge notification, like this:
What I would recommend is to spend some time designing the UI to look appealing to players, now that the UI is out of the way, let’s rename the three objects. (Sorry for the bad writing)
Rename the Name Label to “Name”, the Description Label to “Description”, and the Image Label to “Icon”. It should look something like this:
Now I’m going to quickly design the notification so it looks better than the default badge notification, here’s what I came up with:
Now to keep track of the positions, open up notepad, and then copy & paste the current position of the notification frame.
Go back into Roblox Studio and go to the X value for the position, which is the first set of numbers that you see in the position property:
Change the X value to 1.1 and you shouldn’t be able to see the UI anymore:
Now, copy & paste the current position of the UI into the notepad:
Now delete the braces around the points to make it easier for later:
After you’re done with that, make sure to move the Badge UI to the ReplicatedStorage.
Disabling The Default Badge Notification
Insert a local script to StarterPlayerScripts and name it “BadgeNotifDisable”
Now the code is very short, only one line!
game:GetService("StarterGui"):SetCore("BadgesNotificationsActive",false)
Now, what does this do? This simple line disables the default badge notification so it won’t pop up with the custom badge! It uses :SetCore("BadgesNotificationsActive, false) to disable the Badge Notifications! It disables it through the boolean false. Now let’s move on to the main script, (or module script) behind the custom notification!
The Main Module Script
Insert a ModuleScript into the ServerScriptService and name it “BadgeUI”
Now make sure to write all the code inside this:
local module = {}
-- Type code here
return module
This will be very long, so I won’t be very detailed in this explanation, but I will try to briefly explain what each portion does. First type in function:
function module.OpenBadgeUI(UserId,BadgeId)
end
Now, what does this function do? This function has two parameters (which are necessary by the way), called UserId and BadgeId. The UserId and BadgeId will be used in getting the badge to be displayed on the UI. Let’s move on to the variables, which will be located inside the function.
Variables
local Name = game:GetService("Players"):GetNameFromUserIdAsync(UserId)
local BadgeUI = game:GetService("ReplicatedStorage").Badge:Clone()
local frame = BadgeUI.Frame
local TS = game:GetService("TweenService")
These 4 lines are very important, even though they don’t do anything yet. The Name variable is used to get the UserId from the player. Next, we have the BadgeUI variable. What it does is get the Badge UI that we created earlier and clones it, so it can be reused indefinitely. Another variable we have is the frame variable. All this variable does is shorten up the Frame location inside the BadgeUI. Lastly, we have a variable called TS, which can be known as TweenService. All this variable does is define the TweenService so it can be used later on. Let’s move on to the complicated and the thing I try to avoid the most, tweening.
Tweening Variables
local tweenInfo = TweenInfo.new( -- Creates new TweenInfo
2, -- The amount of time it takes to complete the tween
Enum.EasingStyle.Quad, -- The easing style (Your choice)
Enum.EasingDirection.InOut, -- The easing direction
0, -- How many times it repeats
false, -- Does it reverse?
0.2 -- The delay time after the trigger of the tween before it starts
)
local positionTweenOpen = TS:Create( -- Creates a new tween
frame, -- The frame
tweenInfo, -- The info we created
{Position = UDim2.new()} -- Your Open Position Inside UDim2.new()
)
local positionTweenClose = TS:Create( -- Creates a new tween
frame, -- The frame
tweenInfo, -- The info we created
{Position = UDim2.new()} -- Your Closed Position Inside UDim2.new()
)
end
Since it would take a lot of time for me to explain all of this, I reduced it to comments in the script that you can read and it also tells you what each thing does. We’re almost done with this script! Now that we’re done with variables, let’s move on to the actual scripting!
BadgeUI.Parent = game:GetService("Players")[Name].PlayerGui
frame:WaitForChild("Name").Text = game:GetService("BadgeService"):GetBadgeInfoAsync(BadgeId).Name
frame.Description.Text = game:GetService("BadgeService"):GetBadgeInfoAsync(BadgeId).Description
frame.Icon.Image = "https://www.roblox.com/asset/?id="..game:GetService("BadgeService"):GetBadgeInfoAsync(BadgeId).IconImageId
Since most of this is repeated similarly, I’ll explain this briefly. The first line makes it so that the BadgeUI’s Parent becomes the PlayerGui in the Player. The last three lines are just repeating, so the first line of the three is to get the badge name, then the second of the three is to get the badge description, and the last one is slightly different, it uses the https://www.roblox.com/asset/? to set the badge icon, "I’m not sure if you need the web address, but if you don’t need it, please let me know!)
Now onto the last part! Making the Badge come out!
positionTweenOpen:Play() -- Plays the opening tween
task.wait(8) -- The amount of time you want the badge notification to stay on the screen
positionTweenClose:Play() -- Plays the closing tween
positionTweenClose.Completed:Connect(function() -- After the closing tween is completed, we want to destroy the BadgeUI
BadgeUI:Destroy()
end)
This is quite simple, but if you don’t get it, that’s completely normal, as something that may seem simple to me may not seem simple to you. So the first line starts by playing the Opening Tween, Right after it starts playing, the timer begins. The timer is the “lifespan” of the notification. After the timer reaches the set time, the notification will close and the UI will be destroyed. Now Let’s move on to the last part, using the UI to award the badge. To accomplish this, we’ll use a simple welcome badge and you can learn how to incorporate this into your regular badge scripts!
Awarding The Badge With A Simple Welcome Script
Before we start, make sure to create a badge, which I won’t be covering in this tutorial. After you create the badge, get the BadgeID and copy it. After you have the BadgeId, create a ServerScript (Script) in the ServerScriptService, and name it WelcomeBadge.
After it is created, add these variables to the script:
local BadgeId = -- Your BadgeID
local BadgeUI = require(-- The location of your ModuleScript)
local BadgeService = game:GetService("BadgeService") -- Gets the service "BadgeService"
These variables are quite simple and are explained through the comments. You MUST have these variables when awarding a badge. Now let’s move on to the last part.
game:GetService("Players").PlayerAdded:Connect(function(plr)
local userId = plr.UserId
task.wait(2)
if not BadgeService:UserHasBadgeAsync(userId,BadgeId) then
BadgeService:AwardBadge(userId,BadgeId)
BadgeUI.OpenBadgeUI(userId,BadgeId)
end
end)
Since I can’t split this into portions, and it isn’t very long, I’ll just explain everything. First, we start off by getting the service “Players” and when a player is added to the game, it connects it to the function and defines a “variable” called plr, which will be used as the player that was added into the game. Next, we create a variable called userId, which will be used in everything after the task.wait() line. What the userId variable does is it gets the player’s UserId and that’s all it does. After that line comes a task.wait() to give a slight delay in proceeding. On the next line, we have an if conditional. This contains a special word called not. What the not does is reverses what the conditional states. In this conditional, we check if the user has the badge, and if they do then the script proceeds. But since we don’t want that, we add a not to reverse it. It checks what badge it is by putting in the UserId of the player that we want to check and the badge that will be checked. After that, we award the badge by putting the UserId and BadgeId into the scope of the function :AwardBadge(). After that, we bring up the UI by calling the function and replacing the parameters with our UserId and BadgeId.
Outro | Free Model, Full Code and Video
And that’s all! It should work and if it doesn’t, let me know! If you have any questions, suggestions, or concerns, feel free to let me know! Now I’m going to take a break for a while (like a couple of days lol)
That’s all, see you guys in the next tutorial!
Free Model:
Custom Badge Notification By Captain_Snek - Roblox
Full Code:
BadgeNotifDisable:
game:GetService("StarterGui"):SetCore("BadgesNotificationsActive",false)
BadgeUI:
local module = {}
function module.OpenBadgeUI(UserId,BadgeId)
local Name = game:GetService("Players"):GetNameFromUserIdAsync(UserId)
local BadgeUI = game:GetService("ReplicatedStorage").Badge:Clone()
local frame = BadgeUI.Frame
local TS = game:GetService("TweenService")
local tweenInfo = TweenInfo.new( -- Creates new TweenInfo
2, -- The amount of time it takes to complete the tween
Enum.EasingStyle.Quad, -- The easing style (Your choice)
Enum.EasingDirection.InOut, -- The easing direction
0, -- How many times it repeats
false, -- Does it reverse?
0.2 -- The delay time after the trigger of the tween before it starts
)
local positionTweenOpen = TS:Create( -- Creates a new tween
frame, -- The frame
tweenInfo, -- The info we created
{Position = UDim2.new()} -- Your Open Position Inside ()
)
local positionTweenClose = TS:Create( -- Creates a new tween
frame, -- The frame
tweenInfo, -- The info we created
{Position = UDim2.new()} -- Your Closed Position Inside ()
)
BadgeUI.Parent = game:GetService("Players")[Name].PlayerGui
frame:WaitForChild("Name").Text = game:GetService("BadgeService"):GetBadgeInfoAsync(BadgeId).Name
frame.Description.Text = game:GetService("BadgeService"):GetBadgeInfoAsync(BadgeId).Description
frame.Icon.Image = "https://www.roblox.com/asset/?id="..game:GetService("BadgeService"):GetBadgeInfoAsync(BadgeId).IconImageId
positionTweenOpen:Play()
task.wait(8)
positionTweenClose:Play()
positionTweenClose.Completed:Connect(function()
BadgeUI:Destroy()
end)
end
return module
WelcomeBadge:
local BadgeId = -- Your Badge Id
local BadgeUI = require(-- Location of your ModuleScript)
local BadgeService = game:GetService("BadgeService") -- Gets the BadgeService
game:GetService("Players").PlayerAdded:Connect(function(plr)
local userId = plr.UserId
task.wait(2)
if not BadgeService:UserHasBadgeAsync(userId,BadgeId) then
BadgeService:AwardBadge(userId,BadgeId)
BadgeUI.OpenBadgeUI(userId,BadgeId)
end
end)
Video: