Add Text Effects to Text UI Elements

At the moment while editing TextLabel, TextButton, or TextBox, we always or might need some sort of effect like a shadow or echo to make it touchy with what you’re making with UI inside studio.

Having to use one or more Text Elements is a struggle for most UI designers and me because you waste some space and time adjusting the right position or use Photoshop or other external software to create effects onto Text elements. If we did have such text effects to use and customize while working on UI elements like I listed and said above, then it would save us time not going onto another app or website to make our text effects there with custom text as well.

Also at the moment, the only possible way to create these effects is by duplicating the TextLabel/Frame, then making the transparency almost invisible and changing it to a different color which includes the double or triple amount of elements into something that could be avoidable if there was some sort of feature like this.

^ Example shown below of a TextLabel with a shadow currently in studio:

Image:

Some examples/ideas of what could be added to Text properties:

Shadow:

Lift:

Neon:

Echo

Splice

Hollow:

Property behaviors for each one:

Shadow:
  • Offset
  • Blur
  • Transparency
  • Color
Lift:
  • Offset
  • Intensity
  • Color
Hollow:
  • Thickness
  • Offset
  • Transparency
  • Color
Splice
  • Offset
  • Transparency
  • Direction
  • Color
Echo:
  • Offset
  • Direction
  • Color
Neon:
  • Intensity
  • Color

If Roblox could able to apply this to TextLabel and into the Engine, it would improve my development experience because it can save me time and cut down when working with custom text and buttons with effects onto them which can be beneficial to most developers and don’t have to waste time making a new TextLabel through a script like:

local text = Instance.new("TextLabel")
local shadow = Instance.new("TextLabel")

text.TextColor3 = Color3.new(255, 255, 0)
text.Font = "GothamBlack"
text.TextScaled = true
text.Size = UDim2.new(0.5, 0, 0.5, 0)

shadow.TextColor3 = Color3.new(33, 33, 33)
shadow.Font = "GothamBlack"
shadow.TextTransparency = 0.3
shadow.TextScaled = true
shadow.Size = UDim2.new(0.5, 0, 0.5, 0)

^ Just a rough example when it comes to scripting.

Or maybe duplicating TextLabel inside the ScreenGui or Frame:

Image:

Some topics that could be similar to what I’m requesting like text shadows:

Topics:

Improvements to UI for borders, shadows and fonts

Drop-Shadow effect for UI elements

So, thoughts on this?

33 Likes

I know this isn’t really offering what you asked, but Rich Text does improve many of the failures of basic Text Gui instances. You can find it here: RichText [TextScaled Support Added]

Also, at RDC they announced some new fonts which offer a wider variety of UI design styles. I do think they should add properties for text shadows and maybe a constraint like UIBlur which blurs an ImageLabel, ImageButton, TextLabel, or TextButton.

I also think Roblox should invest in creating a flat icon catalog or something where UI developers can sell Roblox icons or use free ones made by Roblox.

2 Likes

I know that RichText has a lot of improvements and changes to bold and colored text in the middle of a sentence, but my feature isn’t about text or fonts, it’s about effects like shadows for a TextLabel and a change to Text UI Elements.

It’s pretty much a feature request to open up a variety of text behaviors, neatness, and customization like the points that I’ve stated above.

Not a bad idea, but it’s debatable to many UI designers out there since they can grab icons from other websites or possibly scams?

1 Like

Yeh I just don’t have a lot of faith they will put this much instrumentation behind text :frowning:

Well, a lot of developers pay people lots to make custom icons or they do not abide by the content creator’s licensing agreement, so having a marketplace for Roblox art would help facilitate legitimate transactions maybe.

2 Likes

are you open to sharing the coding you did to make these example text labels?

1 Like

He didn’t code to create the labels. He used an external software.

2 Likes