To make a better UI design I had to export it into a graphic design software so I’m now using ImageLabels inside studio. But I ran into a problem while doing so. I set the ScaleType on the ImageLabel to Fit and put a TextButton inside it so the player is able to close it. But that button can’t scale properly.
This is how it should be:
But when I change the resolution:
I already made a post about this a week ago in Art Design Support but no one replied and after more research I came to the conclusion that I think this requires scripting.
If you think that I left out some information then feel free to say so!
3 Likes
ImageLabel has InputBegan and InputEnded events which can detect a mouse click. Would that work for you?
Not 100% because I also have a scrollingframe inside it which does the same thing. But it would fix the closing problem. How do I detect if the mouse is on the “X” though?
ImageLabels and other GUIs have a MouseEnter event.
1 Like
I’m aware of that but that doesn’t detect when you hover on the “X”, it detects anywhere inside the image.
You wrote, " it detects anywhere inside the image". Isn’t “X” a part of the image?
What if you hover anywhere else except the X on the image? The MouseEnter script would still run even when you’re not hovering on the X.
you need to use UIAspectRatioConstraint to make the TextButton same size on all resolution
Edit: There’s also a plugin called AutoScale Lite that is very easy and very simple to use to make your UI same size on all Resolutions, whether its Phone, Tablet, PC, Laptop, etc
Edit2:
UiAspectRatioConstraint have 3 that you can use to determine the size, play around with them for a bit to determine the size of your ImageLabel
on the other hand, AutoScale Lite offers these selections:
“Add Constraint” - Makes your current UI same size when applying “UiAspectRatioConstraint”
“Unit Conversion” - Lets you pick whether to choose the scale or offset of your UI’s Position and Size
“Scale Text” - is for text to scale on all device resolution.
My Most used from this Plugin is:
Add Constraint and the Scale Selection on Unit Conversion
1 Like
Thank you for your help but I’ve already tried using both of what you said before I even created this topic. Maybe I was doing something wrong. If you don’t mind can you also try it?
ui.rbxm (12.4 KB)
ohhh I understand the issue, you need to put UiAspectRatioConstraint aswell to the Image itself, parent it to the image so that the image will change size accordingly.
Normal Screen:
Resized Screen:
1 Like
I’m not sure I understood what you mean. Can you show me what you’ve done in the explorer?
If “UiAspectRatioConstraint” isn’t the answer, MouseEnter and MouseMoved events of ImageLabel provide X and Y coordinates of the position of the mouse pointer. They can be used to determine whether the mouse pointer is within the boundary of the “X” image (i.e., the “X” portion of the ImageLabel)
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.