Make UI take up 1/4 of screen (take up a corner)

this is probably simple but how

should i scale a UI to take up 1/4 of the screen: top left, top right, bottom left, bottom right and fitting on all devices/screen sizes?
thanks
like this;

Copy these settings:
Frame 1: (Top Left)
Anchor = 0, 0
Position = 0, 0, 0, 0
Size = 0.5, 0, 0.5, 0

Frame 2: (Top Right)
Anchor = 1, 0
Position = 1, 0, 0, 0
Size = 0.5, 0, 0.5, 0

Frame 3: (Bottom Left)
Anchor = 0, 1
Position = 0, 0, 1, 0
Size = 0.5, 0, 0.5, 0

Frame 4: (Bottom right)
Anchor = 1, 1
Position = 1, 0, 1, 0
Size = 0.5, 0, 0.5, 0

That should be it. Hope this helps!

Edit: Thinking about it you could also do this

Positions of all frames = 0.5, 0, 0.5, 0
Size of all frames = 0.5, 0, 0.5, 0

Anchor Points:
Top Left = 1, 1
Top Right = 1, 0
Bottom Left = 1, 0
Bottom Right = 0, 0

7 Likes

i already did

so should i switch to

or can i keep the frames?

That’s completely up to you both should work in the exact same way, I think the only difference would be the way it tweens. The first ones should tween into the corners and the 2nd one should tween into the middle I believe.

1 Like

so if i wanted to do a “zoom in” effect on the images would i use the second method?

Yeah it looks like that, you could also make an invisible frame with the Anchor Points set to 0.5, 0.5 and Position set to 0.5, 0, 0.5, 0 and Size set to 1, 0, 1, 0 and then have the images as the parent of those. That way you only need to tween that one frame instead of all 4. It should be much easier for you!

1 Like