As a developer, i always wonder how people can make such things when i play their game. Arsenal is one of them. Looking at their buttons, they have a white outline and a colored background which is transparent. The question im asking is how do they do it? I fiddled with Roundify as much as i could but to no avail. Any help or tips would be appreciated! By the way, I have no idea how Slice scaling works.
14 Likes
They use roundify. It creates round GUI’s for your game. The outline is simple, just change the outline size and colour. The transparency can be set by changing the transparency level to something like 0.2.
I dont know why roundify hasnt worked for you though.
3 Likes
It looks like something simple, they probably made the corners with roundify, as you stated. You just need practice with it. Check this out for more info!
It may help!
10 Likes
1 Like
Maybe, they use an external program, like Affinity Designer or Adobe XD
1 Like
Most better UI designs incorporate graphic art through image GuiObjects, frames, and UI constraints. All of these GuiObjects are made interactive or non-static via programmatic client-side animations like tweening between GuiObject properties. Once you learn how to make basic UI, you can improve by complicating your hierarchies to include arbitrary design components like image outlines, custom fonts, iconography, etc. Your UI will also improve if you learn Roblox Lua API too. You got this, just study some of the UI design tutorials the others put above and then keep making stuff—practice makes perfect! 
They have used roundify for this feature.
If you would like some help with something like this
I don’t mind helping.
They definitely used the roundify plugin, but I think they have made their own image icons like the twitter icon, or have just copied and pasted some image icons such as the twitter icon…
Hey! I seem to be able to replicate their system! Heres how i did it:
So after studying roundifys system, the image they use turns out to be a circle with a small resolution, and they made it square using Slice scaling. So i did this myself but i only made a circle outline. So its like roundify but the square isnt filled, making it an outline.
So for example, i made a circle outline with the resolution being 12x12, and the circle size being 2 pixels (in paint. net). Now make a rounded square with roundify, the size being the resolution of the circle outline (in this case its 12). Next I inserted an ImageLabel in the rounded square, scale it to Udim2.new(1,0,1,0) and set the image to the circle outline i made. After that i set the ScaleType to Slice and set all 4 slice center values to the size of my circle outline divided by 2 (so it would be 6). After that the image seem to take shape, i set the SliceScale property to how big the circle is (which is 2). After that, going back to the Size property, i changed the offset to the number of the SliceScale. And for the finishing touches, i set the AnchorPoint to 0.5,0.5 and change the position to Udim2.new(0.5,0,0.5,0)
And after all that, I made this!
Thank you for helping!
3 Likes
Everything except the icons (which even then can just be found online) can be made with Roblox Studio, and quite quickly might I add.
I figured it out in another way. Here’s how:
So I made a text button, and then I added a UICorner and placed it into the text button, and I added a UIStroke and changed the ApplyStrokeMode to Border, if you didn’t understand what I said (Because it’s hard to explain it for me) then here’s a video of me doing it:
At the time of the post @Bili_Billie made this technology was not available, I really see no need for you to bump this.
Oh, I didn’t know. Sorry I guess.