Image Flickering when updating

Hey Everyone,
So I’m making a game like piggy and I’m using an image with all the players in it.
The problem is though, is that the images Flicker;

Gif of what I mean: https://gyazo.com/ce3b7a5b1845600007cab189b33d7153

Here is my code:

local MenuGui = script.Parent
local StartFrame = script.Parent:WaitForChild('StartFrame')
local PlayButton = StartFrame:WaitForChild('PlayButton')
local ShopButton = StartFrame:WaitForChild('ShopButton')
local SkinsButton = StartFrame:WaitForChild('SkinsButton')
local IntermissionFrame = script.Parent:WaitForChild('IntermissionFrame')

local Players = game:GetService('Players')
local Player = Players.LocalPlayer


local Template = game:GetService('ReplicatedStorage'):WaitForChild('Instances'):WaitForChild('Template')

coroutine.wrap(function()
	while wait(.5) do
		local WaitingPlayers = game.ReplicatedStorage.Events.RequestWaitingPlayers:InvokeServer()
		if WaitingPlayers then
			for _, Template in pairs(IntermissionFrame.Frame:GetChildren()) do
				if Template:IsA('Frame') then
					Template:Destroy()
				end
			end
			wait()
			for _, Player in pairs(WaitingPlayers) do
				local Cloned = Template:Clone()
				Cloned.PlayerName.Text = Player.Name
				local content,isReady = Players:GetUserThumbnailAsync(Player.UserId,Enum.ThumbnailType.HeadShot,Enum.ThumbnailSize.Size420x420)
				Cloned.PlayerImage.Image = content
				Cloned.Parent = IntermissionFrame.Frame
			end
		end
	end
end)()

How can I stop the flickering?
Thanks for any help!

Can you show us the OnServerInvoke code?

Change the code to this:

local Template = game:GetService('ReplicatedStorage'):WaitForChild('Instances'):WaitForChild('Template')

coroutine.wrap(function()
	while wait(.5) do
		local WaitingPlayers = game.ReplicatedStorage.Events.RequestWaitingPlayers:InvokeServer()
		if WaitingPlayers then
			for _, Template in pairs(IntermissionFrame.Frame:GetChildren()) do
				if Template:IsA('Frame') then
					Template:Destroy()
				end
			end
			for _, Player in pairs(WaitingPlayers) do
				local Cloned = Template:Clone()
				Cloned.PlayerName.Text = Player.Name
				local content,isReady = Players:GetUserThumbnailAsync(Player.UserId,Enum.ThumbnailType.HeadShot,Enum.ThumbnailSize.Size420x420)
				Cloned.PlayerImage.Image = content
				Cloned.Parent = IntermissionFrame.Frame
			end
		end
	end
end)()

It looks like you don’t understand your own code

Removing a wait() won’t help much except making the flicker effect happens faster.

local ReplicatedStorage = game:GetService('ReplicatedStorage')
local Events = ReplicatedStorage:WaitForChild('Events')
local Players = game:GetService('Players')

local WaitingPlayers = {}

Events:WaitForChild('UpdateWaitingPlayers').OnServerEvent:Connect(function(Player,Action)
	if Player then
		if Action == 'Insert' then
			table.insert(WaitingPlayers,Player)
		elseif Action == 'Remove' then
			local ReturnValue = table.find(WaitingPlayers,Player)
			table.remove(WaitingPlayers,ReturnValue)
		end
	end
end)

Players.PlayerRemoving:Connect(function(Player)
	if table.find(WaitingPlayers,Player) then
		local ReturnValue = table.find(WaitingPlayers,Player)
		table.remove(WaitingPlayers,ReturnValue)
	end
end)

Events:WaitForChild('RequestWaitingPlayers').OnServerInvoke = function()
	return WaitingPlayers
end

This will return every time you call it so the if statement will be satisfied(in the first script). So the flicking effect is the result of deleting and adding the image continuously. You should check in the IntermissionFrame.Frame to see if a player’s image exists. If yes, don’t do anything, if no, add an image.

1 Like

Hello There, when you adjust a image there’s a short “intermission” as to where the image is being replaced/rendering, that is why you see the “flickering” effect.