How to make responsive UI in Unity?

Hello all

Im doing pause menu UI and I cant do it responsive for all screens (resolutions).

I really can not understand how to make a responsive UI.

Can anyone help me?

 

Go through the UI tutorials. They teach you everything you need to know. It's all about how you choose to lock your UI elements. Well that, and the scaling you apply to the Canvas as a whole.

Grouping them with otherwise empty GameObjects important, too. E.g., you'll very often want a group to stretch with its container, but you'll want individual items (buttons or whatever) to not stretch, but instead shift.

It takes a little practice, but hang in there, and you'll get it!

 

I'm not positive what you mean by "responsive" in the context of the rest of your post, but here is the manual entry for setting up your UI to work with multiple resolutions.

https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

 

Scale with screen size in the link above is the easiest, but the UI will get huge looking at higher resolutions.

 

Only if the higher resolutions still have big pixels. If it's something like a Retina display, the resolution is high but the pixels are tiny.

 

I tried everything but I can not understand it is not working.

This is how it looks on my resolution (1920x1200)



And this is 1024x768

 

Assuming the dark jagged-edge thing on the left is your UI element, then it looks to me like you haven't locked it properly to top and bottom. Of course since you're not showing us the inspector, we can only guess.

Did you go through the UI tutorials?

 

Ok I tried Image just blank without any sprite and it works.

I do not know what is causing this problem.

 

Neither do we. And unless you learn to ask questions better (for example, by posting a screen shot of the Inspector while inspecting the troublesome element), we never will.

 

All right, I'm sorry and I will make sure that future questions are better formulated.

Anyway I fixed it.

 

Glad you got it figured out. Please explain the solution here, for people who run across this thread in the future.

 

Which ones?

Google gave me 1.7 million results for:

Unity UI tutorials

 

Probably in addition to the Multiple resolution UI tutorial/how-to already linked, these maybe? https://unity3d.com/learn/tutorials/s/user-interface-ui

 

What's already linked is NOT a tutorial.

 

Any of these have anything to do with Responsive Design? The words responsive, size and screen do not feature in the list of tutorials.

 

Things I use for responsive UI are:

- Anchors and pivots
- Canvas Scaler
- Aspect Ratio Fitter (especially Fit In Parent)
- In one of my projects, I've also listened to OnRectTransformDimensionsChange message on the canvas object and switched between a topbar and a sidebar, depending on the orientation of the screen (I think this is how you would accomplish truly responsive UI, but setting things up can be a little tedious)

 

Today, going through threads like this one (and the tutorials, and blog posts) I'm noticing a recurring theme with Unity UI questions/answers around Responsive:

Most people in the Unity community seem not to know what "responsive" means in the context of UI's. It's a famous term with specific meaning (you can google "define responsive UI" and Google will give a clear, concise, explanation), it's been all over the web for the last 5+ years (hard to avoid, really!), so this is surprising, and I think it explains a lot of the frustration people have when asking about it: People coming from a web background can't imagine other developers not knowing this term, and so they don't realise they need to explain/define it.

And the links I find that mention it are usually doing the opposite of Responsive, and pretending that Unity supports Responsive (e.g. top-3 google link for me right now is someone who recreated the official Unity UI docs page on "Designing UI for Multiple Resolutions", even down to using the exact same layout examples, and then titled it "Building a Responsive UI" even though it absolutely does not achieve that!).

I know that the Unity devs know what Responsive UI means, so it's disappointing that Unity chose not to add the simple UI features needed in a UI system (that most/all UI systems have) which enable it. Looks like we're still better-off building Unity UI's in HTML and then rendering them through Asset Store HTML plugins, at least for now - it works, and you get decent Responsive etc. (If I find a good asset that covers the missing UI stuff, I'll come back and edit this post).

 

You can request specific features here.

 

It does have a responsive UI. It responds to different screen sizes...

You can get plenty of flexibility by using Horizontal/Vertical groups. Anything inside a vertical group will stack like a div.

You will have to convert horizontal lists to vertical by switching components in code, but you also have to do those conditionals in CSS anyway.

 

Sadly Horizontal/Vertical layout groups are still too buggy for anything complex (don't work correctly with nesting, don't work at all with AspectRatioFitter (tested in Unity 2018.2, 2018.3), don't work correctly with ContentSizeFitter - although they used to back in 2015!, etc).

...but it still wouldn't be Responsive. Responsive doesn't mean "you have a vertical/horizontal layout group". At the very least, you need switchers based on parent dimensions - and Unity's layout groups don't support any of that.

EDIT: unless there's something I've missed in UI that does switching based on dimensions of parent object? The only thing I've seen is the canvas scaler, but that only does half the work needed. If there's something that does this already, that would be great!

 

First of all, this is BS.

What you're describing is not "simple" by any means in a 3D game rendering engine.
It's not even simple in the browser where you can sacrifice more CPU power on rendering the page (since you almost just doing that, nothing else), it's completely different when you're talking about a game engine which has the first and foremost role to power your game.

Second: IDK if you're aware, but UIElements is in the works, the UI team said that they will probably release it at least as a preview for the game engine in 2019. So you're knocking on pretty much open gates. You will have your HTML-based UI.

Also I can see that you're spamming the whole forum with your single problem which you already solved, so I really don't understand what you want to achieve with this.

 

You would have to script the media queries. You could make some switcher components that compare a min/max width of a RectTransform.rect and then turns on/off the vertical/horizontal groups based on the value. Or maybe you could use just one component that references all the pieces and changes whatever you want from one script.

I've rarely seen ContentSizeFitter work as expected. I only use it for boxes with dynamic list items inside.

 

its not spamming, if he is right. even if he is expressing this with frustration.
i can definitely connect to that frustration, even when I found my way of doing responsiveness (for now).
te UIElements does look promising, but we will have to get a stable build from unity to prove this is going to be a production ready solution.
until then, this issue is still valid and still exists. its not simple to build a true responsive design and multi-screen support with unity.

 

Well, those comments were 2 years ago, and things change ... I ended up making an asset that enables most of Responsive Design in UnityUI (see image below - that's with no code, just by setting dropdowns and values in the Inspector), and I'm pretty happy with it.

Doing Responsive in UIElements/UIToolkit is technically possible but still (in my opinion) a lot more effort than it should be / could be - there's bits of CSS/Flexbox that are missing or incomplete. In theory: if Unity implemented CSS/Flexbox fully (completely), and added all the API/SDK calls that should exist, then it would be easy. But for now there's a lot of hoops you have to jump through. For any Responsive work I use my own asset because it's a much cleaner/quicker solution (even though it's not perfect, has its own bugs I'm still fixing, etc).

Here's a screencap of responsive happening directly (NB: this is recorded in-editor so the change isn't as fluid/immediate as it would be in-app/player. Also I've improved the performance a bit since then . But it's been enough for my needs)

 

Hi guys, a bit late to the party, but here's a video summarising how UI can be made adaptive in Unity, first using the Canvas Scaler; and second, by splitting the anchor properly across different devices.