Fit every screen size
Preview phones, tablets and wide screens, and use anchors so nothing drifts or overlaps.
Players use phones, tablets, laptops and ultrawide monitors. Their screens have different shapes, and phones have notches and rounded corners. Rigonix helps your UI fit all of them.
See your screen on other devices
Click Devices in the toolbar. You see the same screen on an iPhone, an Android phone, an iPad, a laptop, a monitor and an ultrawide monitor, side by side.
If something goes wrong on a device (an element leaves the screen, hides under the notch, or slides on top of another element), it is listed under that device. Click an element in the preview to select it and fix it.
Anchors: where an element sticks
An anchor is the corner, edge or centre an element stays attached to when the screen changes shape.
- A pause button in the top-right corner should stick to the top right.
- A title should stick to the top centre.
- A menu in the middle should stick to the centre.
- A bar across the top can stretch to fill the width.
Select an element and look at Anchor in Properties → Transform.
Auto is on by default: Rigonix picks the anchor from where the element is. Under the picker it tells you what it picked, such as "Follows its position: now top right". Auto is right most of the time.
When to set the anchor yourself
Elements that belong together should share one anchor. If a column of buttons is half anchored to the top and half to the centre, the buttons drift apart on a phone and end up on top of each other.
To fix it, select each button of the column in turn and click the same anchor for all of them (usually the centre). Then check Devices again.
Tip: A card and everything on it (title, buttons) should use the same anchor as the card.
The safe area (notches and rounded corners)
Keep inside the safe area (notches) is on for every element by default, so nothing ends up under a phone's camera notch. Turn it off only for things that should reach the very edge, like a full-screen background or a dark overlay behind a popup.
How the whole screen scales
Click an empty part of the canvas. Under Other screen sizes in the Screen tab:
- Keep width ↔ Keep height: when the device's shape differs from your design, should the UI keep its width, its height, or a balance of both? The middle (a balance) is Unity's default and suits most games.
- Keep UI inside the safe area: the project-wide notch setting.
- Preview on devices opens the device preview.
In Unity
Anchors become Unity anchors and the scaling becomes a Canvas Scaler with the same settings, so your game behaves exactly like the preview.