Getting your roblox studio billboard gui scaling right is honestly one of the most annoying parts of UI design when you're first starting out. You build this beautiful overhead name tag or a cool interaction prompt, and it looks perfect while you're standing right in front of it in the editor. But then you hit play, walk five studs back, and suddenly the UI is the size of a skyscraper or so small you need a magnifying glass to read it. It's frustrating, but it's a rite of passage for every developer on the platform.
The good news is that it's not actually a bug; it's just how the engine handles coordinate systems. If you've been struggling with UI that refuses to stay a consistent size relative to the world, you're likely stuck in the "Offset" trap. Let's break down exactly how to fix this so your game looks professional and your players don't have to squint.
Offset vs. Scale: Why Your UI Looks Weird
When you look at the Size property of any GUI object in Roblox, you'll see four numbers arranged like this: {0, 100}, {0, 50}. Those numbers are grouped into pairs for the X (horizontal) and Y (vertical) axes. The first number in each pair is the Scale, and the second is the Offset.
If you're using Offset—those second numbers—you're telling Roblox to make the UI a specific number of pixels wide. If you set it to 200 pixels, it will always be 200 pixels on the player's screen, regardless of how far away their character is from the object. This is why the UI seems to "grow" as you move away; it's staying the same size on your monitor while the 3D world behind it is shrinking due to perspective.
To fix your roblox studio billboard gui scaling, you need to lean heavily on the Scale values. Scale is a percentage based on the size of the BillboardGUI container itself. When you use Scale, the UI element understands its relationship with the 3D space. It tells the engine, "Hey, I should occupy this much of the billboard's area," which helps it stay proportional as the distance changes.
Setting Up the BillboardGUI Correctly
Before you even touch the buttons or text labels inside, you have to look at the BillboardGUI object itself. This is the "canvas" that holds everything else.
First off, check the Size property of the BillboardGUI. A lot of beginners leave this at the default, but if you want a name tag that stays roughly the size of a player's head, you might set it to something like {4, 0}, {1, 0}. This means it's 4 studs wide and 1 stud tall in the 3D world. By using studs for the BillboardGUI size, you're anchoring it to the physical dimensions of your game world.
Here's a trick: if you want the GUI to stay the exact same size on the screen no matter the distance (like a "constant size" icon), you actually want to use Offset for the BillboardGUI size. But for 90% of use cases—like health bars, names, or shop icons—you want it to scale.
The Secret to Text and Images
Once your main container is sorted, you've got to handle the stuff inside it. If you have a TextLabel inside your BillboardGUI, you absolutely must use Scale for its size. Set the TextLabel's size to {1, 0}, {1, 0} so it fills up the entire BillboardGUI area.
But wait, the text still looks crunchy or doesn't resize? That's where TextScaled comes in. In the properties of your TextLabel, find the checkbox for TextScaled and click it. This tells Roblox to ignore the "TextSize" number and just make the font as big as it possibly can be without clipping outside the box.
If you don't do this, you might have a perfectly scaled box, but the text inside will stay at 14pt font, making it impossible to see from a distance. TextScaled is your best friend here.
Handling the Distance Problem
Even with perfect scaling, a BillboardGUI can become a visual mess if there are fifty of them on the screen at once. Imagine a lobby full of players and every single one has a massive "Level 100 Mega Boss" tag floating over their head. It's a nightmare.
This is where the MaxDistance property is a literal life-saver. By default, it's set to 0, which means "infinite." Don't leave it like that. Set it to something reasonable, like 50 or 100 studs. This way, the UI simply disappears when the player moves far enough away, keeping the screen clean and saving a tiny bit of rendering power.
You can also play with the DistanceLowerLimit and DistanceUpperLimit if you're using the "Size" property to influence how things disappear, but usually, a simple MaxDistance cap does the trick for most projects.
Using the AlwaysOnTop Property
Sometimes your billboard GUI will clip through walls or get hidden behind a player's hat. If you're making an interaction prompt (like a "Press E to Open" sign), you probably want the player to see it even if a thin part is blocking the view.
Switching on AlwaysOnTop will force the GUI to render over everything else in the 3D view. Just be careful with this. If you turn this on for every single name tag in a crowded game, it can get confusing because players will see tags through solid walls, making it hard to tell where anyone actually is.
Dealing with the "Jitters" and Blurry UI
One thing that drives people crazy with roblox studio billboard gui scaling is when the UI looks blurry or "jitters" when the camera moves. This usually happens when the Scale is set to a very small decimal or when the resolution of the BillboardGUI is too low.
Check the LightInfluence property too. If it's set to 1, your UI will get dark when it's in a shadow. Usually, for UI, you want this at 0 so it stays bright and readable regardless of the game's lighting. It makes the UI "pop" and look like a digital overlay rather than a physical piece of paper floating in the wind.
Positioning with ExtentsOffset
Don't move your GUI by manually dragging the parts around if you can avoid it. If you want a name tag to float exactly above a player's head, use the ExtentsOffset or StudsOffset properties.
ExtentsOffset is great because it calculates the offset based on the size of the object it's attached to (the Adornee). If you set the Y-value of ExtentsOffset to 0.5, it'll hover just above the top of the head, no matter how tall the character's avatar is. This is much cleaner than trying to guess a specific stud count.
A Quick Workflow for Perfect Scaling
If you're feeling overwhelmed, just follow this simple checklist next time you're in Studio:
- Insert your BillboardGUI into a Part or the StarterGui (and set its Adornee).
- Set the BillboardGUI Size using the first numbers (Scale) to define its stud size in the world.
- Add a Frame or TextLabel inside.
- Set that child's Size to
{1, 0}, {1, 0}so it fills the parent. - Turn on TextScaled for labels or use Scale for any ImageButtons.
- Adjust MaxDistance so it doesn't clutter the map.
- Set LightInfluence to 0 so it's always readable.
Wrapping It Up
Mastering roblox studio billboard gui scaling is mostly about breaking the habit of using pixels (Offset) and embracing percentages (Scale). Once you make that mental switch, your UI will suddenly feel like it actually belongs in your game world rather than just being plastered on top of the screen.
It takes a little bit of trial and error to get the stud sizes feeling "right"—sometimes 4 studs wide feels huge, sometimes it feels tiny—but once you find your sweet spot, your games will look a whole lot more polished. Just remember: if it looks weird when you move, check your Scale values! It's almost always the culprit. Happy building!