I want to create a red border around the screen when the game is paused, like a lot of games currently do.
The problem is, when creating a frame and setting the BackgroundTransparency to 1, the borders become transparent too…
How could I draw borders around the screen?
9 Likes
You could use an image label, and just make the border an image on it.
What? Are you suggesting to upload a PNG image?
An image label. You upload a decal to roblox or upload it from within studio. Put a border image on the image label, and put that on the frame, or just use an image label as a frame. Make sure the dimensions if the image are correct. example:
1 Like
Just to clarify, so, there is no way to create a transparent frame with non-transparent borders, right?
Also, as I can understand from your suggestion, I need to create a large TRANSPARENT PNG image, upload it and use it with borders, correct?
no, not that i know of.
and no, you can change the transparency and color of the frame, but the borders be a seperate image on the frame. makes it more customizable in studio.
1 Like
Sorry, but I’m not getting it.
Changing the transparency of the ImageLabel makes its borders transparent too:
PS: I’ll move this topic to #help-and-feedback:art-design-support, since there is no code here.
I created a workaround, using 4 inner frames with 3 pixels size each: top, down, left, and right:
Here the result:
For those interested, here is the structure: Borders.rbxl (21.9 KB)
PS: I had to create an Position.Y.Offset = -36 and Size.Y.Offset = 36 in FramePause to compensate for the Gui Inset while the game is running.
4 Likes
Like fungibot said, you can go to Create on the ROBLOX website and create a decal of a border. Make sure the image is PNG.
Then put it as an imagelabel into textlabel an make background transparency to 1. and then it should border the textlabel if you set the side to 1,0,1,0.
I think thats the only way.
1 Like
I wrote a piece of code that builds a rectangular border around a gui, feel free to use it.
local function create_border(gui, size, border_color)
local border_left = Instance.new("Frame")
local border_right = Instance.new("Frame")
local border_up = Instance.new("Frame")
local border_down = Instance.new("Frame")
local borders = {border_left, border_right, border_up, border_down}
for _, border in pairs(borders) do
border.BorderSizePixel = size
border.BorderColor3 = border_color
border.BorderMode = Enum.BorderMode.Middle
border.Size = UDim2.new(0, size, 0, size)
border.Parent = gui
end
-- Left right
borders[1].AnchorPoint = Vector2.new(0, .5)
borders[2].AnchorPoint = Vector2.new(0, .5)
borders[1].Size = UDim2.new(0, size, 1, size * 2)
borders[2].Size = UDim2.new(0, size, 1, size * 2)
borders[1].Position = UDim2.new(0, -size, .5, 0)
borders[2].Position = UDim2.new(1, 0, .5, 0)
-- Up down
borders[3].AnchorPoint = Vector2.new(.5, 0)
borders[4].AnchorPoint = Vector2.new(.5, 0)
borders[3].Size = UDim2.new(1, 0, 0, size)
borders[4].Size = UDim2.new(1, 0, 0, size)
borders[3].Position = UDim2.new(.5, 0, 0, -size)
borders[4].Position = UDim2.new(.5, 0, 1, 0)
end
Before:
After:
4 Likes
Hi there, ROBLOX has made something called “UIStroke.” This allows you to do it quickly without having to make 4 frames, and you can change properties in the appearance area to change how you want the border to be.
Why am I posting here just now especially when it’s dead?
I searched on Google to fix the same issue and others will too. If they look in these forums, they can find the easiest way which is this one that I am talking about.
17 Likes
Thanks for your tip.
In fact, currently with UIStroke is possible to have a transparent frame with borders.
So, to have this effect (with for example a border with 3 pixels), create a frame with:
- BackgroundTransparency = 1
- Postion = {0, 3}, {0, 3}
- Size = {1, -6},{1, -6}
- Insert a UIStroke as child of this frame, with Thickness = 3, and LineJoinMode = Miter
1 Like