FireEffect around Textbox

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    How can i make a fire effect around the borders of this textboxand when the user start typing the fire effect keeps playing like it starts animating.
  2. What is the issue? Include screenshots / videos if possible!
    I have no idea how to make that.
  3. What solutions have you tried so far? Did you look for solutions on the Creator Hub?
    I looked up on google, forums, youtube and chatgpt but nothing.
    After that, you should include more details if you have any. Try to make your topic as descriptive as possible, so that it’s easier for people to help you!

Please do not ask people to write entire scripts or design entire systems for you. If you can’t answer the three questions above, you should probably pick a different category.

1 Like

images

? what do you mean by images ?

image labels

me smart :troll: and funny ofc bruh :skull:

There might be a better way to do this, but maybe try using sprite sheets for like a mini animation.

1 Like

Research flipbook animation and sprite sheets. Essentially, use a single image that has several images on it, then offset the visible portion of the image each frame to simulate animation.

3 Likes

I wanted to do that but i’m pretty sure there is a better way, and if you didn’t understand i meant like all the border like is on fire and then when the user starts typing it rotate or play the fire effect idk how can you call this

I am not sure how you’d wrap the fire element around the UI, it would probably have to do with calculating the angle of the corner at a position and rotating the fire effect to point at that angle.

i already saw that effect in a game but i’m not sure if you have to calculate the angle or it’s just an image that’s getting rotated or a gif ?

You cannot import gifs into roblox to my knowledge. You’d need to calculate the angle at which to rotate the image in order to rotate it.

You can imitate GIFs, it’s just a series of interpolated images like a flip book.

You can also use a 2d particle emitter plugin. There are several.

Edit: like this one Emitter2D - Convert any ParticleEmitter to 2D with the click of a button!

One way is to have top and bottom seperated, but make them tileable, so end and start is identical, then you can keep offsetting x on the ImageLabel to make the fire at least moving


so i will try this tomorrow and tell you if it works

Basically i will try to upload a video perfectly scaled and when user start typing make the video play if i can’t scale it perfectly i will use multiple videos with each part of the border (ex top border, bottom border left, right…)

if it works i will mark it as solution.

Thank you, i will also try your solution tomorrow to see if it works because it seems more optimized than just adding a whole video to the game.

I would create an ImageLabel and then crop it down with some effects and have it move continuously, like an infinite texture.

local RunService = game:GetService("RunService")

local fps = 23
local LastFrame = 1
local frames = 12*8+4
local rows = 13
local colums = 8

local IsFocusedOrInBox = false
local RunConnection = nil

local ResponseBox = script.Parent
local Animated = script.Parent:WaitForChild("Frame"):WaitForChild("ImageLabel")
local PlaceHolder = Animated.Parent:WaitForChild("PlaceHolder")

local t = tick()


local function Update()
	if tick() - t >= 1/fps then
		LastFrame += 1
		
		if LastFrame > frames then LastFrame = 1 end
		
		local CurrentColumn = LastFrame
		local CurrentRow = 1
		
		repeat
			if CurrentColumn > colums then
				CurrentColumn = CurrentColumn - colums
				CurrentRow = CurrentRow + 1
			end
		until not (CurrentColumn>colums)
		
		Animated.Position = UDim2.new(-(CurrentColumn-1), 0, -(CurrentRow-1), 0)
		
		t = tick()
	end
end

local function StartUpdate()
	if RunConnection then return end
	
	IsFocusedOrInBox = true
	
	Animated.Size = UDim2.new(colums, 0, rows, 0)
	Animated.Visible = true
	PlaceHolder.Visible = false
	
	RunConnection = RunService.RenderStepped:Connect(function()
		if not IsFocusedOrInBox then
			if not RunConnection then return end
			
			RunConnection:Disconnect()
			RunConnection = nil
		else
			Update()
		end
	end)
end

local function EndUpdate()
	IsFocusedOrInBox = false
	Animated.Visible = false
	PlaceHolder.Visible = true
end

ResponseBox.InputBegan:Connect(StartUpdate)
ResponseBox.MouseEnter:Connect(StartUpdate)

ResponseBox.MouseLeave:Connect(EndUpdate)
ResponseBox.FocusLost:Connect(EndUpdate)

Image i used :

Explaination :(this should help)

This helped me alot and i also needed to resize the image well in the frame

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.