by Plasma_Node
I created this for a game and decided it would be neat to make an open-source version!
NotificationCards is a system that enables you to easily send card notifications to the player, with many customization options and the ability to stack multiple notifications on the screen. And, it features some slick animations for QoL!
Some examples include: Notifying the player of mail, transactions, items dropped or picked up, tips, etc!
This is v1.0, and while it has a lot to offer I plan on updating it in the near future with more cool things (see bottom of this post for more information). Now I would like to apologize if this is a little messy as I have not made documentation for a public asset in a long time.
Here is a video of the system in action! (The cards appear larger than they really are in the video due to me zooming in, btw)
NotificationCards is versatile and very easy to use. Its features include:
-
Notification sounds (several are already included <3)
-
Ability to make your own premade cards and themes
-
Ability to customize icon, color, text, sound & title realtime for each new notification
-
Click & hover events
-
Settings customization (size of notification tray, mute all sounds, padding, etc)
-
Dismiss all notifications button
-
Individual card weights (so some cards sink to the bottom of the tray, particularly useful for cards that have a long lifespan or need to be manually dismissed)
-
Controlled via RemoteEvents, thus simple to use
-
Fade out animations
The UI defaults to the right side of the screen. To change this you can find the element called âTrayâ under the ScreenGui âNotificationGuiâ and mess with it. I plan on automating this in the future. If you change sides from right to left, make sure to adjust the config (game.ReplicatedStorage.NotificationCards.DefaultConfig), and set AnimationDirection to the opposite of whatever side of the screen the tray is on.
You can also disable the clear notifications button by setting Tray.Controls.Visible = false
Source
Library:
Github (not fully setup yet, lol)
https://github.com/plasma-node/Notification-Cards
API
Expand to view
API details
Making a Notification
Event:Fire("Notify", <Data>)
Sends a notification. You can either send a string with the name of a card you have made (ie âMailâ) or send a table of data. Possible parameters include:
{
Name = <String> (required)
Title = <String>
Body = <String>
Sound = <String Name/String Id/Object>
Color = <Color3>
BackgroundColor = <Color3>
Weight = <Number>
Icon = <String Id>
IconText = <String>
Persist = <Boolean>
Lifetime = <Number>
Clearable = <Boolean>
OnClick = <Function>
OnHover = <Function>
OnLeave = <Function>
Id = <String>
}
To break this down:
-
Name= The name of the card template you are sending as a notification (This is the only required parameter) -
Title= Title text (RichText) -
Body= Body text (RichText) -
Sound= Either a string with the name of a SoundObject inReplicatedStorage.NotificationCards.SoundsOR a string with the assetid of a sound (ierbxassetid://4769911029, OR a sound object (which will be cloned). -
Color= Title color, only works if the title color object is named âTitleBarâ -
BackgroundColor= Background color, only works if the background color object is named âBackgroundâ. -
Weight= Layout Order. The higher the number, the lower the card is on the notification tray. Default is 0, so if all cards are 0 and you set a card to.Weight = 1it would stay at the bottom. Useful to prevent an important card from getting burried by subsequent notifications. -
Icon= AssetId of the image you want to make the icon. -
IconText= If youâre lazy donât want to find an icon image, there is also a textbox at the same position as the icon. The string you set this to is what the text label aforementioned will set itself to. For example, setting.IconText = "!"would display a ! icon in the Arial font. Setting .Icon overrides this. -
Persist= Default is FALSE. Determines if the card will decay/delete itself when itâs timer runs out. Set to TRUE to make a card last indefinitely. -
Lifetime= How long the card will last before it automatically fades out. By default, this is set to whatever the configuration (settings) is set to, which is currently 5 seconds. -
Clearable= Default is FALSE. If you set this to true add a button to the card named âClearButtonâ (with a higher ZIndex than all other elements on the card, specifically âButtonâ), then when that button is clicked it will delete the card. âClearButtonâ needs to be parented toCard.Boxbut is only the activation element, meaning that you can put a separate button image underneath if you would like. -
OnClick= You can pass a function that will run when the card is clicked. -
OnHover= You can pass a function that will run when the card is hovered over. -
OnLeave= You can pass a function that will run when the mouse stops hovering over the card -
Id= A string that gives the card an attribute named âIdâ. Useful if you want to identify a card.
Configuring Settings
The config contains settings like whether to mute all sounds, stop receiving notifications, how big the tray area should be, default timeout values, etc. While you can change this by editing the main script, you can also change these settings in real-time.
Event:Fire("GetConfig");
Returns a copy of the configuration.
Event:Fire("Configure", <Data>);
Data is a dictionary containing any parts of the configuration you wish to change. For example:
Event:Fire("Configure", {
Padding = 25;
});
Here are all (current) possible config options:
Muted = <Boolean>
AnimateIn = <Boolean>
AnimateDirection = <String>
Height = <UDim> (NOT UDim2)
InTime = <Float>
Lifetime = <Float>
OutTime = <Float>
Padding = <Integer>
-
Muted= Mutes all sounds -
AnimateIn= Enables/Disables the slide in animation for new cards -
AnimationDirection= Controls whether cards slide in from the left or right -
Height= UDim that determines how tall the tray should be. -
InTime= Default time it takes to tween (slide in) a new card -
Lifetime= Default time a card lasts before fading out -
OutTime= Default time it takes to fade out and then delete a card once it expires
Other Commands
-
Event:Fire("Clear")orEvent:Fire("Clear", "All")= Clears all cards in a swift animation -
Event:Fire("Clear", "Decaying")orEvent:Fire("Clear", "ExcludePersistent")= Clears all cards that are NOT persistent (cards that will be deleted after their timer expires). -
Event:Fire("Hide")= Hides the notification tray -
Event:Fire("Show")= Shows the notification tray
probably the end but might have missed something lol
Usage Example
I wanted this system to be relatively simple to use, so I opted for one that can be controlled via Remote Events. Please note that you can use either RemoteEvents or BindableEvents in the exact same way to control the system.
All examples will use the BindableEvent.
Sending a premade card:
local Event = game.ReplicatedStorage.NotificationCards.Event;
Event:Fire("Notify", "Mail");
Now thatâs pretty simple. But now, letâs say you want to modify a blank card with code:
Event:Fire("Notify", {
Name = "Info";
Title = "DID YOU KNOW?";
Body = "You can invert flight controls in the settings menu.";
Sound = "Ping";
Color = Color3.fromRGB(89, 121, 81)
});
Making your own cards
While I have included a set of cards, you can insert your own! All cards must be placed inside
game.ReplicatedStorage.NotificationCards.Cards
While you can generally design the cards however you want, to ensure that the cards are editable via things like .Title and .Body and work properly with animations you need to follow the following general format:
âCARD CONTAINERâ is the top element of the card and can be renamed to whatever you want and placed in the .Cards folder. When you set the size of your card, do it via the top-level container element. I suggest using .Offset instead of .Scale as it will work better with the scrollbox implementation and different screen sizes in this scenario.
âBoxâ is where all the elements go. Itâs scale is {1, 0},{1, 0}. This element exists to make the âslide-inâ new notification animation possible. Do not rename it or it will break, lol.
âBodyâ and âTitleâ are text elements. Position them where you want text to go.
Inside .IconFrame, you can set the icon via an image label. Just make sure to make the text label invisible if you do that. (The text label was there for icons like X, i, ! and ? since I got lazy and didnât want to find more images. Read more in API section to learn how to use the textlabel)
Other then that, you can pretty much customize it how you want, just donât touch .Button. Read API notes for instructions on adding a button to clear that specific notification.
Future Plans
I'm a perfectionist, and I have some more things I am planning on adding to this system, such as more transition effects. But I also wanted to release this sooner rather than later.About Me
Hi, I'm Plasma_Node, I'm a 19-year-old programmer. I enjoy programming cool technology, space games, and UI, hence why I created this framework. I look forward to making more community resources in the future!If you enjoy my work please consider subscribing to my YouTube or my Twitter, where I post my work. I consider my YouTube as my current portfolio, though I should really make a real one, lol.
