UI fill screen option

[supadupa64]

Do you know of an option to fill the screen with an image, for example the UI?

I thought I had a good UI, but then I started messing with different resolutions and realized it's all messed up!

uibroken.jpg (88.13 KiB) Viewed 1432 times

[bohnstudios]

You could just use a camera and from an actual scene with your jungle and such. For full screen widths, it can be tricky working with a flat image.....basically it needs to be big enough for your maximum screen size. If you go that route, make sure your main image is at least 1920px by 1280px resolution. You should probably go higher than that though just to be on the safe side and to accommodate screen sizes 3 years down the road and such. Basically the same concept commonly used in responsive web development.

[bohnstudios]

Be careful stretching your background images with unity ui....it can make the proportions distorted (ie too tall or too wide than what it's supposed to look like).

I had to spend a lot of time going through and learning the new unity UI in the unity documentation and just playing around with it in a separate project file (to keep from messing up a main project etc). You should be able to adjust this without touching actual dialogue system functionality that is attached to your UI buttons).

[Tony Li]

What @bohnstudios said. You can do this with the UI controls without having to fiddle with Dialogue System Menu-specific components. Inspect the main panel of your canvas. Set the Rect Transform to stretch in both directions. (The icon will be blue arrows up/down and left/right.) Then set the Left/Top/Right/Bottom values to 0, which means the panel will perfectly fill the screen.

Can you make the jungle background an actual 3D scene rendered by a camera? (If it isn't already.) Then you won't have to worry about distortion at different resolutions. And you can add animation to it, such as a fire particle effect on a torch for example, or leaves swaying in the breeze.

Then you'd render the canvas on top of that. You could add a Canvas Scaler component if you want to scale your UI elements up or down based on the current resolution. But I think it might look better without a Canvas Scaler. Instead, keep their normal pixel size, and rely on the Rect Transform anchor options to position them relative to one or more edges of the screen.