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!
How it works:
The ModuleScript has four types of notifications by default: Success, Info, Warn, and Alert.
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(). By default, I’ve made four messageTypes: Success, Info, Warn, and Alert. Here is what each of those look like:
The :Create() function takes in 3 arguments: messageType, message, and duration (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…
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 a pretty cool “time left” bar that gets smaller to tell the player how much longer the notification will last!
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:
Here, I am playing them and they go away at different times because the duration is random. Pretty cool in my opinion. -
Desktop:
You can see that I first spammed the notifications and then used the Clear() function about 1/3 way through the video. You can see all the notifications going away at the same time because the duration was set to 10 seconds for all
Get the module here ← recommended to use instead of place file as this will be updated
Download the place file used in the images/videos
NotificationHandlerTest.rbxl (73.4 KB)
(the scripts beside the module are crummy as they are just to show how it works; they aren’t written well).
OR
Play on Roblox with this experience link: Notification System Testing - Roblox
Thanks for reading & tell me if you find any bugs