Dialogue Gui for my Game

Hello! I am not an experienced scripter, but I wanted to work on a more advanced Dialogue Gui for my game. I have a part which if you touch it, it activates an event, and then activates the gui script. But the thing is, I don’t like how it just pops up on your screen. I want it to fade and to tween up when appearing, and down when disappearing.

Problem is, I’m new to TweenService.

Here is my current script for the dialogue gui

ServerScriptService

local debounce = false

game.Workspace.Dialogue.Touched:Connect(function(hit) ---when i touch the dialogue block
	if not debounce then
		debounce = true
		if game.Players:GetPlayerFromCharacter(hit.Parent) then
			game.ReplicatedStorage.ShowGUI:FireClient(game.Players:GetPlayerFromCharacter(hit.Parent)) ---fires event
		end
		wait(11)
		debounce = false
	end
end)

StarterGui

game.ReplicatedStorage.ShowGUI.OnClientEvent:Connect(function() ---starts event
	script.Parent.attic.Visible = true
	wait(3)
	script.Parent.attic.Visible = false
	wait()
	script.Parent.remember.Visible = true
	wait(5)
	script.Parent.remember.Visible = false
	wait()
	script.Parent.obj.Visible = true
	wait(3)
	script.Parent.obj.Visible = false
	wait()
end)

---the "attic" "obj" and such are just the names of the texts

How do you make it so that when you touch a part, instead of it just popping up, it would tween up when appearing and vice versa, and fade in and out?

Hopefully this makes sense :slight_smile:

local TS = game:GetService("TweenService")
TS:Create(script.Parent.attic, TweenInfo.new(3), {BackgroundTransparency = 0}:Play() -- fadein
TS:Create(script.Parent.attic, TweenInfo.new(3), {BackgroundTransparency = 1}:Play() -- fadeout

rough example, must edit to work prop and nicely with ur script

local ts = game:GetService("TweenService")
local info = TweenInfo.new(0.5,Enum.EasingStyle.Back,Enum.EasingDirection.Out,0,false,0)
local function Tween(Object,Value)
	local Tween = ts:Create(Object,info,{BackgroundTransparency = Value})
	Tween:Play()
end
script.Parent.attic.BackgroundTransparency = 1
script.Parent.remember.BackgroundTransparency = 1
script.Parent.obj.BackgroundTransparency = 1
game.ReplicatedStorage.ShowGUI.OnClientEvent:Connect(function() ---starts event
	Tween(script.Parent.attic,0)
	script.Parent.attic.Visible = true
	wait(3)
	Tween(script.Parent.attic,1)
	wait(0.5)
	script.Parent.attic.Visible = false
	wait()
	Tween(script.Parent.remember,0)
	script.Parent.remember.Visible = true
	wait(5)
	Tween(script.Parent.remember,1)
	wait(0.5)
	script.Parent.remember.Visible = false
	wait()
	Tween(script.Parent.obj,0)
	script.Parent.obj.Visible = true
	wait(3)
	Tween(script.Parent.obj,1)
	wait(0.5)
	script.Parent.obj.Visible = false
	wait()
end)

here you go

1 Like

what about using function to do it? functions do make it way easier but I respect your way of doing it

Yea, functions are good too, I’m just leaving it up to the poster

The fade was okay, but it was only fading the Background of the Text

1 Like

You can fade the text if you do the same tween but with text transparency

I forgot to elaborate further sorry :frowning:

Originally
The text has 1 BackgroundTransparency,
and the text has 0 StrokeTransparency

How do you make it so that it fades both the text and the stroke

sori me is big dum dum

1 Like

I’m pretty sure that if you fade out the text the stroke should get faded out with the text. Just dont forget to use text transparency. If that’s not the case than you can easily make a tween for the stroke.

This is how to use TweenService :

local tweenService = game:GetService("TweenService") -- always do that to be able to use it

local objectHere = script.Parent.TextLabel

--after there are several ways of making a tween, this is the first way and most used way.

local tween = tweenService:Create(objectHere, TweenInfo.new(1,Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0), {TextTransparency = 1})
--after dont forget to play the tween
tween:Play()

I made an even messier script, but it works!
But the fade in doesn’t happen tho- How do you fix that?

Here’s the script

local ts = game:GetService("TweenService")
local info = TweenInfo.new(0.5,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut,0,false,0)

local function Tween(Object,Value)
	local Tween = ts:Create(Object,info,{TextTransparency = Value})
	Tween:Play()
end

local function Tween2(Object,Value)
	local Tween = ts:Create(Object,info,{TextStrokeTransparency = Value})
	Tween:Play()
end

game.ReplicatedStorage.ShowGUI.OnClientEvent:Connect(function() ---starts event
	Tween(script.Parent.attic,0)
	Tween2(script.Parent.attic,0)
	script.Parent.attic.Visible = true
	wait(3)
	Tween2(script.Parent.attic,1)
	Tween(script.Parent.attic,1)
	wait(0.5)
	script.Parent.attic.Visible = false
	wait()
	Tween(script.Parent.remember,0)
	Tween2(script.Parent.remember,0)
	script.Parent.remember.Visible = true
	wait(5)
	Tween(script.Parent.remember,1)
	Tween2(script.Parent.remember,1)
	wait(0.5)
	script.Parent.remember.Visible = false
	wait()
	Tween(script.Parent.obj,0)
	Tween2(script.Parent.obj,0)
	script.Parent.obj.Visible = true
	wait(3)
	Tween(script.Parent.obj,1)
	Tween2(script.Parent.obj,1)
	wait(0.5)
	script.Parent.obj.Visible = false
	wait()
end)
1 Like

wait i gotta try this, hold on-

You should use

tween.Completed:Wait() -- makes a wait depending on how long the tween takes

where should i put that? when its disappearing right?

oki, so the script works. with the fading and all that. The fade in is causing me problems tho-
it only appears after I touch it the second time, any idea how to fix this? tried repositioning sum parts of the script

then replace it with the text instead of background

messed around, and i got the answer!

instead of using an event, i made it so that when u touch it, it just activates it, no remoteevent and such

but it doesnt go to one person, but rather affects all people. can someone help me with this?

--- this only works for GUI, change the script and make it to your version if you want :)

local ts = game:GetService("TweenService")
local inf = TweenInfo.new(0.5,Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0) --- info for tweening

local function Tween(Object,Value)
	local OutTween = ts:Create(Object,inf,{ImageTransparency = Value}) --- change the ImageTransparency to anything you want to disappear and reappear, like TextTransparency, and etc.
	OutTween:Play()
end

local part = game.Workspace.improvedtext --- change this to the part that you want the player to touch, make sure that the part's name is different, like TextBox
local canhit = true --- delay

local chapter = script.Parent.chapter
local info = script.Parent.info

chapter.AnchorPoint = Vector2.new(0, 0)
chapter.Position = UDim2.new(0.277, 0, 0.236, 0) --- change the anchor position to whatever you want

info.AnchorPoint = Vector2.new(0, 0)
info.Position = UDim2.new(0.356, 0, 0.362, 00)

part.Touched:Connect(function(hit)
	if hit and hit.Parent:FindFirstChild("Humanoid") then --- checking if the thing that touched the part was a Humanoid
		if canhit == true then --- activates the script
			canhit = false
			Tween(script.Parent.chapter,0)
			chapter:TweenPosition(UDim2.new(0.277, 0,0.166, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine)
			wait(0.25)
			Tween(script.Parent.info,0)
			info:TweenPosition(UDim2.new(0.356, 0,0.296, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine)
			wait(4)
			Tween(script.Parent.chapter,1)
			chapter:TweenPosition(UDim2.new(0.277, 0, 0.236, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine)
			Tween(script.Parent.info,1)
			info:TweenPosition(UDim2.new(0.356, 0, 0.362, 00), Enum.EasingDirection.Out, Enum.EasingStyle.Sine)
		canhit = true --- restarts delay
		end
	end
end)