How do i make GUI bobble?

Help and Feedback Art Design Support
,
1

I really like designing and testing GUI that i make for games, but im trying to make a game myself now, but im not sure how to make this system.

The problem that im running into is reactive GUI, (ex. Overwatch, when you jump the ui has a sense of heftness to it, going up then when you land it goes down, following the force.) Im not sure how to make it, track the force of the character, give the ui its own gravity? (can i even do that?)

I have tried everywhere to find solotiouns for this problem, ive tried google, bing ._. , even youtube and the dev fourm itself!

Ive been learning to script but i havent gotten here yet. Can anyone help me?

1 Like
2

Chances are you’ll want to use the Humanoid.Jumping event to detect whenever the player jumps, which would have to be done on the server. After this, you’ll likely have to fire a RemoteEvent to the client as a player’s UI is always client-side. After this, you’d have to script the UI element to bobble, which shouldn’t be that hard.

3

Thinking back on this, using Humanoid.Jumping is not the cleanest solution, so I instead opted for detecting input on the spacebar using UserInputService. For this, I used the InputBegan event, and then ran an if statement to see if the detected input happened to be spacebar. If so, then the bobble would occur, which would be done with a tween.

I did give this a slight test, but you should deal with the variables and modifying the script to your needs yourself.

local UIS = game:GetService("UserInputService")
------------------------------------------
local uiobject = -- path to your UI object
local oldpos = uiobject.Position
local newpos = oldpos - UDim2.new(0,0,0.05,0)
----------------------------------------
local tweentime = .12
local waittime = .25


local function Bobble()
	uiobject:TweenPosition(newpos, Enum.EasingDirection.Out, Enum.EasingStyle.Quad, tweentime)
	wait(waittime)
	uiobject:TweenPosition(oldpos, Enum.EasingDirection.Out, Enum.EasingStyle.Quad, tweentime)
end

UIS.InputBegan:Connect(function(input)
	if input.KeyCode == Enum.KeyCode.Space then
		Bobble()
	end
end)
4

Where do i put the script? Inside the GUI object?

5

Yes, also specify the path to the UI object at this line. Let’s assume you put the script INSIDE the UI object, this means that you should change this line to…

local uiobject = script.Parent
6

Thanks! I was doing Workspace.Parent.StarterGui.Health, not sure if that would work so thanks for the solution!

7

Are you sure? I’m certain that humanoid.Jumping can be fires on the client. It’s better to use that than detecting inputs anyway.

8

I did try that option, however there seemed to be cases where Humanoid.Jumping either didn’t fire at all or fired twice, hence why I resorted to detecting spacebar input instead.

9

It fires twice because the “active” parameter for it is true then false. I don’t know why it fires twice, but you can just check if active is true or not, and then bobble the gui.

10

Seems fair. Is there a direct caveat to the detecting of input method?

11

Not really, since you’d have to detect the jumping on all platforms, so you’ll have to detect the spacebar, A button for console users, and the jump button for mobile players, which is unnecessary when humanoid.Jumping exists.

1 Like