[Deprecated] Notification Cards - Easy & Versatile UI notification system!

Notification Cards v1.0
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!
image

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 in ReplicatedStorage.NotificationCards.Sounds OR a string with the assetid of a sound (ie rbxassetid://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 = 1 it 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 to Card.Box but 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") or Event:Fire("Clear", "All") = Clears all cards in a swift animation

  • Event:Fire("Clear", "Decaying") or Event: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
image

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:

image

“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.

My YouTube Channel
My Twitter

193 Likes

This looks really nice, and could be really useful!
I will make sure to try it later out

6 Likes

Looks nice, but the default UI could use some work!
Might actually use this in an up-coming plugin of mine! (with credit of course! ^-^)

4 Likes

Thanks! The default UI is meant to be replaced, since I didn’t want to release it with the UI from my game and also it wouldn’t work if there were no elements, lol.

Also just realized we both have plasma in our names. Nice, lol!

1 Like

I saw that, I was just commenting on it!

Also yeah, that’s epix!

2 Likes

Might use this! this is helpful tho, I might replace roblox’s default notification

2 Likes

Haven’t tried it yet, but from what I can see in the video it looks very neat! Thanks for making this :slight_smile:

1 Like

Also for those asking the icon them I have is called Vanilla, it’s made by Eltob

2 Likes

Woo I’m just an artist but that’s so cool

1 Like

Woah. This will be very useful!

1 Like

Hey, so this is cool but when will you make the Github?

1 Like

When I have time lol, still need to create my portfolio among other things. Right now got can still get it from my Roblox upload and also the documentation is complete so far on this post.

This module looks fantastic! Thanks a lot making this open-source. I will be sure to provide credit when I use this within my game.

1 Like

Oh my lord! this is amazing. Outstanding work Plasma!!!

Hey, that looks amazing, but I have an issue while using it on a mobile-supported game. Mobile players cannot press anything that’s beneath the GUI, not even move, jump or rotate their camera. I’m sorry if that’s a stupid question. :slight_smile:

(That’s for PC also, no input)

Never mind, found a fix!

Glad you found a fix, what was it?

This is EXACTLY the sort of framework my moderation tool needs! I’ll definitely check this out!
The cards also look very clean and slick. Well made!

Your balance is now $69,420 was a good easter egg

2 Likes

Is there a way I can made some some of the notifications show to the whole server not just the client?

2 Likes

Whoops, meant to answer this earlier. If it’s still relevant:

Set up a remote event that the client listens to. When it’s fired, send a notification. Then, you can selectively Remote:FireClient(Player, etc) or Remote:FireAllClients(etc).

1 Like