Introducing… Notification System, the ultimate way to create dynamic and custom notifications for your experiences!
100% of this is made in the script, no other assets to import except for the module!
UPDATE Apr 24, 2025:
read the basic info before reading this.
- Added new tween animation for the text.
- Added a 4th optional argument, a function. Expained below.
The module has been updated!
UPDATE Apr 7, 2025:
read the basic info before reading this.
- Fixed mobile scaling issue for the x-axis in terms of size.
- Added a basic messageType called ‘default’. This can be used for normal notifications and just giving basic info.
- Custom sounds! You can now add custom sounds to play for each type of notification. You can customize them in the NOTIFICATION_SETTINGS table.
- Added a nice cool UIGradient effect for the text when it tweens in!
How it works:
The ModuleScript has five types of notifications by default: Success, Info, Warn, Alert, and Default.
The difference between the types is the background color, starting background transparency, and the imageId associated with the type.
How to use it:
To use this, get the Module (linked below) and import it into your game. Then, require it on a LocalScript. One of the two functions is: Create(). Here are which of the notificaiton types look like:
The :Create() function takes in 4 arguments: messageType, message, duration (optional) and executedFunction (optional).
The messageType tells the client how to react, like if they did something wrong or to reward them. The message is just what you want the text to say. In the example, the message was Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.. The third argument is the duration, or how long the notification will stay on the client’s screen. It is optional—if you don’t pass it in, it will be 3 seconds for PC users and 4 seconds for mobile users. There is a whole table called DEVICE_SETTINGS for modifying how it looks for PC and mobile users. It has things like UIPadding, CornerRadius, ImageSize, etc…
The last argument is explained in its own section below
It’s also good to note that as the message gets longer, the Y size of the notification frame increases too.
There is also a Clear() function which is quite simple; it just clears out all the notifications with the same tween they normally would have.
Okay, now let’s move onto something else about this module!
These two variables are also important:
local startYFadingValue = 0.5
local endYFadingValue = 0.3
If many notifications happen to appear, the previous ones will be pushed up as there is a UIListLayout. At some point, if the notifications go past a certain threshold, they will change transparency so they don’t completely cover the screen. The startYFadingValue and endYFadingValue are numbers from 0 to 1, where zero is the top of the screen and 1 is the bottom. In the two example numbers given above, the notification frames would start to turn transparent halfway down the screen (0.5) and be fully transparent at 30% down the screen (0.3). Anything closer to the top of the screen than the endYFadingValue will be set to a transparency of 1.
It also has two pretty cool effects. The first is a “time left” bar that gets smaller to tell the player how much longer the notification will last! The second is a nice “tween” for the text transparency. It uses a UIGradient and transparency to create this effect at the start of the notification.
Executed Functions
This is by far my favorite feature! The fourth argument is optional but takes in a function. This keeps the notification on the screen until the function completes-- completely ignoring the duration argument.
This would be useful if you wanted a notification telling the player to go to a specific place. You could use task.wait() to keep the function going until the player gets close to the place, eventually ending the function and thus ending the notification. The notifications with a function attached will be pinned at the bottom of the screen.
Here is an example of it in action:
Video
As you can see, while other notifications are made, the one with a function is at the bottom. The attached function creates a beam from the player to the part, with the notificaiton telling the player to go to the part. Whenever the player gets close to the part, the function ends and thus the notification is cleared.
Here is the code I used in the LocalScript:
Code
local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local targetPart = workspace:WaitForChild("selectedPart")
local function createLine(from, to)
local function attach(part)
local a = Instance.new("Attachment")
a.Parent = part
return a
end
local beam = Instance.new("Beam")
beam.Attachment0 = attach(from)
beam.Attachment1 = attach(to)
beam.FaceCamera = true
beam.Width0 = 0.5
beam.Width1 = 0.1
beam.Color = ColorSequence.new(Color3.fromRGB(61, 100, 148))
beam.Parent = from
return beam
end
local function moveFunction()
warn("START")
local beam = createLine(character.PrimaryPart, targetPart)
repeat task.wait() until (character.PrimaryPart.Position - targetPart.Position).Magnitude < 5
beam:Destroy()
warn("DONE")
end
local NotificationHandler = require(game.ReplicatedStorage.NotificationSystem)
NotificationHandler:CreateNotification("info", "Please move to the part", nil, moveFunction)
How to make custom notification types
Firstly, focus on this part of the code at the top:
local NOTIFICATION_SETTINGS = {}
NOTIFICATION_SETTINGS.NOTIFICATION_TYPES = {
"Success",
"Info",
"Warn",
"Alert",
}
NOTIFICATION_SETTINGS.IMAGE_IDS = {
success = "rbxassetid://74920264774407",
info = "rbxassetid://112921444805850",
warn = "rbxassetid://131688329492659",
alert = "rbxassetid://88496112693331"
}
NOTIFICATION_SETTINGS.NOTIFICATION_COLORS = {
success = Color3.fromRGB(39, 93, 50),
info = Color3.fromRGB(61, 100, 148),
warn = Color3.fromRGB(205, 158, 67),
alert = Color3.fromRGB(153, 59, 39)
}
NOTIFICATION_SETTINGS.BASE_TRANSPARENCIES = {
success = 0,
info = 0,
warn = 0,
alert = 0
}
To add a custom notification or delete one, follow these steps:
-
In the NOTIFICATION_TYPES table, add the name of the type of notification (the name is the messageType that will have to be passed as the first argument in the :Create() function. For example, if the type is “Alert”, you would do Module:Create(“Alert”, “Too fast!”, 1).)
-
In the IMAGE_IDS table, add the assetId in the format: “rbxassetid://000000”. You can leave it as 0 if you don’t want one. Note: you cannot just copy and paste the assetId into the imageId. Create an ImageLabel and paste the assetId into the Image property, then it will automatically set it to a different imageId than your assetId. Use this new ID as your imageId.
-
Set the color in the NOTIFICATION_COLORS table. This will be the color of the notification frame.
-
Set the base transparency in the BASE_TRANSPARENCIES table for the notification frame. This will be the original transparency of the frame (keep in mind it will get more transparent if it is pushed up to the top by other notifications).
-
IMPORTANT: For the above 3 tables, make sure to set the key to the messageType in lowercase. Example:
NOTIFICATION_SETTINGS.NOTIFICATION_TYPES = {
"Success"
}
NOTIFICATION_SETTINGS.IMAGE_IDS = {
success = "rbxassetid://74920264774407", -- The key the name of the type in lowercase.
}
NOTIFICATION_SETTINGS.NOTIFICATION_COLORS = {
success = Color3.fromRGB(39, 93, 50), -- The key the name of the type in lowercase.
}
NOTIFICATION_SETTINGS.BASE_TRANSPARENCIES = {
success = 0, -- The key the name of the type in lowercase.
}
Media (videos):
- Phone:
- Desktop:
Get the module here ← recommended to use instead of place file as this will be updated
Play the experience on Roblox used in the media here:
The placed is uncopylocked so you can open it in studio!
Thanks for reading & tell me if you find any bugs
.