Creating a moving dynamic hud from mouse movements!

Resources Community Resources
, , ,
#1

HELLO EVERYONE!

Hey, my names Kai and today I decided to share the way to creating a movement dynamic hud according to the local players mouse movements!

HERE IS A SHOWCASE OF WHAT IT LOOKS LIKE

HOW TO ACHIEVE THIS EFFECT

  1. Create a SCREEN GUI and parent the SCREEN GUI to starter gui

  2. Insert a FRAME into the SCREEN GUI

  3. now insert anything you want in the FRAME to move along with the FRAME!

  4. Insert a LOCAL SCRIPT into the SCREEN GUI

  5. PASTE THIS CODE INTO THE LOCAL SCRIPT!

local HUD = script.Parent.Frame -- SET THIS VARIABLE TO YOUR FRAMES LOCATION!!!!

local RunService = game:GetService("RunService")
local UserInputService = game:GetService("UserInputService")
local TweenService = game:GetService("TweenService")
local BasePosition = UDim2.fromScale(0.443, 0.398) -- SET THIS TO THE X POSITION AND THE Y POSITION OF YOUR FRAME!!!


local VectorValue = Instance.new("Vector3Value")

local XValue = 0
local YValue = 0

VectorValue:GetPropertyChangedSignal("Value"):Connect(function()
	XValue = VectorValue.Value.X
	YValue = VectorValue.Value.Y
end)

RunService.Heartbeat:Connect(function()
	local MouseDelta = UserInputService:GetMouseDelta()

	TweenService:Create(VectorValue, TweenInfo.new(1, Enum.EasingStyle.Sine), {
		Value = Vector3.new(MouseDelta.X, MouseDelta.Y, 0)
	}):Play()
end)



RunService.Heartbeat:Connect(function()
	local MouseDelta = UserInputService:GetMouseDelta()

	HUD.Position = BasePosition + UDim2.fromOffset(MouseDelta.X, MouseDelta.Y)

end)

  1. MAKE SURE TO SET THE VARIABLE FOR THE LOCATION OF THE FRAME TO YOUR FRAMES LOCATION ( LINE 1 )

  2. MAKE SURE TO SET THE X , Y LOCATION DATA! ( LINE 6 ) [ TO FIND YOUR LOCATION DATA OPEN UP YOUR FRAMES PROPERTIES AND SCROLL DOWN TO POSITION! ]

  3. Press PLAY and test.

THANK YOU FOR VISITING MY TOPIC!
I HOPE YOU ENJOYED THIS TUTORIAL / RESOURCE CODE FOR YOU TO USE IN YOUR EXPERIENCES.

BE SURE TO LEAVE A :heart: FOR ME!

39 Likes
#2

This looks really awesome, i will use it in my game thanks!

2 Likes
#5

Im so dumb i thought it was a community tutorial :man_facepalming:

1 Like
#6

Going to contribute a slightly better version ft. module support! This version should be a more efficient and automated.

This version uses UiObject.Position.Scale rather than manually setting the position. This version also uses one “Heartbeat” signal rather than 2.

Copy and paste the listed code below, then require the module and call the function.

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

return function(HUD:GuiObject)
	local BasePosition = UDim2.fromScale(HUD.Position.X.Scale, HUD.Position.Y.Scale)
	local VectorValue = Instance.new("Vector3Value")

	local XValue, YValue = 0, 0

	VectorValue:GetPropertyChangedSignal("Value"):Connect(function()
		XValue = VectorValue.Value.X
		YValue = VectorValue.Value.Y
	end)

	RunService.Heartbeat:Connect(function()
		local MouseDelta = UserInputService:GetMouseDelta()
		HUD.Position = BasePosition + UDim2.fromOffset(MouseDelta.X, MouseDelta.Y)

		TweenService:Create(VectorValue, TweenInfo.new(1, Enum.EasingStyle.Sine), {
			Value = Vector3.new(MouseDelta.X, MouseDelta.Y, 0)
		}):Play()

	end)
end
end

“Copy and paste the listed code below, then require the module and call the function.”

local Module = require(Module.Path);
Module(uiOBJ)
Module(uiOBJ2)
ect
6 Likes
#7

Would be pretty nice for making fps games feel fluid and smooth

1 Like
#8

Extremely helpful tutorial for creating fluid hud movements!

1 Like
#9

not making a BIG difference as its technically the exact same thing you’re putting here.

but never the less thanks for the shared code to assist others.