Currently, it is impossible to create an outline of an ImageLabel without creating an outline image for it and pasting it under the original. I find this process very tedious and long.
There’s also the method of duplicating the image, making it black, setting the ZIndex, and make it a few pixels bigger than the original.
This produces 2 problems, one is the outline will be noticably uneven the bigger you make it.
Second, youre only limited to one color, which is black. (unless the image youre outlining is completely white)
With UIStroke, you can make an outline (of any color) for any UIObject, even ViewportFrames if that’s possible. I feel like this would be very helpful to make our UI look more popping and nice. It can also save us time from making outlines from another program and uploading it to roblox.
I support this, as a UI designer and developer who uses funky and images that I need to add strokes or fancy filters onto is very difficult whenever uploading a decal/image onto a ImageLabel / ImageButton and don’t have an option to apply stroke colors and stroke onto an image.
A solution/workaround to this method is to have an external software like PaintNet or Photoshop to apply strokes around an image and then upload it onto Roblox for moderation and a long time to process. I find this solution to be longer and difficult for users who don’t have external softwares/apps to do these fancy stuff for a valuable reason.
v Your solution works well, but it will add more instances and space onto the ScreenGui or the Parent:
Personally, this will be a game-changer for UI elements like ImageLabel and ViewportFrame (Let it be feasible if it is possible) and open up some unique ideas and user experience for popular or small games, I would use this in my games.
If Text elements get to have text strokes, so can ImageLabel and ImageButton. Would help me out me a lot in development if this was added in.
Finally, something in Freature Requests that is actually good
(PS: I know its 3 years old but like the other person said, i’m bumping this so future users can see this)
I mean, you can essentially create this effect by duplicating the image and move it in different directions using a script. But why should we have to do that. Good request
No, thats not what I mean. You can find tutorials for this on other engines. Basically, duplicate an image, don’t scale it, but move it, say, two pixels at an angle of 45 degrees. Repeat this process until you’ve placed an image in 8 directions: 0, 45, 90, 135, 180, 225, 270, 315, 360. This removes the issue of smaller outlines for most use cases. But what I’m saying, is that that is way too much work for an outline.
Here for the ones that stumble across this. I made a quick solution that does what @Mr_Mouseeee explained, aka a bunch of copies around your image. It’s not perfect for all cases but usually works well when there are no sharp edges.
Instructions
Select your ImageLabel, make sure it isn’t affected by UIListLayout/UIGridLayout/UITableLayout.
Change the parameter to your needs in the following script.
Copy the script and paste it in your command line and press enter to run it.
local selected = game:GetService("Selection"):Get()[1]
local precision = 90 -- Put an image every 90 degrees of a circle
local thickness = 2 -- Thickness of the stroke in pixels
local startAngle = 45 -- Not really something I'd change but it does better results at lower numbers imo.
for i = startAngle, startAngle + 360 - precision, precision do
local angle = math.rad(i)
local offset = UDim2.fromOffset(math.sin(angle) * thickness, math.cos(angle) * thickness)
local strokeElement = selected:Clone()
strokeElement.Position = strokeElement.Position + offset
strokeElement.ZIndex = strokeElement.ZIndex - 1
strokeElement.Name = "Stroke"
strokeElement.ImageColor3 = Color3.new(0, 0, 0)
strokeElement.Parent = selected.Parent
end
Here are two examples and their settings:
precision = 90
thickness = 2
-- Creates 4 elements
precision = 10
thickness = 10
-- Creates 36 elements (not ideal for performance)
