Creating a smoother effect

I’m trying to create a minigame on getting a Frame object to stay within a certain area, without letting it go too far right, or too far left, however it kinda looks glitchy.
robloxapp-20190913-1220089

local UserInputService = game:GetService('UserInputService')

local Frame = script.Parent

local Middle = Frame:WaitForChild('Middle')

local Clicked = 0.5

UserInputService.InputBegan:Connect(function(input, GPE)
	if GPE then return end
	
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		Clicked = Clicked + 0.05
	end
end)

while true do
	local RandomAmount = math.random(10, 25) / 1000
	
	Clicked = Clicked - RandomAmount
	Middle:TweenPosition(UDim2.new(Clicked, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, 0.05, true)
	
	local RandomTime = math.random(100, 250) / 1000
	
	wait(RandomTime)
end

I use random for the amount lowered and the time as I don’t want it constant. It should kinda be remembered in movement to the left, but it shouldn’t be a huge jump to the left. And clicking should keep it to the right

You can try changing the EasingStyle to something with a smoother start-end movement tween, such as Sine instead of Linear and 0.05 seconds for the duration might be a bit too fast, maybe > .2 would be better in this case? A bit of tweaking EasingDirection can help too but as far as I’ve seen I’m pretty sure it doesn’t really affect linear transitions. As for the clicking it’s pretty much the same testing until you find what you like.

Edit: probably something you’d like to try

local RunService = game:GetService("RunService")
local UserInputService = game:GetService("UserInputService")

local RandomInt = Random.new()
local Frame = script.Parent

local MiddleBar = Frame:WaitForChild("Middle")

local MiddleBarPosition = 0.5 -- starting position of bar
local RandomIntFreq = 10 -- chance at how often to move the middlebar (lower is faster)
local RandomNumFreq = 0.03 -- max amount to move the middlebar
local ClickIncrease	= 0.04 -- amount to move bar when clicked

local function MouseClickEvent(input, gameProcessEvent)
	if gameProcessEvent then return end
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		MiddleBarPosition = MiddleBarPosition + ClickIncrease
	end
end

local function SlideBarEvent()
	MiddleBarPosition = RandomInt:NextInteger(0, RandomIntFreq) == RandomIntFreq
		and math.clamp(MiddleBarPosition - RandomInt:NextNumber(0, RandomNumFreq), 0, 1) -- lock middlebar position between 0 and 1
		or MiddleBarPosition -- if it doesn't hit the randomintfreq
	MiddleBar:TweenPosition(UDim2.new(MiddleBarPosition, 0, 0, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.1, true)
end

UserInputService.InputBegan:Connect(MouseClickEvent)
RunService.Stepped:Connect(SlideBarEvent)
1 Like

Hmm ok. Is what I’m doing the most ‘efficient’ way?? Like using a while loop?

What’s the deal with RandomAmount? I see what you were going for with it, but that math.random is generating random numbers which can be very different and then tweening them with a static time. Since math.random might generate 10 right after 25 and then tween them with the same time, this glitchy tweening occurs.

Alright, we found the issue. How do we fix it?
Simple! Since that math.random gets things glitchy, let’s get rid of it! We can replace this with a couple of things, but to keep it simple, let’s just replace that with a static number, perhaps 15? You could still keep it random if you so wish, but then I’d suggest using math.noise as it generates random number with correlation.

I want the complete randomness tho as I would like to have it quickly move in one direction instead of constantly being a gradual increase in the speed it moves.

Change the EasingStyle to Sine. It should be a little smoother but Idk how to get it any smoother with 0.05 tween time. Maybe double it to 0.1 and see if that’s acceptable?

Middle:TweenPosition(UDim2.new(Clicked, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.1, true)

I disagree, I believe the issue is in the wait at the bottom which includes RandomTime. If you include RandomTime in a wait, you will get a choppy result. Instead you should change a bit of the logic:

Use renderstepped for smooth gui effects instead of a while loop with a random wait.
Look at the last code snippet on this page: RunService | Documentation - Roblox Creator Hub

RandomTime just means you wish for it to head in a direction for a certain time frame, so instead we want to decide per loop if it will continue that way or if it will change:

local decision = math.random(1,2)

if decision == 1 then --keep going the same way, do nothing

elseif decision == 2 then --let’s get a new destination to go to that is within our parameters

end

That’s the logical guts of the code, let’s see what you can do with it!

If i’m not mistaken, couldn’t use you use lerp() for this instead? It might work better in this type of case.