When someone makes an Announcement, the person's roblox profile headshot will be shown in a image

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

Screenshot_26
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

Screenshot_27
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

Screenshot_28
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

Screenshot_29

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!

You can use the method Players:GetUserThumbnailAsync to retrieve a player’s headshot. Using the template Roblox gave, you could paste this in your local script event:

event2.OnClientEvent:Connect(function(message, duration)
	local PLACEHOLDER_IMAGE = "rbxassetid://0" -- replace with placeholder image

	local thumbType = Enum.ThumbnailType.HeadShot
	local thumbSize = Enum.ThumbnailSize.Size420x420
	local content, isReady = Players:GetUserThumbnailAsync(client.UserId, thumbType, thumbSize)
	
	local playerImage = aframe.PlayerImage
	playerImage.Image = (isReady and content) or PLACEHOLDER_IMAGE

	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)

And I’m not sure if this is right but should you not be passing the player who sent the announcement to the above function? Using the client variable, it seems to me like it will always show every player that they sent the announcement themselves

The post was a little bit confusing, but I think I understand what you are asking.

In order to get a user’s headshot thumbnail, use Players:GetUserThumbnailAsync(UserId, ThumbnailType, ThumbnailSize).

I put together a function that you could use to retrieve thumbnails for a player.

local Players = game:GetService("Players")

local ThumbnailCache = {} -- Cache so we don't spam roblox for requests.
local DefaultImageId = "rbxassetid://0" -- Whatever default image you want in case of error.

local function GetThumbnail(player)
	if not ThumbnailCache[player] then
		local success, data = pcall(function()
			return Players:GetUserThumbnailAsync(player.UserId, Enum.ThumbnailType.HeadShot, Enum.ThumbnailSize.Size420x420)
		end)

		if success then
			ThumbnailCache[player] = data
			return data
		end
	else
		return ThumbnailCache[player]
	end
	
	warn("Could not fetch thumbnail for player.")
	return DefaultImageId
end

I tested this and it worked for me.

It is a little unclear to me, but I believe you are also asking for help with implementing this into your system?

If so, you can probably do this by adding the thumbnail asset id from the function into event2.
On the server, get the thumbnail, and then fire it back to the client.

Hope this helps!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.