How can i make my ui scale based on different device screens?

So im currently developing a simple game for mobile devices. And im at the final steps, in which one of them is the UI concept, design and implementation. I’m having trouble adjusting the scale based on the screen dimension. For example i might be able to scale it correctly for one dimension but when i switch to another mobile / tablet device that the dimension are larger it gets messy. What i did is , i played a bit with the DPI Curve and it’s settings and just enlarged my background.



My question is : Is this the most optimal way of doing this or is there a better way in which im not aware of? (Note: i have also tried scalebox but it works to some extent)

I’m no expert in the matter, but there’s no such tool available as far as I know. However, I believe the engine does a pretty good job adapting to different resolutions and ratios, and I’m feeling like the thing to work on are containers. You could maybe show some pictures of the distorsions you encounter ?
It might be a particular case if you want the player to allow the rotation of his device (playing horizontal or vertical).

My bad i didn’t explain my issue better. My main problem isn’t about the buttons or text. It’s mainly the image that i have set as a background. When starting the game if the resolution isn’t right you will be able to see the empty level from both the left and right(which in this case is the MainMenu level). So that’s why i made the images larger the avoid that issue.

Is the image set to fill the canvas panel?

No it is not and there is no such option.

So if the image is a direct child of the canvas panel, when you select it, in the details panel on the top there should be a drop down box for “anchor” ctr+shift click the full one and this will fill the canvas panel

Omg I feel like an idiot now that did the trick. Thank you so much though.

1 Like