- Home /
How do you prevent in game UI from overlapping main game objects
Take for example Unity's document about UI scaling: UI for multi resolution
now if this buttons are available while playing game, how do I prevent this buttons from overlapping on main character for example? I know I can anchor it to the corner and scale it, but can I somehow ensure that it won't overlap my main character, no matter resolution/aspect ratio?
do you want the button to scale so it is not touching the object? or just to be renderer behind?
I want want to ensure it doesn't touch object, but stays visible. Like for example if I'm making tetris clone, I have grid in world space, and I have UI buttons on canvas, one UI button is placed on the left of the grid. Now if I test it at 1080/1940 it looks fine, ui buttons doesn't overlap on my grid, let's say I can also anchor it to the screens left side for example and add canvas scaler, now UI buttons will scale based on pixels and game view will scale width to match with current aspect ratio, now if screen is narrow, button will get closer to grid, and if screen is extremely narrow than button will overlap my grid, so how do I make sure that doesn't happen? Generally there seems to be no colleration between UI and world space, almost all games have UI in there game but if you can't define how UI related to world space game objects I'm not sure how anyone makes sure that everything works fine.
i think the easiest solution for you is to set your canvas in world space too, and remove the canvas scaler component. so that the canvbas always stays the same world space position as your elements. you can later repositionate the camera or change the ortographic size of the camera for the camera (for example) always have the same witdh in all resolutions. take into account your camera height will be twice your camera.ortographic size, so if you want to always stay the same height in all resolutions is a simple calculation.
Is your game 2d or 3d? Your canvas is worldspace, cameraspace or overlay?
One thing you could do is to use a collider and OnTriggerStay () or OnTriggerStay2D(), move the button or scale it down.
it's 2d. Canvas is in it's default state, that's cameraspace I believe.