How to make the gui bounce according to the rhythm of the music. But I don’t know what to do. I saw that the Fumo Horrors map used this system. I’d like to try it, but I don’t know how to do it first.
Here for Example video (Sorry for my video is lagging, My PC is noob)
Sadly, I don’t think there is a way to do this inside Roblox Studio. If you really want to do this though, you could put the music into a DAW (Digital Audio Workspace) and get the sound spectrum visualizer/analyzer then copy them onto the UI manually. If somebody knows a way to automate this that would be much nicer, but the game you showed probably hired someone to do this manually.
For the UI part of this feature, you would need to make a Frame on the bottom of the screen set to scale, then add a UIGridLayout to it. Inside the Frame, you could a ton of other frames color how you want and then set the UIGridLayout to something divisible by 1 so that it doesn’t cut off anything. You would also want to anchor the added frames to the bottom of the UI so that when you scale them they scale upwards.
Oh, that’s a sad story. I will try it
I believe you’d use PlaybackLoudness for this.
You get the folder containing your music audios, and run a loop or RenderStepped event that randomly adjusts the height of the bars in your UI depending on the loudness of the music.
Sort of like this:
local PlayingSound = nil
for _, sound in pairs(MusicFolder:GetChildren() do
if sound then
sound.Played:Connect(function)
PlayingSound = sound -- When the sound starts playing update this one to be the one that is being visualized.
end)
end
game:GetService("RunService").Stepped:Connect(function()
for _, bar in pairs(BarHoldingFrame:GetChildren()) do
if bar:IsA("Frame") then
bar.Visible = true
local loudnessScale= PlayingSound.PlaybackLoudness /1000 -- max loudness is 1000
local randomHeight = math.random(7, 10) / 10 * loudnessScale -- randomize it (divide random by 10 since it doesnt work with decimals)
bar.Size = Udim2.new(bar.Size.X.Scale, bar.Size.X.Offset, randomHeight, 0)
end -- I can't cant this indned right in the editor...
end
end)
You would probably have to tweak it around and I’m not sure if that actually works properly, but I believe thats the concept behind it.
There is also an open source version of this, not sure if it works well or if its to your liking, but its a good place to start:
Okay, I’ll try to do as you said. and make some small adjustments in the code. I’ll come back and give you an answer as to whether it can be used or not.
Oh, it worked for now thank you
I made a few adjustments And now it all worked.
Thank you @Chrasher_06 and @Im_aLEGOperson456 for this topic you made my day come true
I’m glad it worked! I hope you’ll be able to incorporate it into your game nicely.
I think i will do rotate to 180 degree to do fix this, I don’t i was right?
If its upside down, you could probably change the AnchorPoint of the bars to 0, 1 to fix it.
Exactly the same as before, I change AnchorPoint to 0,1 in BarHoldingFrame and inside BarHoldingFrame
I meant of the individual bars. Did you change the anchor point of the frame holding the bars? Since you changed the anchorpoint of the bars, you would also have to set the position of the bars so that they start at the bottom of the frame again, so set their AnchorPoint to 0, 1 and change the Y of their position to 1 so they are at the bottom: ..., ..., 1, ...
Yes, I did change the anchor point of the frame holding the bars
Still, you need to change the anchor point on the individual bars, not the holding frame.
You’ll also have to change the Position. Set the Y Scale of the position to 1, this will put the frames to the bottom of the frame, instead of at the top.
Oh, I understand. I forgot to change the position inside.
I use UiGridLayout inside BarHoldingFrame
