Simple closed captions system

Introduction

Hello everyone! This is my first community resource, a simple closed captions system.

Example:

local ClosedCaptions = require(game.Players.LocalPlayer.PlayerGui.ClosedCaptions.CaptionModule)

-- Add a subtitle
ClosedCaptions.Caption("Hello world!", 5)

-- Add a subtitle using blips
ClosedCaptions.CaptionBlip("Hello world!", 5, game.SoundService.blip)

Parameters

ClosedCaptions.Caption(Text, Lifespan)
Text: string, text to be displayed
Lifespan: number, how long the subtitle is visible for before it starts fading away

ClosedCaptions.CaptionBlip(Text, Lifespan, Blip)
Text: string, text to be displayed
Lifespan: number, how long the subtitle is visible for before it starts fading away
Blip: Sound instance, the sound to be played for each character

Flags

When using CaptionBlip, you can include flags in the text to make the text go faster or slower:
!f makes text go faster
!s makes text go slower
!p pauses for 0.3s
!n makes the speed normal
commas pause for 0.3s

Example:

local ClosedCaptions = require(game.Players.LocalPlayer.PlayerGui.ClosedCaptions.CaptionModule)

ClosedCaptions.CaptionBlip("!fNow text is fast!!nNow it's normal.", 5, game.SoundService.blip)
ClosedCaptions.CaptionBlip("!s!s!sNow text is sloooowwww.", 5, game.SoundService.blip)
ClosedCaptions.CaptionBlip("Now!p it's!p pausing!p between!p every!p word.", 5, game.SoundService.blip)

Use subtitles in your game

Showcase: Closed Captions Example - Roblox
Model: https://create.roblox.com/store/asset/16808990736

Just put the model in StarterGui and import the module from any localscript!

74 Likes

Simple but cool, really like it. Respect!

8 Likes

love how simple this code is. Very cool system!! i might try hooking it up to this captions system i made, i like your animations and simplicity a lot better :slight_smile:

13 Likes

This is awesome!

I have one suggestion: To make it work better with other languages and handle emoji, you can change the CaptionBlip function to use utf8.graphemes() like this:

function ClosedCaptions.CaptionBlip(Text, Lifespan, Blip)
	local WaitTime = 0.025
	local Caption = CreateCaption()
	local NextCharIsCmd = false
	for first, last in utf8.graphemes(Text) do
		local char = Text:sub(first, last)
		print(char)
		if char == '!' then
			NextCharIsCmd = true
			continue
		elseif NextCharIsCmd and char == "f" then
			WaitTime = math.max(0, WaitTime - 0.005)
			WaitTime = math.min(10, WaitTime)
		elseif NextCharIsCmd and char == "s" then
			WaitTime = WaitTime + 0.005
		elseif NextCharIsCmd and char == "p" then
			task.wait(0.3)
		elseif NextCharIsCmd and char == "n" then
			WaitTime = 0.025
		else
			if char == "," then
				task.wait(0.3)
			end
			SoundService:PlayLocalSound(Blip)
			task.wait(WaitTime)
			Caption.Text = Caption.Text .. char
		end
		NextCharIsCmd = false
	end

	CleanCaption(Caption, Lifespan)
end

That function returns a list of every character in the string without cutting anything in half. I had to rearrange how commands are checked a little so that it would work.

10 Likes

Thank you! Your way of doing things is definitely better and easier than what I was doing.
I tested it with Arabic and emojis:


But the Arabic looks weird because the appearance of the letter depends on the letter after it, will be looking into a way to fix that.

5 Likes

No way the meme reached you too :skull_and_crossbones:

1 Like

Whats wrong with the caption? i can read it easily

1 Like

Only because it’s a screenshot, here’s a video.

Why wouldn’t it reach me lol??

Oh ye add this character after arabic letters if its not the end of the text ـ it acts like a letter
Like dont add it if the next char is a space or the end of the sentence

1 Like

Ok i thought you are a non arab i was confused how did non arabs know about that meme

Awesome! The style and simplicity will make it work with many great game genres. I’ll definetly give this a try, thanks :smile:

2 Likes

Any updates about Arabic support?

1 Like

I’m gonna work on it after my studies.

1 Like

I think it would be difficult since Arabic letters are connected

image
The circles are the connected parts, Look at مرحبًا and שלום

1 Like

Its such an amazing language it reminds people of friendship by making letters shake eachother’s hands
That’s why arabic is better than English

3 Likes

It took some hours but I finally fixed Arabic.


Next, I wanna do something like if player is holding something or presses a button, the text goes faster.

1 Like

Now clicking/touching the subtitle skips it!

4 Likes

Just a cheeky feature request but maybe the possibility of having Questions? or simple Yes/No with different dialog trees?

Funny thing, I already have something like that. I can’t do dialogue trees but I can just do the question function.