Shake screen visualizer

Hi, in this tutorial we are going to learn how to use sound PlaybackLoudness with a camera and make visualizer effect.

What is PlayBackLoudness?

This property reflects the amplitude of the Sound 's playback in the instance of time it is read. Therefore, for most sounds it will fluctuate constantly. Due to this it can appear in the Roblox Studio properties window as 0, however when read by code in the command bar or Script s it will return the correct value.

As said in the wiki Here.

Let’s get started, shall we?

We going to start up by adding sound.
fgghghgj
The next step is to edit our soundId.
SoundId
Now we got our sound ready let’s hop intro scripting!

We will start up by adding a local script and name it visualizer StarterPlayer > StarterCharacterScripts.
Viz
We going to start up by adding variables.

local player = game.Players.LocalPlayer
local char = player.Character or player.CharacterAdded:Wait()

Now we want to use RunService and variables.

game:GetService("RunService").RenderStepped:Connect(function()
local MySound = workspace.Sound.PlaybackLoudness
local Humanoid = char.Humanoid
end)

Now let’s do some math!

ZLook
Our player camera always looking at Z-axis now let’s move the part at the position the player looking at and let take the Z-axis and reverse it to match the camera.


As you can see the Z-axis is negative which means the camera is positive.

Let’s do coding time.

We are going to use cameraoffset to achieve this effect.

local player = game.Players.LocalPlayer
local char = player.Character or player.CharacterAdded:Wait()
game:GetService("RunService").RenderStepped:Connect(function()
local MySound = workspace.Sound.PlaybackLoudness
local Humanoid = char.Humanoid
Humanoid.CameraOffset = Vector3.new(0,MySound,MySound)
end)

After doing that you will notice there is an error as showing here.

So, how to fix that?
As said in the wiki: A number between 0 and 1000 indicating how loud the Sound is currently playing back.
We need to add numbers to fix this weird glitch.

local player = game.Players.LocalPlayer
local char = player.Character or player.CharacterAdded:Wait()
game:GetService("RunService").RenderStepped:Connect(function()
local MySound = workspace.Sound.PlaybackLoudness
local Humanoid = char.Humanoid
local Power = 400
Humanoid.CameraOffset = Vector3.new(0,MySound/Power,MySound/Power)
end)

So our power will be 400 let’s see if this will work out.


looks like it is working but it’s going to Y-axis as the same as Z-axis and it’s not smooth and cool, let’s fix that by adding superpower we will take our power and double it by 2x.
We will change the Y-axis only {x,y,z}

local player = game.Players.LocalPlayer
local char = player.Character or player.CharacterAdded:Wait()
game:GetService("RunService").RenderStepped:Connect(function()
local MySound = workspace.Sound.PlaybackLoudness
local Humanoid = char.Humanoid
local SuperPower = 800
local Power = 400
Humanoid.CameraOffset = Vector3.new(0,MySound/SuperPower,MySound/Power)
end)

Now let’s check it out!


Look’s great and smooth we made it!
Note: You can mess around with numbers to make it more smooth.
The whole script

local player = game.Players.LocalPlayer
local char = player.Character or player.CharacterAdded:Wait()
game:GetService("RunService").RenderStepped:Connect(function()
	local MySound = workspace.Sound.PlaybackLoudness
	local Humanoid = char.Humanoid
	local SuperPower = 800
	local Power = 400
	Humanoid.CameraOffset = Vector3.new(0,MySound/SuperPower,MySound/Power)
end)

Thanks for following up my tutorial, I’m sorry for bad grammar and some mistake I’m Arabic. :slightly_smiling_face:
Note: Sorry if this is wrong category I’m new to devfourm.

45 Likes

Love it, this is great, and no, I believe this is the correct category! Great job with the tutorial! Bookmarking this tab. :slight_smile:

3 Likes

Can I ask a question, when is this method used, possibly in anime games when you cast a big damage spell?

2 Likes

You don’t need to use this method to do shake screen by sound. You can use other method such as math.random and so on to make this effect too, but you can use this too I believe.

2 Likes

I see, thanks! Very useful. Thanks again!

2 Likes

This is a great tutorial! I’ll definitely refer back to this when I need it or wish to replicate something like this. Good job on this!

4 Likes

I would recommend to use random and a spring to make this much better and smooth

4 Likes

How to make it on multiple sounds not only on one but multiple sounds

What do you mean did not understand your question. Think you want it to interact with multiple songs simultaneously?

Loop through all your sounds and get the average playback loudness then just apply that as power