Tweening in subtitles

Help and Feedback Scripting Support
#1

I’m making a subtitles system, and I want all the subtitles to tween in smoothly, along with the bar that holds all the subtitles. Once the subtitle is destroyed, I want the GUI to tween back to it’s original size (before the subtitle was added)

Currently my code destroys the subtitle, but that causes the GUI to snap to the new position rather than tweening smoothly. I’m using UIListLayout.

Current subtitle code 

local subtitle = {}
local amount = 0

function subtitle.New(text : string, decay : number, tweenInfo : TweenInfo, gui : ScreenGui)
	local BarContainer : Frame = gui:FindFirstChild("BarContainer")

	if BarContainer then
		print(BarContainer)

		local SubtitleTemplate : TextLabel = BarContainer:FindFirstChild("SubtitleTemplate")

		if SubtitleTemplate then

			amount += 1
			print(SubtitleTemplate)

			local newSubtitleObject = SubtitleTemplate:Clone()
			newSubtitleObject.Text = text
			newSubtitleObject.Name = "NewSubtitle_" .. amount

			-- Set text transparency to 1, we're gonna fade it in later
			newSubtitleObject.TextTransparency = 1

			-- Get original size, we're gonna tween back to this before the subtitle is destroyed.

			-- Setup tweens for later
			local SubtitleFadeIn = TweenService:Create(newSubtitleObject, tweenInfo, {TextTransparency = 0})
			local SubtitleFadeOut = TweenService:Create(newSubtitleObject, tweenInfo, {TextTransparency = 1})
			
			-- Parent it
			newSubtitleObject.Parent = BarContainer

			-- Set subtitle to visible then immediately play the tween after.
			newSubtitleObject.Visible = true
			SubtitleFadeIn:Play()

			-- Wait (decay) and fade out.
			task.wait(decay)
			SubtitleFadeOut:Play()

			-- Wait for tween to finish
			SubtitleFadeOut.Completed:Wait()

			-- Destroy subtitle object
			newSubtitleObject:Destroy()

		end

	else
		warn("Subtitle GUI is invalid! Did you supply the correct GUI?")
	end
end

return subtitle

A good example of the effect I want to achieve is attached, from the game Innovation Inc. Thermal Power Plant

2 Likes
#2

any chance you can show us an example of your current code in action?

1 Like
#3

You could tween the notification’s y size before destroying it.

1 Like
#4

I have the container set to scale with the text on the Y axis, I can’t change the position either because of the list layout. Sizing it does this.

image
image1008×260 27.7 KB

1 Like
#5

Sure thing!

1 Like
#6

Couldn’t you tween the text label’s y size and set anchor position to UDIM(0, 1)so the anchor point stay on the bottom ?

1 Like
#7

Same issue, setting the size of the text label messes with the dimensions of the box.

image
image1629×352 113 KB

1 Like
#8

I’m not quite sure of what’s the issue here on your image, just tween the upper one to shrink as the other grows and make it grow again once the other one fully appeared?

1 Like
#9

I see now, I misunderstood what you said the first time. I’ve got it working almost perfectly, there’s just a small jump when the subtitles get destroyed.

1 Like
#10

What’s the value of the UIPadding of your UIListLayout? Consider changing the y value to 0.

#11

I would do so, but then multiple messages start to get messy

image
image953×119 15.3 KB

#12

A possibility would be to put text labels inside frames and make frames slighty longer, so the text doesn’t overlap. If so, only change the frames’ size, not text labels’

1 Like