@Tiffblocks (Tiffblocks) posted a new topic, subject "UIStroke - Studio Beta (UPDATE: re-enabled)". It read: ## What is UIStroke? **UIStroke** is a new instance that can be parented to other GuiObjects to apply an outline around them. You can think of it like a more customizable version of the existing BorderColor3 and TextStrokeColor3 APIs available today. Key features of the new UIStroke include: * Add a stroke to text or UI object borders * Adjust the color and thickness of the stroke outline * Change the transparency independently from the text or UI object * Choose the corner style of the stroke including Round (default), Bevel and Miter * Add a gradient to the stroke (using the UIGradient component) * Full support for adding a stroke using rich text tags ## How do I use it? First, you must enable the UIStroke beta feature in studio. Enable the Beta Feature To enable the beta feature: * Go to **File** \- **Beta Features** in studio * Check the box before **UIStroke Beta** * Restart studio Next, parent the UIStroke to the UI object you would like to add the stroke to and adjust the properties. * **Color** : Color of the stroke * **Thickness** : Thickness of the stroke * **Transparency** : Transparency of the stroke * **LineJoinMode** : Change the corner style (Round - default, Bevel, Miter) * **ApplyStrokeMode** : Only needed when applying stroke to the border of a text object instead of the text Alternatively, you can add rich text tags to any text, if you would like to use the stroke on specific words within a string. ## Rich Text With this beta enabled, you will also be able to use the `<stroke>` Rich Text tag. The following properties can be set within a single `<stroke>` tag: Property | Default | Description ---|---|--- color | `rgb(0, 0, 0)` | Controls the color. joins | `round` | Can be set to **round** , **bevel** , or **miter**. thickness | `1.0` | Controls the thickness. transparency | `0.0` | Controls transparency. You can combine the tags like this: [code] The <font color="#985707"> <stroke color="#f5af09" thickness="5"> dog </stroke> </font> is happy. [/code] image1295×290 21.2 KB ## Text and UI Borders UIStroke can operate in two different ways. When parented to a text object, it applies to the text's outline, and when parented to other GuiObjects it applies to the UI border. This behavior can be overridden using the _ApplyStrokeMode_ property, which allows you to apply the stroke to the border of a text object, instead of the text itself. image1156×777 49.1 KB ## Transparency The _Transparency_ property of UIStroke is independent from the BackgroundTransparency or TextTransparency of the parent object. This allows you to render text and borders that are “hollow” - consisting of only an outline. image900×398 30.7 KB ## Corner Style There's also an extra property, _LineJoinMode_ , which lets you control how corners are interpreted. It has three values, **Round** , **Bevel** , and **Miter**. image899×719 19.3 KB ## Gradients UIGradient interacts with UIStroke in a special way. The parent object and the UIStroke can both separately have UIGradients parented to them, allowing for interesting effects. image888×316 15.2 KB ## UICorner UIStroke can be also used with objects that have a UICorner instance. image834×523 5.04 KB ## ApplyStrokeMode ApplyStrokeMode is only useful when the UIStroke is parented to a text object. It allows you to decide whether the stroke will be applied to the border, or to the text. By default it's set to Contextual, which will apply to text. It's possible to have two UIStrokes parented, one set to Contextual, one set to Border. When you do this, you can control both the UI border and the text outline using two different sets of properties. image951×372 6.11 KB ## Animation & Performance All of the properties of UIStroke can be smoothly tweened and most of the properties are very efficient to update when tweened. However, you should be careful when tweening the Thickness property when the UIStroke is applied to text. This results in many glyph sizes being rendered and stored each frame. This could cause performance issues or even cause text to start flickering due to running out of space for glyph textures. ## Behavior change to TextStrokeTransparency This feature changes the behavior of TextStrokeTransparency. Previously, strokes were achieved by rendering the same-sized glyph 4 times at different offsets. This is being changed to use the same rendering logic as UIStroke, which only needs to render the glyph once. If you only use a TextStrokeTransparency of 0 or 1, you likely won't notice, but intermediate values like 0.5 may appear more transparent than they used to. Let us know if any of your games are significantly impacted by this. ## Known Issues These are issues you may run into that will be fixed before release. * ~~BillboardGuis that have text with TextScaled enabled and TextStroke enabled have broken rendering.~~ Should be fixed as of March 30th. * There's no way to make Thickness scale with size inside of a BillboardGui with TextScaled enabled. * Semi-transparent stroke lines that overlap, will be seen underneath each other; this is more of a limitation that requires a separate feature, currently working on this for all UI elements (not just stroke lines) So @coefficients (coefficients) replied This topic was automatically opened after 16 minutes. So @7kayoh (7kayoh) replied There is something I am a bit confused with, will the TextStroke tweening eventually cause animation jank? (Frame skipping etc) @Stickpuppet (Puppet) replied When I am far away from this billboard gui is messed up So @incapaz (uep) replied What are the performance implications for excessive use of this? Might go abuse them once on prod. Thanks Then @FriendlyBiscuit (Eric) said Nice! I have a somewhat related question regarding UI[EffectName] objects: **Can we ever expect something akin to a UIBlur or UITransparency object being implemented in the near-ish future?** UIBlur being an effect that blurs world space content behind the GuiBase2d the object is in; and UITransparency being a recursive modifier for all transparency properties of the parent and its descendants. @7kayoh (7kayoh) replied UIBlur is extremely GPU-intensive. It isn't really ideal for low-end device users. I believe they've mentioned that UITransparency will be performance intensive in a thread in the Feedback category, not sure though. To which @Drieziee (Driezie) replied I would love to see roblox adding UIblur in roblox. But I think it will take a long time before they will add it. @Tiffblocks (Tiffblocks) replied This is something we're looking into and understand the desire for, but I can't promise any sort of timeline for when it will happen. After which, @LucasMZ_RBX (lucasmz) added What about trying to optimize it in a way? Maybe if… I don't know; Blurs don't cause much lag, I guess they can use that and then only manage a slower changing frame for the actual UI. I don't know how to explain but um… @LucasMZ_RBX (lucasmz) replied Yas! Perfecto. UITransparency would be personally so useful to me, fading entire UI's in and out is extremely unefficient at the moment. I hope something that does release. After which, @Tiffblocks (Tiffblocks) added Can you provide more information about what's going wrong? So @AWhale_OfATime (QuantIxDev) replied _ **My OCD**_ Anyways, I think this is an amazing update that we all were anticipating to come out! To which @LucasMZ_RBX (lucasmz) replied By the way, I either ask now or never. If I enable the beta, will it work on live games? Then @Tiffblocks (Tiffblocks) said I noticed it too, don't worry. I'm not sure what's causing the rounding error there but I'll look into it. So @csqrl (csqrl) replied It's great to see GUIs getting more love. All the recent updates and improvements are great, and I can't see what's to come next! Are there any plans to expand the UIStroke to support images (and possibly ViewportFrames), so that images with transparent backgrounds (e.g. avatar thumbnails, icons, etc.) can have a border stroke applied to them? UIStroke - Studio Beta (UPDATE: re-enabled) Announcements > This isn't planned for the first version of the feature, but could happen later on. @sozzly (sozzly) replied I'm pretty sure he means this: Then @Tiffblocks (Tiffblocks) said It won't work currently in live games. I'll post an update once it can be enabled everywhere. So @FriendlyBiscuit (Eric) replied I can't foresee how UITransparency would be performance intensive. Currently, I use a workaround when animating (in this case, fading) upwards of 100 individual on-screen elements in a RenderStepped loop using springs. My frame times are virtually non-existent. There is absolutely no way a C-side implementation would be slower. As for UIBlur, it once-again depends on how they implement it. Speculating of course: but if they treated the parent frame as a stencil and simply copied the rendered image from the buffer, cut it to the shape said parent frame, and then applied the blur effect it might not actually be that bad. Again, that is purely speculation (as well as a gross oversimplification) since I personally do not know the internal workflow of Roblox's rendering codebase. Then @Crygen54 (Crygen) said That's actually a really good update, but the text outline in a billboardGui become bigger with the distance, there is something to fix that ? After which, @7kayoh (nanako) added Roblox renders the UI per frame, which means calculation for the clipping, et cetera is done per frame as well. Applying another layer which is UI blurring will increase the stress for the client's device, and will be really intensive in terms of performance if there is a lot of elements (a lot of textlabels behind the blur), or a few viewportframes. Not sure though, that is what I heard while discussing with a dev. After which, @Stickpuppet (Puppet) added Whenever I go a far distance away from a billboard GUI (The nametag in this scenario) the border gets bigger and bigger and you can barely see the text. (note: I didn't enable it on this billboard UI and on my regular UI it stays the same and doesn't have the same issue to my knowledge) After which, @B_Iu (Blu) added This is awesome! I've been waiting for this ever since it was announced. I've noticed when testing that stroke for different characters overlap like this: Also, the UIGradient implementation is very useful as well. However, I'm wondering if we could have a way to do some sort of stroke shadow effect as seen here: image624×624 47.2 KB Personally I think that would be very useful for more modern looking GUI designs, especially if it works on things other than just text. Thank you for another amazing update! So @FriendlyBiscuit (Eric) replied Thanks for the response! I wouldn't expect any guarantees; was mostly just curious to see if these features are even on the table. So @Zued (Zued) replied Billboards are bugged in my game I think because of this. I don't have the UI stroke in them this is just ordinary textlabels. Then @FriendlyBiscuit (Eric) said I would just like to clarify that what I'm requesting is solely a blur effect that affects content in 3D-space. I would never expect Roblox to go through the trouble of blurring 2D content/UI itself. You have no argument from me there - that would run like garbage. @Stickpuppet (Puppet) replied Same thing with me, Happened to a billboard nametag @Tiffblocks (Tiffblocks) replied I can reproduce this locally using a BillboardGui with TextScaled text and TextStroke set. It looks like it only happens while the beta is enabled, I'll look into fixing it. Thanks for the report. Then @kingerman88 (kingerman88) said Question will UI stroke work with images, for creating an outline around an image (not the box, rather the image itself) Then @7kayoh (nanako) said How will you ensure the blur effect won't cause any sort of “Jank” for low-end devices with an integrated GPU, like an Intel HD 5500? Relying on CPU to calculate the blur effect will not be anywhere ideal, considering you have to take an image of the game itself and do the actual calculation to figure out where the blur should be. If you are using UICorner, that will be like 2x the performance overhead from the UICorner itself, along with the performance overhead from the blurring effect. So @acreol (acreol) replied Why would 2D blur run any worse than 3D? To me 2D blur sounds like it would take a similar computation to the 3D blur strategy you propose: just that you have to render a few extra pixels around the edges of frames even if they are occluded to apply the blur @nana_kon Why would a UI Frame based blur effect lag but not the Lighting BlurEffect? So @Tiffblocks (Tiffblocks) replied This isn't planned for the first version of the feature, but could happen later on. After which, @Refactor (Larry) added > How will you ensure the blur effect won't cause any sort of “Jank” for low-end devices with an integrated GPU, like an Intel HD 5500? You're seriously underestimating what a modern day cpu can and cannot handle. If a user is using a low-end device and can't handle said instance maybe it's time we get a proper way to handle graphic settings. You can't punish the developers working to achieve quality because you're using outdated hardware. To which @Drieziee (Driezie) replied I wonder if it's possible to use the UIgradients on a UIstroke. If no, is this going to be added or… @kingerman88 (kingerman88) replied Tiffblocks: > ## Gradients > > UIGradient interacts with UIStroke in a special way. The parent object and the UIStroke can both separately have UIGradients parented to them, allowing for interesting effects. Yeah you will be able to use them. It's in the main post So @FriendlyBiscuit (Eric) replied > Why would 2D blur run any worse than 3D? To me 2D blur sounds like it would take a similar computation to the 3D blur strategy you propose: just that you have to render a few extra pixels around the edges of frames even if they are occluded to apply the blur Gonna be level with you, I wasn't quite all there while typing my original reply (doing 17 things at once - hooray!). You have a completely valid point. > How will you ensure the blur effect won't cause any sort of “Jank” for low-end devices with an integrated GPU, like an Intel HD 5500? Frankly, I'm of the belief that Roblox needs to go through and expose proper graphical settings to the end user so we can stop pandering to devices that are almost a decade old, but that's a different discussion. I've written unoptimized, poorly-managed, software accelerated C# code when I first started programming (over 10 years ago on an intel i3 2nd gen with no GPU) that can apply neat effects to your screen live using a basic GDI capture. It's 2021. Time to catch up. Then @Madden21fan (Madd) said So if they add this will it be combability with plugins like UIDesginLite and Roundify when roundifying the label and so on? Then @fivefactor (factor) said You can partially accomplish this with a UIGradient. Setting the upper color to a lighter shade will give you this effect. @Naa_boom (Naaboom) replied Excited for the update! I've noticed that some of the strokes overlap with each other though So @Kamlemyar (Kamlemyar) replied Are we ever going to have triangle GUIs? And are were ever going to be able to union GUIs one day? After which, @ghidras (popbob) added A lot of people don't know how significant this is for UI Designers. At last, we can finally have strokes on Rounded UI. A feature that has been needed since the first time UICorner came out. I'm glad that we don't need to use 2 Rounded UI's to achieve this. Also, more different kinds of borders? This'll be fun to play around with. Beautiful update for designers. Then @Rototally (Michael) said These are good points, thanks for the feedback. * The transparency overlap is a known issue and is actually a separate feature we are working on, for all UI systems * Drop Shadows is also a separate feature that we have plans to add down the road @Rototally (Michael) replied Tiffblocks started by working on the stroke for the text (which is actually a harder problem to solve) and then realized that we can apply this to UI borders as well so we expanded the scope of the feature. Glad you like it! Then @Sensei_Developer (Sensei) said I am opening Roblox studio. **RIGHT NOW.** As a UI designer, this is AWESOME! This will allow for MUCH more flexibility in my UI, without having to do funny work-arounds. (Oh and no photoshop needed ) P.S: Please add UI blurring To which @LocalWE (Willi) replied This is such a great update, and I can't wait to start experimenting with it! I have 2 questions though: 1. Will BorderColor3, BorderMode, and BorderSizePixel be deprecated? 2. Will TextStrokeColor3 and TextStrokeTransparency be deprecated? Edit: It seems we have been really good updates in 2021! Good job Roblox! Then @Tiffblocks (Tiffblocks) said They will not be deprecated. UIStroke just offers additional controls when needed. Then @Edwi_P (EdwiP) said Hollow text is by far the best thing ever, but I still have one question (more related to rich text): * Any plan on changing the transpareny in rich text? Basically it's like format below: [code] <font transparency="0.5">Ghost</font> text [/code] Anyways, this is UI designers' best day! Then @dukzae (dukzae) said Will there be an option to apply an offset? This could be useful for dropshadows. So @dukzae (dukzae) replied I believe what he means is, if there will be a way to change the transparency of text with richtext. He gave an example of how he would have envisioned it. So @Rototally (Michael) replied Reasonable request, thank you for the feedback. After which, @Fire540Games (FireForge) added UIBlur could be graphics quality/hardware dependant, like other effects are. On a feature request, a Roblox engineer noted that disabling blur could make text unreadable in some cases. My solution to that is to add a property that represents whether the blur is active, and developers could connect a GetPropertyChangedSignal to it and update the BackgroundTransparency of the object (transparency = 0 if not active, 1, 0.5, etc. if active), essentially making the UI solid if the effect isn't rendering. That would solve that problem, while still allowing UIBlur to be added. About UITransparency, I'm not sure how it would be performance intensive because transparency already exists for UI objects. It might actually improve performance for animations because you could use just one tween for transparency instead of one for every single object. wow that was a lot of writing Also, could UIStroke.Size be changed to a UDim, like UICorner has? I mainly use Scale, and UIStroke size being Offset only means things will look different on different screen sizes. After which, @kenami (kenami) added This is a issue that was already pointed out _(note : it seems i can no longer post .GIF in the devforum)_ But i'm surprised that it doesn't own the same parameters as Corner, which possess a UDim type of value instead of a Number **UICorner** **UIStroke** To which @Y35X (Maxatal) replied Ah, oh gosh, finally! I've had to make custom images for my GUI all this time. I wanted a border surrounding a semi-transparent rectangle with UICorners enabled, but what was available earlier just couldn't do that, but this is amazing! No more photoshop for me. @111mph (mph) replied So many uses I can think of. Soon photoshop will become unnecessary for proper gui development. Keep up the great work! So @CyroStorms (snake_case) replied ROBLOX… I… …I can't thank you guys enough. This changes everything. Everything I've had to do in order to get a rounded border around my UI frames (with no background)… Gone, all gone. Good riddance. This makes navigation in my UIs, and creating them 5x easier. Thank you. This is the best update ROBLOX has, and ever will release. Praise Andrew's Beard. It has rewarded me for my unyielding loyalty, clearly. (Andrew's beard is the beard I bear, I created a cult around it, lol) Now all I require is a way to customise the border radii of specific corners, because that would be perfect. I would ask nothing more of you. Observe: 3840×2160 1.57 MB Then @HumanMop (HumanMop) said Will it ever be possible to use this instance on a ViewportFrame's render image? Really, I'd like to be able to put one of these in a model in workspace. I've been hoping we'd get something like that for a long time. But, this is a really awesome update, I'm sure it will help us create great UI. I REALLY hope you guys eventually consider adding a ModelOutline instance or something, though! c: @MemezyDev (Memezy) replied Are you able to change the thickness of it unlike TextStroke? To which @KingJoseon (BingBoseon) replied I'm also having that same issue! I have no UIStroke in my gui objects and the stroke keeps getting larger as I zoom out. Any fixes soon? To which @Arikiyo (Alex) replied I was just thinking the other day at how annoying borders were! Nice QoL update Then @polarisprog (polarisprog) said Very cool! Now, we need a UIShadow! To which @Atomic_Dev (Atomic) replied Absolutely fantastic update! I was concerned about the issue with billboards, but apparently someone pointed that out already. It'd be cool if the UIStroke could be tweaked to create a text glow effect. Then @playerofgamed (NotFound) said That is honestly EPIC. If i could i would go right back into studio so i could add this to my games After which, @koziahss (Agent_Invalid) added I am currently in the process of designing a multi-selection for my RTS I think this new addition is perfect for it! Thanks for the brilliant update. To which @Lockefair (Lockefair) replied I needed this for the UI work I'm doing at the moment, thanks! @krissynull (krissynull) replied Can we have the ability to set the thickness to a negative value to have the outline be on the inside rather than the outside? Then @iamtryingtofindname (iamtryingtofindname) said It's about time something like this is added. No more creating your own text borders or duplicating frames to create an outline for a UI corner! After which, @DevJanick (DevJanick) added I don't have the UIStroke enabled in the Beta Feature tab in Studio however still get bugged out outlines. It appears to happen somtimes when I open a game, not always and re-opening fixes it. image837×279 81.5 KB @funnythearpist (funnythearpist) replied That is such an amazing feature! I remember when if you needed to do something like this you'd need to upload a decal to the Roblox website (of course, there was BorderSizePixel and BorderColor3 but it wasn't as customizable as UIStroke). Now we won't even need to do that! After which, @Kostiskat (kostis) added Are you able to apply now a stroke to transparent frames and UICorners? To which @playerofgamed (NotFound) replied Pretty sure you can now but im not 100 percent Then @SirMing (SirMing) said Seems to be reported already, but I'm having the issue as well. The TextStroke (no UIStroke class) gets larger the more I zoom out. Weirdly it does not happen to all my TextLabel with TextStroke, only the BillboardGuis descendant of workspace (I think, no extensive testing has been done). Screenshot sanfordrebecca@example.net×540 111 KB Then @IlyasTawawe (IlyasTawawe) said Am glad that roblox is giving more love to their UI designers Thanks for the beautiful updates! @gillern (gillern) replied Good update! Would like to see different border patterns instead of just solid, eg dashed borders with custom intervals To which @mag (mag) replied Finally! I've been doing so many workarounds for this effect! Then @SillyMeTimbers (Silly) said They did mention they will do it as a separate feature here Then @BuilderBob25620 (BuilderBob) said Will this let us achieve an effect anywhere near something like RichText Highlighting? I'm not really a UI Designer and am more focused on the markup tag part of this update. This feature sounds great but isn't really what I need for the project I'm working on if it can't. While I could implement it into what I'm working on it wouldn't achieve the same effect. So @polarisprog (polarisprog) replied Oh my god I just added this to my game and published it and found out that it's not live yet when I joined the game… Anyways, great update! @intergravitation (Devin) replied Roblox betas do not work in live games. Usually they take a month or two to fully release (that is how I have seen it at least). So @Tiffblocks (Tiffblocks) replied We have noticed that some developers are experiencing issues with the beta, even if they have opted out of it. Because of this, we will be turning the beta feature off for the time being. * Selection boxes don't render after getting a certain distance away. * Issues with UICorner not working in some situations. We got a lot of great feedback and will take this into account as we approach full release of this feature. Then @cloakedyoshi (cloakedyoshi) said I am not sure if anyone has mentioned this yet, but this feature seems to break existing outline behavior with semi-transparent GUI objects. **Beta off, expected behavior:** **Beta on, outline is poof:** Using UIStroke with semi-transparent GUI objects also does not seem to work. It creates the same issue as enabling the beta. Am I using this feature improperly? After which, @SillyMeTimbers (Silly) added Can you also convert the Thickness property from a Number Value to a UDim property like UICorners? After which, @Tiffblocks (Tiffblocks) added I'm going to discuss it with my team but I think this would be a good change to make. This or similar functionality is needed to support BillboardGuis well. @Y35X (Maxatal) replied I've noticed that because of this, UIStrokes do not appear in-game on the client, but they do in studio still. Will we still be able to work on our projects with UIStrokes in studio for the time being, or will they be disabled completely? @Tiffblocks (Tiffblocks) replied Unfortunately for now it won't be possible to use. You can still insert the objects, but they won't render anymore. @funnyfunns (funnyfunns) replied It will be nice if they added CSS inside of Studio. They should make a script that only supports CSS and goes inside of UI's. It will be nice if they add it. (Sorry if that's what they're adding and I didn't see) The scripts can go like this: [code] .text { FontFamily: "Somehting" -- (Or Enum.FontFamily could be used) } [/code] Something like that will be nice, considering no new scripts have been added. @Reapimus (Reapimus) replied This sounds like a great idea, but it might be better suited for a plugin w/ a module. So @SillyMeTimbers (Silly) replied **Update** I'm still in a studio with it enabled (Haven't closed it yet) and I do have a suggestion Can the UIStrokes get a feature similar to the BorderMode As it currently doesn't support that Although I do enjoy the mobility we have with this new property Can't wait to use it again when it comes back out into beta. To which @funnyfunns (funnyfunns) replied True, but it will be nice if they add a CSS Script that can only run CSS and it will be a great update considering there is only 3 types of scripts in Studio To which @ghidras (popbob) replied Before the beta was eventually taken out of Studio, I was able to make this! I think it looks good, and this shows that UIStroke will be the next step in UI Design. To which @SillyMeTimbers (Silly) replied Lookin fresh. Looks like the real thing, I think. Then @FreezeShock (Freeze) said How did you make that 3D cube inside studio? Or is it an image? So @DabidarZ (Dabidar) replied Everytime I try to do something in Roblox Studio, it's not easy to do. But after I give up doing it, Roblox releases an update to make it easier which gives me enough courage to go back to what I was doing. Is it just me or coincidence? Because I tried to make a plugin to make borders for ui corners and etc but then this happens 2 days later lol? Thank you Roblox for making everything easier, great update choice keep continuing these update. I LOVE EM! So @SillyMeTimbers (Silly) replied Should try and make UIBlur. Can't wait for that's release soon. Then @BackspaceRGB (BackspaceRGB) said The weird triangle issue doesnt happen anymore. Thank you! After which, @Fifkee (Noire) added Is it possible for us to get an in-depth explanation as to why the former happens after it is resolved? I think it'd be a good read; can't come up with a reason why UIStroke would have an impact on selection boxes. * * * funnyfunns: > It will be nice if they added CSS inside of Studio. They should make a script that only supports CSS and goes inside of UI's. It will be nice if they add it. This has been asked ..time …and time .…again. We have quite a few frameworks that support or at least **attempt** to support this functionality - plus, it's quite simple to create yourself once you realize that functions can be called exclusive from their parenthesis (i.e. `someFunction { a = 1; b = 2; c = 3; }`). Anywho, I can't fathom how this would be a good thing to add; the only thing that the addition would provide (to me, at least) is clutter and inconvenience. If you can learn CSS, then by all means you can learn Lua. Just my two cents. To which @SillyMeTimbers (Silly) replied Another thing I have noticed I'm not sure if this is relating to the UICorner issues you had but theres a slight gap between the outline of the mainframe and the UIStroke https://gyazo.com/7df6bfed784f781df64c9c0df7e149f2 @callmehbob (nightbarbie) replied thank you so much for this!!! I will be especially using UIGradients on outlines, and being able to change the transparency of the background separate from the border now helps a lot. maybe sometime, can we get a glowing outline effect like this please? xx cooltext3496644894381011023×137 51.4 KB edit: i havent gotten a chance to mess with this yet, but maybe the transparency effect of the outline might look kinda glowing already? @metatablecatmaid (metatablecat) replied Can we still forcefully enable the beta through FFlags? I remember I had to do this with Plugin Debugging a while back when that got disabled temporarily. To which @Tiffblocks (Tiffblocks) replied Here's the flags you can set locally. Disclaimer: The flags required will change in the future, and this isn't something we generally encourage. Flag JSON [code] { "FFlagEnableUIStroke2": "True", "FFlagGfxGuiRefactor2": "True", "FFlagUIStrokeShaderChanges": "True" } [/code] So @metatablecatmaid (metatablecat) replied picture says it all i guess, thanks for the flags, and yea ik touching them is a bit of a risk lol To which @AndreiMattPonayaDF (andre) replied Wow, I love these new UI updates! Also, you should probably rename the thread to “UIStroke - Off” lol After which, @playerofgamed (NotFound) added Uh so this happened. I was making a UI update to my game Infinite and well… The beta is NOT enabled for me and i haven't touched the flags so uh i wonder where this came from Then @LucasMZ_RBX (lucasmz) said They disabled the beta for now. Then @playerofgamed (NotFound) said Doesnt explain why im able to see a beta feature WITHOUT the beta even being turned on. After which, @LucasMZ_RBX (lucasmz) added You were able to see those way before they were released. They're turned off for now. So @HugeCoolboy2007 (omega) replied You can see the Instance but it doesn't do anything After which, @metatablecatmaid (metatablecat) added Instance Visibility is not controlled by Beta Features (or internally, fflags) This would break files if you turned the feature off and it prevented the instance being loaded. Generally, these flags stop the instance working, not it being accessed by Studio Then @HungryBoy02 (Hungry) said I haven't had time to test this yet, does it work with viewport frames? Are you able to apply the outline to image labels? After which, @BandaidKidd (ThaKidd) added Your able to put outlines to images, but if the image is rounded, the border won't be unfortunately. @CompleteBroken (lyric) replied I have UIStrokes enabled in Studio, but in-game they wont show. Probably because it's disabled for now. Then @intergravitation (Devin) said I am using mod manager to set the flags and I can't seem to set `FFlagUIStrokeShaderChanges` to true. This might just be a mod manager issue or something, I am not good at this stuff lol I just want to try the strokes To which @krissynull (krissynull) replied I run into that issue with Mod Manager use the arrow keys to select `true` then hit `Enter` @metatablecatmaid (metatablecat) replied This issue was fixed in a recently, update your mod manager. Then @deluc_t (Deluct) said Seeing this made my whole day better. Then @intergravitation (Devin) said FilteredStudio: > This issue was fixed in a recently, update your mod manager. I just reinstalled it yesterday but that didn't fix it After which, @IxGamerXL (IxGamerXL) added This can really add some flair to text, and even open up for multi-outlined GUIs and texts, which I really like. Although that, you (the people who develop Roblox) could merge the GUI Outline object into every GUI object's Properties. There would be a new property called “Strokes”, holding a table of dictionaries, and you could create dictionaries via the “Create” button, and delete a value clicking it's red ‘X'. You could also copy the table, so you could paste it in multiple GUI objects with ease. To which @CyroStorms (snake_case) replied When can we expect the beta to be re-enabled? I need this beta to continue to work on my moderation menu. It would be a waste of time to use the workaround I've been using for my other GUIs when this beta is going to be available in the near future. Then @iSpaceRBLX (iSpaceRBLX) said Instances cannot have table values, though. They would need to create a class just for that. I think a separate Instance is easier to manage than that. So @ZINTICK (Valid) replied what is this type of code??? So @vrs2210 (vrs2210) replied I think this type of code of HTML, used for making websites or using richtext in roblox. @D1r_xct (D1r_xct) replied Where do you put the code? Is it in a script inside the UIStroke or is it somewhere else? After which, @CyroStorms (snake_case) added What code are you talking about? The beta is disabled, so the borders won't render. You can still place the UI Stroke object though for compatibility reasons. So @BullfrogBait (BullfrogBait) replied This and RichText are amazing! Roblox UIs are finally moving out of the stone ages. Then @D1r_xct (D1r_xct) said I mean like, to make the HTML code, do you do it in a Script or Local script? Or is that just representing how it will look Then @tnavarts (tnavarts) said All the info you need: Using Rich Text Then @DarkPixlz (Pixlz) said Will we ever be able to add custom fonts? After which, @tacheometrist (tacheometrist) added Well, there's still such crucial features that lack in Roblox's UI. For example, the most you can get with masking is using a _**ScrollingFrame**_ , and rectangular shapes will only go so far if you want your UI to use any kinds of angles. @DXPOHIHIHI (DDX) replied Happy UI designer noises * So @SillyMeTimbers (Silly) replied Hey @Tiffblocks what's our progress report on this? To which @PappaSoupDog (AussieDog) replied This will help alot now with making cool looking GUIS @Tiffblocks (Tiffblocks) replied Beta is available again and should hopefully stick around this time. Most of the known bugs should be resolved, although Scale-based sizing support is still missing. @SillyMeTimbers (Silly) replied Thank you, Can't wait to get my hands on this once again! Then @BuilderityDev (Builderity) said are you sure it literally doesnt even work yes i enabled the beta @Tiffblocks (Tiffblocks) replied You'll need Studio updated to the latest version, which was released this morning. If you go to File → About, it should say version 472. If you're already on that version, then you should only need to restart Studio. @SillyMeTimbers (Silly) replied Restart your studio, It worked just fine on my half. After which, @BuilderityDev (Builderity) added works now, thanks for the help @Stickpuppet (Puppet) replied This is a cool thing, please add this asap when it gets finished I love this feature Then @DevFoyRBX (DevFoyRBX) said This is amazing! Also can't wait for the release date for public games! This is what I done so far; **In-Game** image1908×605 203 KB **In-Studio** image1329×541 132 KB This is a amazing feature I am glad this finally got added into Roblox! Now have to wait until it's in actual games! if anyone knows the release date please let me know! To which @SillyMeTimbers (Silly) replied I've been able to Improve my UI a ton with this new feature, I'm currently In the process of revamping all the UI I have in my game to fit this new property. **Updated Shop | Current Progress** image850×464 39.3 KB **Old Shop** image842×461 55.4 KB image1034×564 66.5 KB Then @RemoDunks (Realmeo) said In the future, is it possible for the thickness property to scale with the size of the Gui object? Then @SillyMeTimbers (Silly) said I had recommended to tiff shortly after it went out of beta that they should convert the number value to a UDim like we have in UICorner. She said she'll talk to her team about it but it may come in a future update. I hope @Slappy_326 (Slappy_326) replied man, add some color to the updated ui it looks dead So @SillyMeTimbers (Silly) replied Area's using the UIStroke will be controlled by the users UIColor that they have set in there settings. It'll have more color in-game So @EGOTISMS (EGOTISMS) replied Can we expect to see an update on the alignment of the stroke? Center, outside, or inside? To which @DevFoyRBX (DevFoyRBX) replied Did this get disabled again? It's not showing in my roblox studio anymore After which, @BuilderBob25620 (BuilderBob) added This has been requested before in 2019. Summarized, they wish to add it in the future but the current performance issues of implementing this effect would not be worth implementing it. Not sure where they are with it yet, but I assume that it's still a no-go. Blur Effects for UI Elements Engine Features > As a Roblox developer, it is currently impossible to be able to blur images (UI related) and to use UI elements that blur anything that is behind it. Elaboration Allow me to elaborate on what I mean. I am asking for two features: Image Blur and UI Blur. I strongly believe UIs need more attention. They need to be able to create things that CSS elements can. Right now, there is no way to blur an image that is part of the UI. [Blur] This is currently not possible. It is also not possible to … If you want to achieve a similar effect though I recommend checking out this response to a post: How would I use a blur with GUI elements? Art Design Support > At the moment with the BlurEffect it is impossible to blur just one region of the screen. Prior to having the blur effect, people were using neon parts which snapped to the camera's view to create a similar effect. It's not It wasn't a perfect blur, but in The Conquerors 3 you can see used to be able to see BrokenBone's lobby looks like it has looked like it had blurred GUI elements. He is was using a Module3D script to lock a neon part to the screen to fill a space. I have personally never use… After which, @BuilderBob25620 (BuilderBob) added Yes, except the problem with that is that once Roblox UI's support more features many people (including me) will have to re-make and rescript their UI's due to their old ones being more complex than they need to be and inferior . Sure, there is backwards-compatibility, but it will likely be faster, simpler, and more efficient to use supported features that accomplish the same thing. But it will still be better, easier, and enable you to accomplish more than you could before! So @BuilderBob25620 (BuilderBob) replied Maybe, but I doubt it. Custom Fonts would not be able to be monitored and therefore not “safe to use” since Roblox is a game sanfordrebecca@example.net. So @BandaidKidd (ThaKidd) replied Roblox could connect roblox studio or the website to a font finder, or they can make a libary section named “Fonts” where you can upload your own custom font. Then @Reselim (Nicole) said Any idea when this is going live? I currently have a game (almost) pending for release that uses it and I don't want to have to go back and use images for everything. Then @JokeTheFool (Joke) said The stroke does not appear when using RichText, I assume this will be fixed over time? Also, will there be a feature in which the stroke scale as UI's scales? @FriendlyBiscuit (Eric) replied Just an FYI: UIStroke.Transparency does NOT update when changing this value in-code. Pretty sure this is a bug. Hope this gets fixed soon, otherwise I cannot animate this object and will be forced to simply not use it. Video: Desktop 2021.04.11 - (464)740-7298 Notes: * I animate my UI using springs - meaning I manually update its Transparency every frame when needed. * Adding on to the above: I do not use TweenService at all in that video and am not sure if this issue occurs with TweenService as well. * This issue occurs with or without the UIGradient child object. ~~\- This issue also occurs even if I clamp the maximum assigned value to 1.~~ **After further investigation, I've determined the exact cause of this issue:** If - for any reason - the Transparency value goes above 1 for even one frame the Transparency will be locked to its original value. No further updates from code will render. This was fixed on my end by changing how I cached relative transparency values and clamping them before assignment. There still appears to be an internal issue of some kind, but at least I can work around it by making extra sure the value never exceeds 1 at any point in time. Then @vievo7 (vievo7) said Yes. this works with a lot of elements no matter what transparency or if it has UICorner. I like it a lot because it works with gradients, it does not appear to work with ImageLabels, i really hope this gets fixed anytime soon @mexual (mex) replied Love this! Just one thing I want to ask, is there a way to change the way the stroke starts from? For example inside, center and outline. Then @ghidras (popbob) said Unfortunately, there is no current way to do this. Perhaps this will be added in the future, but as of right now there is no way to make it go any other direction other than outwards. @Unity_456 (Unity456) replied I hope this releases fully soon, I was able to design several neat GUIs with good borders using this. @1CoaI (Cole) replied Any updates on when the stroke will be back enabled for all users to see? Just had UI made for my up-and-coming project and the strokes really bring the UI design to a whole new level and It would really stink to not have it on our UI during our game launch. @zilibobi (zilibobi) replied I'm making a plugin in roblox's UI style and it needs rounded borders for buttons, UIStroke is really good solution, but I have a question. Will other users see that stroke? I think no, only if they enabled beta feature, but I'm not sure. @SillyMeTimbers (Silly) replied Hey @Tiffblocks, The comment I responded to I'd love for this to be a feature. Its in the default BorderPixel on UIs it'd be a shame not to include it in this. I'm currently working on some UI and It'd be super annoying to try and get it to align properly especially with them not scaling properly in the first place. To which @BackspaceRGB (BackspaceRGB) replied The triangle bug is back again, its a bit different this time though. This time the bug only occurs with UIStroke beta turned on, and the triangles no longer go outside the borders of the buttons: Repro: GuiBug.rbxm (7.0 KB) @ABHI1290 (TresAbhi) replied It would be cool to be able to apply the blur effect to the outline which would act as a drop shadow. 2 birds in one shot? Then @Tiffblocks (Tiffblocks) said Thanks for the repro file, I'm looking into this now. After which, @SillyMeTimbers (Silly) added When should we be expecting a proper scale system? I'm using UIStrokes for my proximity prompts style and it looks weird when it puffs up from a far distance https://gyazo.com/0c015507dad09d18a8d8d0bcf118e8cc @Skylexion (Sky) replied Any update on when this will go live for in-game experiences? To which @Skylexion (Sky) replied This feature should be build into the properties of the element, rather than a constraint. After which, @adcrs (adcontop) added I think it wont cause lag on low end devices as roblox is much cpu based and its client based too. I think your reffering the html background blur css which causes lag.Even if you have a bad cpu your ram and ect will cope up with it.There will be no janky lag etc when this uiblur is implmented. After which, @Dysche (Dysche) added I don't get why people keep saying Roblox runs on the CPU, that's blatantly wrong. The CPU only deals with computation and logic, not rendering and graphical calculations, that's what the GPU is for. Anything you see on the screen, whether it's on a phone or desktop, or console, goes through the GPU and/or is generated on the GPU. Things like blurring in real-time would most likely be done through shaders, which run on the GPU, as that's the most efficient and practical way to do it for moving images. Also, how does it being client-based have any correlation to the point you were trying to make? Then @Dysche (Dysche) said UIBlur and UIMask objects would be cool to have. The UIMask object would allow you to attach a grayscale “stencil” and the object it's parented to would have the transparency of each pixel multiplied by said grayscale stencil. ( _This would work similarly toPhotoshop's layer masks._) The benefit of this over using shapes made in other software such as Photoshop is that it'd be possible to update the mask instead of exporting different images for each use case. A great example of this would be player thumbnails cut in the desired shape during run-time using a mask, something you currently can't do other than placing a frame over the image, which has its own limitations. Engines like Unity and Unreal already support this, and it makes designing more complex UIs a lot easier. After which, @luabarnes (luca) added **BUG** Every time I try to change the thickness of it with a frame and maybe other objects as well studio completely crashes @Ziggy_Dev (Ziggy_Dev) replied Do you know when this could be released? I love making ui designs with ui stroke and I can't wait for this to drop. @Brinker7 (Brinker7) replied I found a bug while working with UIStroke. When you have objects with UIStroke applied to them as descendants of a UIPageLayout, they will create this weird shade artifact when switching pages. The artifact only appears when you've got the UIStroke set to Miter or Border+Rounded. //devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/4X/e/c/0/ec0a2e9e31670df7e043d345ded9782190fa1b2a.mp4 Repro file: uistroke repro.rbxl (37.9 KB) @Tiffblocks (Tiffblocks) replied Thanks for the repro. This already got reported earlier in the thread and I've created a fix which should roll out in the next Studio update. After which, @Skylexion (Sky) added Do you have an prediction on how soon you're planning to release this to non-studio game sessions? Then @Tiffblocks (Tiffblocks) said Unfortunately, it will probably be several weeks at the least. It's currently being blocked by a crash on iOS. To which @Octonions (Octonions) replied @Tiffblocks, any updates on the release date? Then @typechecked (typescript) said It also seems to crash on MacOS. So @wurzq (Daniel) replied Strange problem that I found while using it. To which @IDoLua (CantBeBothered) replied I feverishly await an update with good news, I wanna show off my cool UIStroke/UICorner based outline visualizer to people without needing to give them studio access… Honestly though, this is such an anticipated release but there's been no radio contact since what feels like epoch 1970. @BuildIntoGames (Preston) replied This is one of the only things holding me back right now. Eagerly waiting
{'source': 'discourse', 'url': 'https://devforum.roblox.com/t/uistroke-studio-beta-update-re-enabled/1116289', 'title': 'UIStroke - Studio Beta (UPDATE: re-enabled)', 'views': 34214, 'has_accepted_answer': True, 'word_count': 12191, 'like_count': 1571, 'reply_count': 159, 'participant_count': 153, 'posts': 283, 'tags': '', 'author': '@Tiffblocks (Tiffblocks)', 'participants': '@Tiffblocks (Tiffblocks), @coefficients (coefficients), @7kayoh (7kayoh), @Stickpuppet (Puppet), @incapaz (uep), @FriendlyBiscuit (Eric), @Drieziee (Driezie), @LucasMZ_RBX (lucasmz), @AWhale_OfATime (QuantIxDev), @csqrl (csqrl), @sozzly (sozzly), @Crygen54 (Crygen), @7kayoh (nanako), @B_Iu (Blu), @Zued (Zued), @kingerman88 (kingerman88), @acreol (acreol), @Refactor (Larry), @Madden21fan (Madd), @fivefactor (factor), @Naa_boom (Naaboom), @Kamlemyar (Kamlemyar), @ghidras (popbob), @Rototally (Michael), @Sensei_Developer (Sensei), @LocalWE (Willi), @Edwi_P (EdwiP), @dukzae (dukzae), @Fire540Games (FireForge), @kenami (kenami), @Y35X (Maxatal), @111mph (mph), @CyroStorms (snake_case), @HumanMop (HumanMop), @MemezyDev (Memezy), @KingJoseon (BingBoseon), @Arikiyo (Alex), @polarisprog (polarisprog), @Atomic_Dev (Atomic), @playerofgamed (NotFound), @koziahss (Agent_Invalid), @Lockefair (Lockefair), @krissynull (krissynull), @iamtryingtofindname (iamtryingtofindname), @DevJanick (DevJanick), @funnythearpist (funnythearpist), @Kostiskat (kostis), @SirMing (SirMing), @IlyasTawawe (IlyasTawawe), @gillern (gillern), @mag (mag), @SillyMeTimbers (Silly), @BuilderBob25620 (BuilderBob), @intergravitation (Devin), @cloakedyoshi (cloakedyoshi), @funnyfunns (funnyfunns), @Reapimus (Reapimus), @FreezeShock (Freeze), @DabidarZ (Dabidar), @BackspaceRGB (BackspaceRGB), @Fifkee (Noire), @callmehbob (nightbarbie), @metatablecatmaid (metatablecat), @AndreiMattPonayaDF (andre), @HugeCoolboy2007 (omega), @HungryBoy02 (Hungry), @BandaidKidd (ThaKidd), @CompleteBroken (lyric), @deluc_t (Deluct), @IxGamerXL (IxGamerXL), @iSpaceRBLX (iSpaceRBLX), @ZINTICK (Valid), @vrs2210 (vrs2210), @D1r_xct (D1r_xct), @BullfrogBait (BullfrogBait), @tnavarts (tnavarts), @DarkPixlz (Pixlz), @tacheometrist (tacheometrist), @DXPOHIHIHI (DDX), @PappaSoupDog (AussieDog), @BuilderityDev (Builderity), @DevFoyRBX (DevFoyRBX), @RemoDunks (Realmeo), @Slappy_326 (Slappy_326), @EGOTISMS (EGOTISMS), @Reselim (Nicole), @JokeTheFool (Joke), @vievo7 (vievo7), @mexual (mex), @Unity_456 (Unity456), @1CoaI (Cole), @zilibobi (zilibobi), @ABHI1290 (TresAbhi), @Skylexion (Sky), @adcrs (adcontop), @Dysche (Dysche), @luabarnes (luca), @Ziggy_Dev (Ziggy_Dev), @Brinker7 (Brinker7), @Octonions (Octonions), @typechecked (typescript), @wurzq (Daniel), @IDoLua (CantBeBothered), @BuildIntoGames (Preston), @DokuDako (DokuDako), @ScottFaber (Faber), @steven4547466 (Steven), @Scriptide (Scriptide), @Ben10Tam (tamzino), @imcyff (cyff), @Advanced_N00bYT (Advanced_Noob), @RolexMaster974 (RolexMaster974), @sloss2003 (sloss2003), @foilplays (Foilanium), @svn_05 (san), @headr0ws (headr0ws), @dev_dxniel (dev), @Akridiki (Akridiki), @Starnamics (star), @im_jig (im_jig), @052008cooljp (IAmCoolJP), @CreativSpiral (CreativSpiral), @IdontPlayz343 (Poopyfard), @TheFirepc_TRofical (MrHax), @Evercyan (Cyan), @3rdhoan123 (FutureNoob), @Whizzerbit (Kevan), @kruined (adam), @aIfanius (alf), @Pokemoncraft5290 (Based), @DaarkRB (Daku), @JeffTheProPlays (JeffTheProPlays), @imkalrbx (imkalrbx), @Virvek (Virvek), @zw1ce (zw1), @dingbat567 (train), @MagicalAnteater (Nat), @Hacreey (Hacreey), @iMournn (avery), @seario2020 (TkSea), @eric12095 (eric12095), @LockouDev (LockouDev), @nevagonagivyouuprizy (awaitoween), @Quaaark (wes), @V_ChampionSSR (V_Champion), @RiverCryptz (Kahel), @mebigrouxboy (mebby), @SoCalifornian (Bryce), @MDev_003 (MDev_003), @AlreadyPro (Logan), @NeoBuilds (NeoBuilds), @mohammed1336 (mohammed1336), @EmeraldSlash (Rio), @TheCrypticRunner (Cryptic)', 'image_url': ['https://doy2mn9upadnk.cloudfront.net/uploads/default/optimized/4X/9/1/2/91241883830425b3b0f102ab26f6e9a544f6dbb3_2_1024x229.png'], 'created_at': '2021-03-17T23:59:16.032Z', 'last_posted_at': '2022-08-08T17:48:14.036Z'}