UI Wind Effect (Images or Particles?)

I want to make UI Wind effect when the player is running in high speed but I need a start since I don’t know how to start making it.

My first guess was to use particles and use a local script to update the wind particles to the players camera.

After furthur research, people sayd they used images and I’m not sure if that’s true because images would make it choppy.

So if anyone made this ui effect before, how was it made?

Here’s a similar topic that I didn’t find answers to: Making a ui running effect help
Thank you for reading.

4 Likes

You could make a wind effect particle emitter which moves with the players character and has its speed and rate tied to the magnitude of the character’s velocity. This is a really basic way though

3 Likes

Yup that’s the way I was thinking of to do, I’m not sure if it will work the same way as other games.

1 Like

This would work for first person but not third person, that’s one problem with this solution.

1 Like

Fair point, then what you could do instead is base the position of the emitter’s part on the camera position, but base the rotation of that part to face the inverse of the direction the character is moving

2 Likes

The way I did something similiar is by adding attachments around the player and attaching trails to them, you should try it out imo, it’s not perfect but it’s the closest I could get
(or you could use sphere unions)

3 Likes

This effect is achieved using SpriteSheets, which is basically changing the ImageRectOffset (i hope) in an ImageLabel to switch to the next “frame” of the spritesheet to make it appear as if its being animated. You can either create the spritesheet yourself or obtain it from the internet (search up smth like cartoony speed effect). After that you can use a module like this to make the process easier.

P.S: I’m assuming you meant smth like the Bad Businnes sprint effect

1 Like

Where do I find spritesheets for this specific thing?

UPDATE: I found out what it the overlay is called: [Effect] Speedlines Overlay (MP4 and PCF download) - YouTube

I searched for unity tutorials and it looks like they all use triangle particles and put it in the camera position.

Can you show me how yours looks like?

Wow, video frames actually work in roblox?

Nvm, mb but you can’t upload your own videos unfortunately.

Ok so, I found the way. They use particles to do this but I ran into an issue while making particles.
Roblox’s particle system is not good in my opinion and I’m not sure how I am able to simulate the particles.

The first problem I ran through was making the particles spherical. And the second problem was I couldn’t stretch the particles.

This might just be me lacking experience in making vfx. If anyone knows how to make this particle please help.

try doing this instead:
-Create a sphere part in the workplace
-Make it a union
-Place it in the replicated storage
-Make a LocalScript or Script depending on which side you want the VFX to appear
-Make the script clone the part
-Resize the part’s clone to your liking (usually I put 0.7,0.7,math.random(4,6)) --remember the size has to be a V3
-Make the clone’s parent the workspace
-Set the clone CanCollide value to false
-Make it’s material neon
-Set it CFrame to the player’s character’s primary part + a V3 made out of math.random depending on the area around the player you want it to affect and the lookat property to the player’s speed or primarypart’s look vector
-get the Debris game service and add the clone to it, setting the time for it to be deleted to whatever you want
-Lastly if you want it to look better you can make it turn invisible,Shrink, both with a tween service or follow your player’s direction (also with a Tween service)

If you don’t understand something I’d recommend looking it up as I’m not the best teacher but I’ll still try to answer any doubt if you ask me.

(Sorry for the long response)

3 Likes

I am not sure if this effect really needs parts though to be honest. Like you can tell it’s a particle emitter.

I believe you can probably do this using a bunch of attachments formed in a circular with speed line emitters.

I will try this tomorrow and show the results if I do it correctly.

Another Reference:

The method I suggested is used by most games to make that effect, and it’s the most effective, if you plan to make something that follows the camera you should make the same thing but instead of setting it to a random position around the player you should put it in the currentcamera’s CFrame.Position plus a random vector3 based on what you want it to look like. However that effect can be attained by using a particle emitter attached to the player’s current camera too, emitting towards the player therefore having it emit in the front face and have it face the player, furthermore you should tweak the particle’s transparency to go from 1 to 0 and then back to 1 and have it NOT be locked to the part, that way you could attain something similar.

1 Like

I’m not sure how I would be able to do the method. Can you personally show me a topic about this method? I haven’t found anything about this in roblox. Only in unity I have found.

If you’re talking about the particle method or union?

1 Like

The Union method is what I am talking about.

I found a speedlines module scripts in one of @iGottic’s open sourced projects and this is how it was being done

--// Type Definitions.

type Array<Type> = {[number] : Type};
type Dictionary<Type> = {[string] : Type};

--// Plugin Initalization.

local SpeedLines = {};

local Camera = workspace.CurrentCamera

local LinePickFPS = 1/15
local LastLinePick = os.clock()

local ActiveLine = nil
local Attachments = {}

--// Plugin Actions.

function SpeedLines:Prepare()
	for X = -5, 5, 0.25 do
		for Y = -5, 5, 0.25 do
			local AttachmentData = {X, Y, -5}
			local Attachment0 = Instance.new("Attachment", workspace.Terrain)
			local Attachment1 = Instance.new("Attachment", workspace.Terrain)
			local Line = script.Trail:Clone()
			
			Line.Parent = workspace.Terrain
			Line.Attachment0 = Attachment0
			Line.Attachment1 = Attachment1
			Line.Enabled = false
			Attachments[#Attachments + 1] = {Attachment0, Attachment1, Line, AttachmentData}
		end
	end
end

function SpeedLines:Render()
	for _, LineData in Attachments do
		local Attachment0, Attachment1, Line, AttachmentData = unpack(LineData)

		Attachment0.CFrame = Camera.CFrame * CFrame.new(unpack(AttachmentData))
		Attachment1.CFrame = Camera.CFrame * CFrame.new(unpack(AttachmentData)) * CFrame.new(0, 0.15, 0)
	end
	
	if os.clock() - LastLinePick >= LinePickFPS then
		LastLinePick = os.clock()
		
		local LineData = Attachments[math.random(1, #Attachments)]
		local Attachment0, Attachment1, Line, AttachmentData = unpack(LineData)
		
		--ActiveLine = LineData
		
		Line.Enabled = true
		
		task.delay(LinePickFPS * 2, function()
			Line.Enabled = false
		end)
	end
end

--// Plugin Finalization.

return (SpeedLines);
2 Likes