Creating a notification effect

So at the bottom right of every player’s screen I want to make an effect where a frame pops up saying something like “You can’t afford this!”, but before it’s a notification I want it to tween in with a nice effect. I created a UIListLayout just for this, but apparently it sets the position automatically so that I can not tween it. Is there anything else I can do to make this?

I know I could script it manually, but I want to know if Roblox has built in functions or instances that would make my scripts a whole lot easier to work with.

5 Likes

This would not be hard to script just make a text label or image label and tween it onto the bottom corner

I’m not too advanced in coding just yet sir, I don’t think I’d be able to make something so complex. Sure I can tween it on the bottom right corner, but if another notification has to pop up then the one that just tweened in has to move up and if another one pops up then i have to move both of them upwards, and it’s just hard to comprehend how I can do this.

Yes! ROBLOX does have built in methods for generating notifications on the screen.
Cite the StarterGui:SetCore method, StarterGui:SetCore

Using it you can create a notification with ease.

I wanna say you solved this issue, but I’m well aware of that feature. What I want to know about is how can I do this manually, with my own ui. Is there another UILayout that allows me to tween positions?

1 Like

Why not just put all of the UI elements for the notification into one parent frame, that you then tween to a specific position.

Something like this:
image

Change the position of NewNotification

Yeah, but if I do it that way then I have to manage every ‘NewNotification’ and tween one whenever another pops up, and it may become messy. But I think I could do this now that I’m actually considering it. I could probably make a function that does the tweening upwards part for me.

When a new notification is created, stop all the tweens for the current notifications, and set all of their tweens to position to the x position of where they should be, and then the y position to be their index times their size.

UDim2.new(x, 0, index * myAbsoluteSize, 0)

For the index thing, when a new notification is created, increment a variable, and set the index of the new notification to that, and when one is destroyed, shift the indexes for each notification down (and then retween and everything).

This can actually be done quite easily as TweenPosition has a property that allows for tweens to be overwritten.

I have created an example for you to use in case the explanations done by @EpicMetatableMoment are not enough for you to go off of.

Here is a GIF of the script that I have created:

https://gyazo.com/164f9172c674435381b9da442dbef102

Source Code

UI = script.Parent
MaxNotifications = 5
NotificationDuration = 2

function createNotification(NotificationText)
	local Notifications = UI.Notifications:GetChildren()
	if #Notifications >= MaxNotifications then
		Notifications[1]:TweenPosition(UDim2.new(1.5, 0, Notifications[1].Position.Y.Scale, 0),"InOut","Linear",0.2,true);wait(0.2)
		Notifications[1]:Destroy()
		for i,v in pairs(Notifications) do if v ~= nil then
			v:TweenPosition(UDim2.new(0.97, 0, v.Position.Y.Scale - 0.12, 0),"InOut","Linear",0.2,true)
			end
		end
		local NewNotification = UI.NotificationTemplate:Clone()
		NewNotification.Name = tostring(#Notifications+1)
		NewNotification.Parent = UI.Notifications
		NewNotification.Text.Text = NotificationText
		NewNotification:TweenPosition(UDim2.new(0.97, 0, 0.85, 0),"InOut","Linear",0.2,true)
	else
		for i,v in pairs(Notifications) do
			v:TweenPosition(UDim2.new(0.97, 0, v.Position.Y.Scale - 0.12, 0),"InOut","Linear",0.2,true)
		end
		local NewNotification = UI.NotificationTemplate:Clone()
		NewNotification.Name = tostring(#Notifications+1)
		NewNotification.Parent = UI.Notifications
		NewNotification.Text.Text = NotificationText
		NewNotification:TweenPosition(UDim2.new(0.97, 0, 0.85, 0),"InOut","Linear",0.2,true)
		delay(NotificationDuration,function()
			NewNotification:TweenPosition(UDim2.new(1.5, 0, NewNotification.Position.Y.Scale, 0),"InOut","Linear",0.2,true);wait(0.2)
			NewNotification:Destroy()
		end)
	end
end

Model Download
NotificationUI.rbxm (7.1 KB)

43 Likes

Yeah I scripted it in under 30 lines, it was easier than expected!

2 Likes

He literally did the whole thing for you and you give a reply like that

1 Like

I don’t see the problem, I was just letting him know that I figured it out already.

1 Like

He wrote an entire thing, with a gui, and gave you the source code, and you say you “it was easy”, there was no “thank you” or any form of appreciation

1 Like

I mean I appreciate his help and all, but I fixed it myself. You don’t have to attack me just because I forgot to say thank you.

1 Like

Oh sorry if you felt attacked, it wasn’t meant to come across like that at all, just making sure credit and appreciation is given where needed,that’s all

2 Likes

Not taking any sides here, but please make sure to mark the topic as solved, either by yourself or @EpicMetatableMoment in order to prevent other replies!

1 Like

I already did sir, thanks for the help.

1 Like

Where do you put this script again (the notification GUI looks great so I want to use it)?

1 Like

Thank you soo much! You helped me alot now, thank you man, ur amazing

1 Like