Introduction
Hey guys, my name is Tom! For the past weeks, I’ve been designing a new Announcement UI for my upcoming cafe, where announcements can be announced to the public by using the UI. Below, I will leave a list with all the features this UI has.
Features
The Basics
These are some basic stuff, that are by the whole UI system.
- Certain people and group ranks have access to it.
- It can be used by running the “!announcementgui” command in the chat. Note, that we can change the command in anything we want it to be.
- It has a Chat Filter, where bad words will be moderated by ROBLOX.
The Customization Frame
This is where you get to customize your announcement, before you announce it to everyone.
- You can type your announcement, no word limit.
- You can set a duration for your announcement.
- If you don’t set all of the settings or any of them, it will ask you to do it, or else you won’t be able to announce your announcement.
- This provides an Tween Service coming in and out.
- You can close the UI, by clicking the CloseButton.
- Ofc, you can announce your announcement.
The Announcement Frame
This is where your announcement is shown to everyone.
- You can see the User’s Name & Display that posted the announcement.
- You can see a Load Bar, that shows the Durations of the announcement.
- The announcement UI provides tween service at coming in and out.
- The announcement UI provides a sound, that plays when the announcement pops.
Adding a New Feature
For the past days, I’ve been trying to add this feature, where the person that announces their announcement, it will show their roblox profile headshot including If they have animations on or not. But to be honest, I’ve been struggling to, as I came up to many bugs and I thought of asking your help. If you can help me solve this problem, I’d be really thankful to you.
Showcase
I will now be showing you my Announcement System. As we have our 3 sections which are Replicated Storage, ServerScriptServices, StarterGui
Replicated Storage
In the Replicated Storage, we have a 1 Remove Function and 3 Remote Events. I’m gonna explain to you, what each of them do and are for.
FilterStringFunction
This Remove Function is used for our Chat Filter, which prevents bad words being seen by everyone and instead they get hashtaged and moderated.
DisplayAnnouncement
This Remove Event is used for the Announcement that pops up and everyone in the server can see it.
EnableAnnouncementSystem
This Remove Event is used, because when we run the command, we enable the announcement system where we will be able to announce things.
PlayerError
This Remove Event is used, because If you don’t fill out all the settings such as Title, Text, Duration. You won’t be able to post your announcement as it will ask you to fill them out.
ServerScriptServices
In the ServerScriptServices, there’s our MAIN script. In this script, it contains everything for the announcement system to work. I will leave the script below.
local admins = {"TomOMG25"} -- To add admins Use this format: "Username here" For multiple admins use this format: "Username here", "Username here" and so on. Just put commas after the Quotation marks and Type the User username inside the quotes.
--Set username's of players that can use the system.
--Do not change anything below unless you know how to script!
--Learn how to script at youtube.com/RoDevYT
local players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local event1 = ReplicatedStorage:WaitForChild("EnableAnnouncementSystem")
local event2 = ReplicatedStorage:WaitForChild("DisplayAnnouncement")
local event3 = ReplicatedStorage:WaitForChild("PlayerError")
-- DO NOT DELETE! ALL Text must be filtered or the game may face Moderation! ----------------------------------------
local TextService = game:GetService("TextService")
local filterStringFunction = ReplicatedStorage:WaitForChild('FilterStringFunction')
filterStringFunction.OnServerInvoke = function(player, message)
local filterInstance = TextService:FilterStringAsync(message, player.UserId, Enum.TextFilterContext.PublicChat)
local filteredString = filterInstance:GetNonChatStringForUserAsync(player.UserId)
if filteredString == message then
return filteredString, false
else
return filteredString, true
end
end
-- End of Filter -----------------------------------------------------------------------------------------------------
event2.OnServerEvent:Connect(function(player, message, duration)
for i,v in ipairs(admins) do
if v == player.Name then
if tonumber(duration) ~= nil then
event2:FireAllClients(tostring(message),duration)
event3:FireClient(player,"Announcements")
else
event3:FireClient(player,"Make sure duration is a number!")
end
end
end
end)
event3.OnServerEvent:Connect(function(player,message)
event3:FireClient(player,message)
end)
players.PlayerAdded:Connect(function(player)
player.Chatted:Connect(function(message)
if message:lower() == "!announcementgui" then
for i,v in ipairs(admins) do
if v == player.Name then
event1:FireClient(player)
end
end
else
print(message)
end
end)
end)
This script contains, our Specific People who can view and use the UI. The Functions, The Chat Filter and the command that you can use to enable and open the UI.
Starter Gui
In the Starter Gui, there’s our Local Script, our Frame and our Announcement Frame. Note that the Frame is used to customize your announcement and Announcement Frame is used for everyone to see your announcement that you posted. I will leave their designs below. However, let’s get to our Local Script now, which I will also leave below for you to see it.
local players = game:GetService("Players")
local client = players.LocalPlayer
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local event1 = ReplicatedStorage:WaitForChild("EnableAnnouncementSystem")
local event2 = ReplicatedStorage:WaitForChild("DisplayAnnouncement")
local event3 = ReplicatedStorage:WaitForChild("PlayerError")
local filterStringFunction = ReplicatedStorage:WaitForChild("FilterStringFunction")
local frame = script.Parent:WaitForChild("Frame")
local closeButton = frame:WaitForChild("CloseButton")
local postButton = frame:WaitForChild("EnterButton")
local inputBox = frame:WaitForChild("InputBox")
local tinputbox = frame:WaitForChild("TimeInputBox")
local title = frame:WaitForChild("Title")
local aframe = script.Parent:WaitForChild("AnnouncementFrame")
local loadbar = aframe:WaitForChild("LoadBar")
local announcement = aframe:WaitForChild("Announcement")
local PlayerName = aframe:WaitForChild("PlayerName")
local function postButtonClicked()
if inputBox.Text == "" and tinputbox.Text == "" then
return event3:FireServer("Type an announcement and duration!")
end
if inputBox.Text == "" and tinputbox.Text ~= "" then
return event3:FireServer("Enter an announcement!")
end
if tinputbox.Text == "" and inputBox.Text ~= "" then
return event3:FireServer("Enter a duration!")
end
-- DO NOT DELETE! ALL Text must be filtered or the game may face Moderation! ---------------------------
local input = inputBox.Text
local result, wasFiltered = filterStringFunction:InvokeServer(input)
if wasFiltered == false then
event2:FireServer(result ,tinputbox.Text)
else
local Filtered = "(Server Message has been Moderated!)"
event2:FireServer(Filtered ,tinputbox.Text)
end
---- End Of Filter --------------------------------------------------------------------------------------
end
event3.OnClientEvent:Connect(function(message)
title.Text = message
end)
local function closeButtonClick()
frame:TweenPosition(UDim2.new(-1, 0,0.4, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,0.6)
end
event1.OnClientEvent:Connect(function()
frame:TweenPosition(UDim2.new(0.02,0,0.4, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,1)
end)
event2.OnClientEvent:Connect(function(message, duration)
PlayerName.Text = "Sent by: "..client.DisplayName.." (@"..client.Name..")"
announcement.Text = message
script.Sound:Play()
aframe:TweenPosition(UDim2.new(0.118,0,0.05,0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,1,true)
loadbar:TweenSize(UDim2.new(1,0,0.2,0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,1,true)
task.wait(1)
loadbar:TweenSize(UDim2.new(0,0,0.2,0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,math.clamp(duration-1,1,math.huge),true)
task.wait(math.clamp(duration-1,1,math.huge))
aframe:TweenPosition(UDim2.new(0.118, 0,-1, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,1,true)
task.wait(1)
end)
closeButton.MouseButton1Click:Connect(closeButtonClick)
closeButton.TouchTap:Connect(closeButtonClick)
postButton.MouseButton1Click:Connect(postButtonClicked)
postButton.TouchTap:Connect(postButtonClicked)
This local script contains, is for our system. When you ran the command, the Customization Frame will pop up, where you can customize your Title, Text & Duration and then when you announce it, you’ll be able to view the Announcement Frame. These both frames, contain Tween Service. Also you can find more of their features into the Features Section.
Now, I’ll be leaving below, the Designs of the UI, that you can view them.
Please don’t mind their sizes, they will be different in the actual game.
Customization Frame
Announcement Frame
As you can see, the Person Icon, will the the Roblox Profile Headshot of the Person, that announced the specific announcement.
Conclusion
Anyways, that’s all I have for today. Any help or solutions will be appreciated. Also, I’m sorry If I’m asking for a lot. Bye y’all!