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!


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:
https://www.roblox.com/library/7380607237/NotificationCards-v1-0 

Github (not fully setup yet, lol)

API

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 (Plasma)

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 


Comments

Post a Comment