Giving bubble chat a typewriter like effect

Hello! As the title would suggest, I am attempting to create a typewriter-like effect for bubble chat! (yes, I know its not possible with regular bubble chat and I have to make my own UI.) I know its possible and probably easier than I think, but im a bit confused and dont know where to even try to start. If someone could give me a nudge in the right direction, that would help a lot! Thank you for your time if you’ve read this!

I mean, just make a UI, you can use a BillboardGui, its the most similar to a chat bubble, then you can use something like this to animate it, if this is what you want:

local label = script.Parent.TextLabel
local text = "test text, helloteghfjdsiakdk"

local speed = 0.1

for i = 1, #text do
	local newtext = string.sub(text, 1, i)
	label.Text = newtext
	task.wait(speed)
end

change it up to your needs, it iterates over a string, and just adds a letter onto the text basically, i wont go into detail, but here you go.

have fun!

Thank you for the base script! Though, im more so intimidated by finding a way to properly hook it up to chat and display over peoples heads, rather than the typewriter effect itself. Im sure that over a few hours of scouring documentation and other forums i could figue out how to make this script do that, but if you’ve got any more advice that would greatly help. Even if you dont, thank you for your time and advice!

BillboardGui to display it above the player.

I don’t know what you mean by “typewriter-like effect”.
if you want to get the player message that was sent in the chat, then you can use OnIncomingMessage.

I think you’re misunderstanding my messages. First of all, a typewriter-like effect is when text is typed out. The script provided by the other person accomplishes that, once more my gratitude to them. However, again, the issue i am having about not knowing where to start comes from the fact I dont know how to make a bubble chat system. I understand how the GUI itself works, but i lack the nessacary information to produce a working chat system.

I believe you can overwrite Roblox’s chat scripts by running the game as a test, copying the chat scripts, ending the test, and then pasting them into Chat (if you’re using the legacy chat system). I did this to color bubble chat based on team color, so I know you can modify the chat bubbles by doing that.

I’m not too familiar with TextChatService.

Unfortunately, I am using text chat service. I know the solution is to make my own bubble chat systems and UI, but again, i have no idea how to approach making an entire system, and im not finding any good advice or resources on how to make a custom bubble chat in the forums

Many tutorials on this. This questions has been asked here and solved many times.

I actually saw many of those posts, but none of them seemed to properly answer my question, or were unrelated. I did a suprising amount of searching before making a post here, unlike most people i assume

You dont need updating the text at all really…BECOUSE ITS UNOPTIMIZED GRRR :rage:
image
exists for a reason
1 - 1 char visible
2 - 2 char visible
3 - 3 char visible
-1 - everything visible

alrighty buddy, pipe down. :rage:

1 Like

The way Roblox does it is by adding a billboardgui to the player’s head with an offset in the position value, having a start, middle, end, and tail section that are all imagelabels, and them putting them together to form one message body. You could probably just make it a frame with a uicorner element. You can leave the tail part or make your own image for it. And then you just have to stack the messages and make them tween to the next position once the bottom message of the stack disappears. I would also suggest putting a limit on how many bubbles can be created. You don’t necessarily have to tween them either, you could just make them teleport to the next position. That would probably solve a lot of issues involving synchrony. If the player sends messages faster than the tween lasts, you run into problems when tweening the top messages down. I had that problem with a notification system. Although, now that I think about it, you could solve that by having a while loop move the message down until a desired position is reached. Doing that, you could edit the variable that determines the desired position and you wouldn’t have to interrupt the movement. That method wouldn’t have smoothing though and it would probably be choppier. Either way, you’d of course have to take message bubble size into account.

You just have to detect messages and then add bubbles for them in the billboardgui.

Hope that gives you an idea on how to start.