Story Game Dialogue UI Help

Help and Feedback Scripting Support
#1

This is my first time scripting User Interface for my story game and I couldn’t find information about how those story games make the dialogue like a typewriter.

#2

1 Like
#3

Here’s the information that you’ll need: Animating Text

1 Like
#4

— LocalScript —

local player = game.Players.LocalPlayer
local CreateDialogueEvent = game.ReplicatedStorage.CreateDialogueEvent
local DialogueFrame = player.PlayerGui.DialogueGui.DialogueFrame

local function playSound(sound_id) – Plays typing sound
local sound = Instance.new(“Sound”,game.ReplicatedStorage)
sound.SoundId = sound_id
sound.Volume = .1
sound.PlayOnRemove = true
sound:Destroy()
end

local function textAnimate(content) – Animates each letter
for i=1,string.len(content) do
DialogueFrame.TextLabel.Text = string.sub(content,1,i)
playSound(“rbxassetid://915576050”)
if string.sub(content,i,i) == “!” or string.sub(content,i,i) == “.” or string.sub(content,i,i) == “?” then
wait(1)
elseif string.sub(content,i,i) == “,” then
wait(.5)
else
wait(.05)
end
end
end

CreateDialogueEvent.OnClientEvent:Connect(function(name, image_id, content) – activates when called from the Server
if not player:findFirstChild(“secretEnding”) then
DialogueFrame.nameLabel.Text = name
DialogueFrame.ImageLabel.Image = image_id
DialogueFrame.TextLabel.Text = “”
DialogueFrame.Visible = true
textAnimate(content)
end
end)

— Script —

local CreateDialogueEvent = game.ReplicatedStorage.CreateDialogueEvent

– Other Useful Functions

local randomPlayerName
local randomPlayerId

local function getPlayerImage(player_id)
local content, isReady = game:GetService(“Players”):GetUserThumbnailAsync(player_id, Enum.ThumbnailType.HeadShot, Enum.ThumbnailSize.Size420x420)
return content
end

local function getRandomPlayer()
local players = game.Players:getPlayers()
local number = math.random(1,#players)
local randomPlayer = players[number]
randomPlayerName = randomPlayer.Name
randomPlayerId = randomPlayer.UserId
end

local function DialogueEvent(name, image_id, text)
CreateDialogueEvent:FireAllClients(name, image_id, text)
end

----- MainScript of Story -----

wait(10)

getRandomPlayer()

DialogueEvent(randomPlayerName, getPlayerImage(randomPlayerId), “Hello, World”)

2 Likes