Creating fancy text effects using default ROBLOX TextLabels

Now I’m going to end up explaining this badly and making it seem complicated :X, but it’s not!
[size=4]THE CODE IS AT THE BOTTOM. JUST EDIT THE VARIABLES![/size]

Example:

This is easier than doing the drop shadow. Again, you have to clone the textlabel inside of itself twice (one for the glow, one for the shadow). Make sure that both of these copies have a ZIndex higher than the original.

Like positioning the drop shadow, you can position the “light source” of which changes the direction of the bevel. In this example, to keep it short I will do the most common (light source coming from top left, as shown in picture above).

[size=4]Glow[/size]
Set both the textcolor and strokecolor to white (unless you want different lighting colours, or if you set it to black it will create a shadow all the way around the inside - I think. The font is probably too wide.)
Position this “glowing” label about -2 pixels on the Y and on the X axis. (0.5,-2,0.5,-2)
CHANGE THE TRANSPARENCY!
I strongly recommend having a transparency of 0.95 for both the text and stroke, but you can vary it slightly for different light intensities.

[size=4]Shadow[/size]
Set both the textcolor and strokecolor to black (unless you want different shadow colours, or if you set it to your light colour it will create a light all the way around the inside - I think. The font is probably too wide.)
Position this “shadow” label about positive 2 pixels on the Y and on the X axis. (0.5,2,0.5,2)
CHANGE THE TRANSPARENCY!
I strongly recommend having a transparency of 0.95 for both the text and stroke, but you can vary it slightly for different light intensities.

…I hope this helped? It probably didn’t. But this is possible using nothing but the default fonts! It works with ALL of them, at any size (but the textlabels giving the effects may need to be scaled down, in terms of position too.)

Edit this code’s variables below, and paste it into your command box to create one automatically (copy and paste the code into some sort of text editor, sublime or a script to easily read it):

[code]local location = game.StarterGui.Title

local shadow = true
local bevel = true
local cartoonify = 0 – 0 = smooth / blurred 1 = solid opaque colour 2 = solid opaque colour AND a thicker outline

local t_position = UDim2.new(0.5,0,0.5,0)
local t_font = “Legacy”
local t_size = “Size48” – font size
local t_text = “Generic Text”
local t_zindex = 5 ---------------------- MAX = 9, MIN = 2

---- Shadow ----
–[[ shadow_direction MUST EITHER BE:
bottom (shadow will be cast on top)
bottom-right (shadow will be cast on bottom and right)
bottom-left (shadow will be cast on bottom and left)
bottom-direct (shadow will be cast on bottom, left and right)
top (shadow will be cast on top)
top-right (shadow will be cast on top and right)
top-left (shadow will be cast on top and left)
top-direct (shadow will be cast on top, left and right)
left (shadow will be cast on left)
right (shadow will be cast on right)
direct (shadow will be cast on all sides)
–]]

local shadow_direction = “bottom-direct”
local shadow_colour = Color3.new(0,0,0)
local shadow_transparency = 0.92
local shadow_distance = 4
local t_stroke_transparency = 0.5 – text stroke transparency, makes shadow look even smoother

---- Bevel ----
–[[ bevel_direction MUST EITHER BE:
bottom (light source from bottom)
bottom-right (light source from bottom right)
bottom-left (light source from bottom left)
top (light source from top)
top-right (light source from top right)
top-left (light source from top left)
left (light source from left)
right (light source from right)
–]]

local bevel_direction = “top-left”
local t_colour = Color3.new(0.5,0.5,0.5)
local bevel_glow_colour = Color3.new(1,1,1)
local bevel_glow_transparency = 0.92
local bevel_shadow_colour = Color3.new(0,0,0)
local bevel_shadow_transparency = 0.95
local bevel_distance = 2

---------- my horrible code - don’t edit unless your life is on the line because my bad-ness triggered intense OCD #_@ ----------

print(“Generating some fancy text - code by ZacAttackk”)

local t = Instance.new(“TextLabel”)
t.Parent = location
t.Name = “SpecialText”
t.BackgroundTransparency = 1
t.ZIndex = t_zindex
t.Position = t_position
t.Font = t_font
t.FontSize = t_size
t.Text = t_text
t.TextStrokeTransparency = t_stroke_transparency
t.TextColor3 = t_colour
t.TextStrokeColor3 = shadow_colour

if shadow == true then
print(“Adding a shadow to your text”)
local s = t:Clone()
s.Parent = t
s.ZIndex = t_zindex - 1
s.Name = “Shadow”
s.TextColor3 = shadow_colour
s.TextStrokeColor3 = shadow_colour
s.TextTransparency = shadow_transparency
s.TextStrokeTransparency = shadow_transparency

if cartoonify == 1 then
	print("Making the shadow cartoon-y")
	s.TextTransparency = 0
	s.TextStrokeTransparency = 1
elseif cartoonify == 2 then
	print("Making the shadow cartoon-y and thicker")
	s.TextTransparency = 0
	s.TextStrokeTransparency = 0
end

if shadow_direction == "bottom" then -- position the shadow
	s.Position = UDim2.new(0.5,0,0.5,shadow_distance)
elseif shadow_direction == "bottom-right" then
	s.Position = UDim2.new(0.5,0,0.5,shadow_distance)
	local s2 = s:Clone()
	s2.Name = "Shadow_right"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,shadow_distance,0.5,shadow_distance/2)
elseif shadow_direction == "bottom-left" then
	s.Position = UDim2.new(0.5,shadow_distance,0.5,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,-shadow_distance,0.5,shadow_distance/2)
elseif shadow_direction == "bottom-direct" then
	s.Position = UDim2.new(0.5,shadow_distance,0.5,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,-shadow_distance/2,0.5,shadow_distance/2)
	local s3 = s:Clone()
	s3.Name = "Shadow_right"
	s3.Parent = t
	s3.Position = UDim2.new(0.5,shadow_distance/2,0.5,shadow_distance/2)
elseif shadow_direction == "top" then
	s.Position = UDim2.new(0.5,0,0.5,-shadow_distance)
elseif shadow_direction == "top-right" then
	s.Position = UDim2.new(0.5,0,0.5,-shadow_distance)
	local s2 = s:Clone()
	s2.Name = "Shadow_right"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,shadow_distance,0.5,-shadow_distance/2)
elseif shadow_direction == "top-left" then
	s.Position = UDim2.new(0.5,shadow_distance,0.5,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,-shadow_distance,0.5,-shadow_distance/2)
elseif shadow_direction == "top-direct" then
	s.Position = UDim2.new(0.5,shadow_distance,0.5,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,-shadow_distance/2,0.5,-shadow_distance/2)
	local s3 = s:Clone()
	s3.Name = "Shadow_right"
	s3.Parent = t
	s3.Position = UDim2.new(0.5,shadow_distance/2,0.5,-shadow_distance/2)
elseif shadow_direction == "left" then
	s.Position = UDim2.new(0.5,-shadow_distance,0.5,0)
elseif shadow_direction == "right" then
	s.Position = UDim2.new(0.5,shadow_distance,0.5,0)
elseif shadow_direction == "direct" then
	s.Position = UDim2.new(0.5,shadow_distance,0.5,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = t
	s2.Position = UDim2.new(0.5,-shadow_distance,0.5,-shadow_distance)
	local s3 = s:Clone()
	s3.Name = "Shadow_right"
	s3.Parent = t
	s3.Position = UDim2.new(0.5,shadow_distance,0.5,-shadow_distance)
	local s4 = s:Clone()
	s4.Name = "Shadow_bottom"
	s4.Parent = t
	s4.Position = UDim2.new(0.5,shadow_distance,0.5,shadow_distance)
end

end

if bevel == true then
print(“Adding a bevel to your text”)
local b = t:Clone() – glow
b.Parent = t
b.Name = “Bevel_Glow”
b.ZIndex = t_zindex + 1
b:ClearAllChildren() – there are probably shadows in it
b.TextColor3 = bevel_glow_colour
b.TextStrokeColor3 = bevel_glow_colour
b.TextTransparency = bevel_glow_transparency
b.TextStrokeTransparency = bevel_glow_transparency

local b2 = b:Clone() -- shadow
b2.Parent = t
b2.Name = "Bevel_shadow"
b2:ClearAllChildren() -- idk just to make sure
b2.TextColor3 = bevel_shadow_colour
b2.TextStrokeColor3 = bevel_shadow_colour
b2.TextTransparency = bevel_shadow_transparency
b2.TextStrokeTransparency = bevel_shadow_transparency

if bevel_direction == "bottom" then -- position the bevel
	b.Position = UDim2.new(0.5,bevel_distance,0.5,0)
	b2.Position = UDim2.new(0.5,-bevel_distance,0.5,0)
elseif bevel_direction == "bottom-right" then
	b.Position = UDim2.new(0.5,bevel_distance,0.5,bevel_distance)
	b2.Position = UDim2.new(0.5,-bevel_distance,0.5,-bevel_distance)
elseif bevel_direction == "bottom-left" then
	b.Position = UDim2.new(0.5,bevel_distance,0.5,-bevel_distance)
	b2.Position = UDim2.new(0.5,-bevel_distance,0.5,bevel_distance)
elseif bevel_direction == "top" then
	b.Position = UDim2.new(0.5,bevel_distance,0.5,0)
	b2.Position = UDim2.new(0.5,-bevel_distance,0.5,0)
elseif bevel_direction == "top-right" then
	b.Position = UDim2.new(0.5,bevel_distance,0.5,bevel_distance)
	b2.Position = UDim2.new(0.5,-bevel_distance,0.5,-bevel_distance)
elseif bevel_direction == "top-left" then
	b.Position = UDim2.new(0.5,-bevel_distance,0.5,-bevel_distance)
	b2.Position = UDim2.new(0.5,bevel_distance,0.5,bevel_distance)
elseif bevel_direction == "left" then
	b.Position = UDim2.new(0.5,-bevel_distance,0.5,0)
	b2.Position = UDim2.new(0.5,bevel_distance,0.5,0)
elseif bevel_direction == "right" then
	b.Position = UDim2.new(0.5,bevel_distance,0.5,0)
	b2.Position = UDim2.new(0.5,-bevel_distance,0.5,0)
end

end
[/code]

11 Likes

Nice work! That’s really awesome. That’s a hell lot of GUI rendering for such a thing, but it works.

Very nice, reminds me of PowerPoint title fonts.

This also works with Frames and ImageLabels (changing the imagecolor3)

It’s nice to know there are people like you who experiment with the very limited resources ROBLOX provides for creative freedom. Most of my work old work in ROBLOX involved working with art programs like GIMP and Photoshop. Due to the lack of quality maintained in a ImageLabel when resized (Bigger or Smaller) it would usually butcher the quality immensely for logos and custom text titles.

Would you consider working on a plugin to incorporate what your technique and more so to provide an easier way to manage the work load? Automatic generation and editing with a proper custom plugin UI with a proper layout for the settings.

:slight_smile:

1 Like

Reminds me of the Microsoft Office text effects.

I edited the code a little bit so you can convert existing TextLabels to this.

[code]
local Label = game.Selection:Get()[1]

local shadow = true
local bevel = true
local cartoonify = 0 – 0 = smooth / blurred 1 = solid opaque colour 2 = solid opaque colour AND a thicker outline

if Label.ZIndex < 2 then
Label.ZIndex = 2
elseif Label.ZIndex > 9 then
Label.ZIndex = 9
end
local t_zindex = Label.ZIndex - 1

---- Shadow ----
–[[ shadow_direction MUST EITHER BE:
bottom (shadow will be cast on top)
bottom-right (shadow will be cast on bottom and right)
bottom-left (shadow will be cast on bottom and left)
bottom-direct (shadow will be cast on bottom, left and right)
top (shadow will be cast on top)
top-right (shadow will be cast on top and right)
top-left (shadow will be cast on top and left)
top-direct (shadow will be cast on top, left and right)
left (shadow will be cast on left)
right (shadow will be cast on right)
direct (shadow will be cast on all sides)
–]]

local shadow_direction = “bottom-direct”
local shadow_colour = Color3.new(0,0,0)
local shadow_transparency = 0.92
local shadow_distance = 4
local t_stroke_transparency = 0.5 – text stroke transparency, makes shadow look even smoother

---- Bevel ----
–[[ bevel_direction MUST EITHER BE:
bottom (light source from bottom)
bottom-right (light source from bottom right)
bottom-left (light source from bottom left)
top (light source from top)
top-right (light source from top right)
top-left (light source from top left)
left (light source from left)
right (light source from right)
–]]

local bevel_direction = “top-left”
local t_colour = Color3.new(0.5,0.5,0.5)
local bevel_glow_colour = Color3.new(1,1,1)
local bevel_glow_transparency = 0.92
local bevel_shadow_colour = Color3.new(0,0,0)
local bevel_shadow_transparency = 0.95
local bevel_distance = 2

---------- my horrible code - don’t edit unless your life is on the line because my bad-ness triggered intense OCD #_@ ----------

if shadow == true then
local s = Label:Clone()
s.Parent = Label
s.ZIndex = t_zindex - 1
s.Name = “Shadow”
s.TextColor3 = shadow_colour
s.TextStrokeColor3 = shadow_colour
s.TextTransparency = shadow_transparency
s.TextStrokeTransparency = shadow_transparency

if cartoonify == 1 then
	s.TextTransparency = 0
	s.TextStrokeTransparency = 1
elseif cartoonify == 2 then
	s.TextTransparency = 0
	s.TextStrokeTransparency = 0
end

if shadow_direction == "bottom" then -- position the shadow
	s.Position = UDim2.new(0,0,0,shadow_distance)
elseif shadow_direction == "bottom-right" then
	s.Position = UDim2.new(0,0,0,shadow_distance)
	local s2 = s:Clone()
	s2.Name = "Shadow_right"
	s2.Parent = Label
	s2.Position = UDim2.new(0,shadow_distance,0,shadow_distance/2)
elseif shadow_direction == "bottom-left" then
	s.Position = UDim2.new(0,shadow_distance,0,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = Label
	s2.Position = UDim2.new(0,-shadow_distance,0,shadow_distance/2)
elseif shadow_direction == "bottom-direct" then
	s.Position = UDim2.new(0,shadow_distance,0,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = Label
	s2.Position = UDim2.new(0,-shadow_distance/2,0,shadow_distance/2)
	local s3 = s:Clone()
	s3.Name = "Shadow_right"
	s3.Parent = Label
	s3.Position = UDim2.new(0,shadow_distance/2,0,shadow_distance/2)
elseif shadow_direction == "top" then
	s.Position = UDim2.new(0,0,0,-shadow_distance)
elseif shadow_direction == "top-right" then
	s.Position = UDim2.new(0,0,0,-shadow_distance)
	local s2 = s:Clone()
	s2.Name = "Shadow_right"
	s2.Parent = Label
	s2.Position = UDim2.new(0,shadow_distance,0,-shadow_distance/2)
elseif shadow_direction == "top-left" then
	s.Position = UDim2.new(0,shadow_distance,0,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = Label
	s2.Position = UDim2.new(0,-shadow_distance,0,-shadow_distance/2)
elseif shadow_direction == "top-direct" then
	s.Position = UDim2.new(0,shadow_distance,0,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = Label
	s2.Position = UDim2.new(0,-shadow_distance/2,0,-shadow_distance/2)
	local s3 = s:Clone()
	s3.Name = "Shadow_right"
	s3.Parent = Label
	s3.Position = UDim2.new(0,shadow_distance/2,0,-shadow_distance/2)
elseif shadow_direction == "left" then
	s.Position = UDim2.new(0,-shadow_distance,0,0)
elseif shadow_direction == "right" then
	s.Position = UDim2.new(0,shadow_distance,0,0)
elseif shadow_direction == "direct" then
	s.Position = UDim2.new(0,shadow_distance,0,0)
	local s2 = s:Clone()
	s2.Name = "Shadow_left"
	s2.Parent = Label
	s2.Position = UDim2.new(0,-shadow_distance,0,-shadow_distance)
	local s3 = s:Clone()
	s3.Name = "Shadow_right"
	s3.Parent = Label
	s3.Position = UDim2.new(0,shadow_distance,0,-shadow_distance)
	local s4 = s:Clone()
	s4.Name = "Shadow_bottom"
	s4.Parent = Label
	s4.Position = UDim2.new(0,shadow_distance,0,shadow_distance)
end

end

if bevel == true then
local b = Label:Clone() – glow
b.Parent = Label
b.Name = “Bevel_Glow”
b.ZIndex = t_zindex + 1
b:ClearAllChildren() – there are probably shadows in it
b.TextColor3 = bevel_glow_colour
b.TextStrokeColor3 = bevel_glow_colour
b.TextTransparency = bevel_glow_transparency
b.TextStrokeTransparency = bevel_glow_transparency

local b2 = b:Clone() -- shadow
b2.Parent = Label
b2.Name = "Bevel_shadow"
b2:ClearAllChildren() -- idk just to make sure
b2.TextColor3 = bevel_shadow_colour
b2.TextStrokeColor3 = bevel_shadow_colour
b2.TextTransparency = bevel_shadow_transparency
b2.TextStrokeTransparency = bevel_shadow_transparency

if bevel_direction == "bottom" then -- position the bevel
	b.Position = UDim2.new(0,bevel_distance,0,0)
	b2.Position = UDim2.new(0,-bevel_distance,0,0)
elseif bevel_direction == "bottom-right" then
	b.Position = UDim2.new(0,bevel_distance,0,bevel_distance)
	b2.Position = UDim2.new(0,-bevel_distance,0,-bevel_distance)
elseif bevel_direction == "bottom-left" then
	b.Position = UDim2.new(0,bevel_distance,0,-bevel_distance)
	b2.Position = UDim2.new(0,-bevel_distance,0,bevel_distance)
elseif bevel_direction == "top" then
	b.Position = UDim2.new(0,bevel_distance,0,0)
	b2.Position = UDim2.new(0,-bevel_distance,0,0)
elseif bevel_direction == "top-right" then
	b.Position = UDim2.new(0,bevel_distance,0,bevel_distance)
	b2.Position = UDim2.new(0,-bevel_distance,0,-bevel_distance)
elseif bevel_direction == "top-left" then
	b.Position = UDim2.new(0,-bevel_distance,0,-bevel_distance)
	b2.Position = UDim2.new(0,bevel_distance,0,bevel_distance)
elseif bevel_direction == "left" then
	b.Position = UDim2.new(0,-bevel_distance,0,0)
	b2.Position = UDim2.new(0,bevel_distance,0,0)
elseif bevel_direction == "right" then
	b.Position = UDim2.new(0,bevel_distance,0,0)
	b2.Position = UDim2.new(0,-bevel_distance,0,0)
end

end[/code]
For now, it is you have to have it selected, but you can change the first line to direct it to the desired place.

2 Likes

This is awesome!

1 Like