Hi,
I have a background image for my 2D game but i want to make sure it keeps its aspect ratio when the user changes the browser screen size. Also, i would like it to always fit my full camera view.
Any ideas on how to accomplish this? i have been looking through the documentation but i can’t seem to find anything that helps me with my problem.
Not sure if it will help, but if your canvas is keeping the desired aspect ratio, you could try to make the canvas transparent and use the image as a background-image via CSS. Additionally background-size: contain or cover.
Edit: Realised you are talking about about UI.
Do you want your background image to always cover the screen? You could do this a few ways. The easiest would probably be to use another camera to render the background image only while your main camera renders on top of it.
What do you mean with “Additionally background-size: contain or cover.”?
I’m very used to working with Unity and there i would just tell the image to fill the canvas screen but keep their aspect ratio, so it doesn’t look stretched. In the solution you say, how can i force the canvas to keep the same aspect ratio?
yes, it needs to always cover the screen. the to camera approach sounds a bit much but i will definately try it! thank you for that suggestion. However, i don’t know how to add the two output renders on top of eachother…
Also, are there other approaches too?
Using a second camera would give you the most control on how it’s rendered. It is possible to write your own ‘Keep Aspect’ code for an element on a 2D screen based on the aspect ratio of the web browser if you want to use the UI system for this (you have to work out how to render the 2D screen behind the 3D scene as I can’t remember off the top of my head).
So there is no boolean or some setting in the image component that can force it to keep it’s aspect ratio (not even through script)? since everything else in my game is basically static on screen.
Just some more information about the project: i load images of sport players and i have some kind of “card” that contains the image that i downloaded and his/her name. So i need this aspect ratio for the background (i dont want the player to see behind the background image in the case the player resizes the window) and i also need it for those cards, to make sure the faces are not stretched.
Unfortunately not. You would have to write the logic yourself.
that’s very unfortunate… Is there a way to make sure it will always fit the camera bounds or is that also something you have to write yourself? and if so, how can i check what these bounds are? (i suppose the bounds of the 2D screen that is the parent of the image?)
It might be worth checking to see if this helps.
Thanks! that is indeed helpful.
However, I think, keeping an aspect ratio is a pretty normal thing to ask when developing UI, so that’s why i don’t understand why it isn’t in the editor by default. But i’m sure it has its reasons.