GUI failing to scale to screensize

  1. What do you want to achieve? Keep it simple and clear!
    Implement a custom damage frame boarder that is displayed around the screen no-matter the screen size.
  2. What is the issue? Include screenshots / videos if possible!
    Despite using percentage based values to define the size and position of the Image, It still fails to fill up all the corners of the screen, I did notice when reviewing it against different device types within studio that there’s always a ‘fixed’ percentage/pixels gap which is filled with roblox buttons - It’s as if some roblox script kept pushing the GUI down to make space for itself at the top.
  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
  • I have reviewed several devforum posts around GUI scaling but could not find a similar issue to this
  • tried using UI scaling constraint but it did not help
  • tried changing the position and size of the image during run-time via script which has worked for some mobile devices but not all

This is how I’d like it to look like:


This is the set-up alongside the attributes and parameters:
image
ImageLabel size: {1.15, 0},{11.2, 0}
ImageLabel position: {-0.07, 0},{-0.6, 0}
Frame size: {1, 0},{0.1, 0}
Frame position: {0, 0},{0, 0}

Result during runtime on desktop:

Result during runtime on Samsung Galaxy S7:

due to the thickness of the image I wanted to place some of it outside of the player’s view - just to explain the specifics behind the numbers.

I thought roblox was trying to fit the image on the screen wherever possible - so I’ve tried to set all the scaling to be at 100% which I thought in theory should fit any screen:


Both Frame and ImageLabel size: {1, 0},{1, 0}
Both Frame and ImageLabel position: {0, 0},{0, 0}

Result during runtime on desktop:

Result during runtime on Samsung Galaxy S7:

The only thing I can think of is there’s a roblox script that’s pushing it down. I have disabled CoreGuiType.Health which I hoped was enough to implement a custom boarder, are there any other that need disabling?

1 Like

I think you can use the latter scaling (1, 0, 1, 0) and enable the IgnoreGuiInset property of your ScreenGui which will stop the “CoreScript pushing down” behavior you described.

4 Likes

You can put a blank frame onto the top of the screen in the -Y position like so, that will cover up the gap.
You can either make it any colour you like or make it a texture.


I forgot this was a thing. :sweat_smile:
I just made a whole suggestion on how to put a frame in -Y position.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.