I need some advice regarding the UI Menu in my game. So, I've created several canvases on a scene and set it all to world space. The idea is that the camera should move around the scene with several canvases representing different menu sections (main, options, new game, etc.). Now I've started to adjust the elements according to the resolution set in settings.
Now it does the following: when the game starts it looks for the current resolution and scales all objects according to this resolution by scale ratio (currentResolution/defaultResolution). And it scales fine and looks fine as well.
The problem is with the camera. The idea is to set the camera to focus on the centre of a canvas and hold a certain distance by Z. What I did is I've taken the canvas height (i.e. 720 as in currentResolution (1280x720)) and devided it by two and set Z position to be 1280/2 as well it as Y position of the mainCamera.
The problem is with Z position. It works well with 16:9 aspect ratio but when I change it to, say, 5:4 this Screen.width/2 thing doesn't work correctly. The camera gets too close to the canvas and cuts out some elements and other parts of the UI. How do I set the camera Z position right for every resolution? Or is my approach entirely incorrect?
P.S. I've watched this Unity video on adjustung UI menu to all resolutions but this technique doesn't apply in my case since I have a wrold space menu which is a bit different. The only problem now is this Z position of the camera.
Related
guys! We are developing a 2D game for desktop and mobile. It is grid-based although we decided not to use tilemaps and, instead, create our own grid by code, because we need to program different actions and interactions for each tile. The game UI is on a canvas and that part resizes as we expected. Also, everything already works quite well "functionality-wise" on both, mobile and desktop. The problem is that, as we made the main grid and objects as sprites, it works great on any 16:9 screen, but some of the screen space gets cut when it runs on any wider screen.
How can we resize the whole sprite scene depending on screen size? I guess it has more to do with the camera than with the actual objects but we don´t have a clear clue. We already looked into "pixel-perfect camera" and, although we haven´t dug too deeply into it, it looks like it´s aimed more towards preserving artwork at full resolution and not so much at what we need.
This one is from the PC where we are developing the game and where it looks as it should:
And this one is from a PC with a wider screen (16:10) where the scene gets cropped from the sides (In the previous picture I marked in orange/yellow the columns that are lost in this one)
I guess there should be a way to stretch all sprites to fit the screen, but I think the best way to go would be to get empty horizontal or vertical bars, on top and bottom or to the sides, in order to preserve the exact proportions, and that would be good enough. But how to do it?
Thanks in advance.
Solved! Starting with the great ideas ephb gave me, I finally decided to get a reference percentage between the screen width and height. So, for 1920x1080, which is the resolution I know the game looks correct in, I did a rule of three and got that 1080 is 56.25% of the screen width, and, that in that case, the camera size should be 5.
Knowing those two elements, now I can check the height proportion for the user´s device and, using another rule of three, calculate the correct camera size, like this:
Camera cam;
void Awake()
{
cam = Camera.main;
cam.orthographicSize = GetHeightProportion() * 5 / 56.25f; //1920x1080 reference ---
}
float GetHeightProportion()
{
return ((float)Screen.height * 100) / (float)Screen.width;
}
I think you are looking to resize fore any aspect ration not screen resolution. You use the aspect ratio dropdown of the game window to see how it looks without running it on different computers.
The default setting is that the vertical field of view of your camera stays the same. Since the 16:10 display is taller this results in your image appearing zoomed with the sides being cut off.
Since you are using sprites and you basically have to recreate what the canvas scaler does but in world space.
You could move your camera, change its FOV if it a perspective camera, change its size if it is an orthographic camera or scale your scene. I will describe the first steps.
Get Screen width and height and calculate the aspect ratio.
Compare against your target aspect ratio. (I assume it is 16/9)
Use this multiplier to scale your scene / move your camera / change it's field of view
I am having a problem with my unity canvas as my background is on top and covering my gameobjects. I have tried putting the canvas sorting order to -10000 and changing the canvas rendering mode to overlay/camera/worldspace, but none of them works..
This is how my game looks like right now:
as you can see the white image which is my background is covering my gameobjects..
Attached are my component values for my canvas:
my canvas
Attached are the values for my camera:
my camera
Attached are the component values for my gameobjects:
my hero gameobject
Have you tried setting your game objects z position to a negative value?
For 2D games in Unity, the more negative your Z value is, the "closer" it is to the camera. If you try setting your knight to something like -1, it should no longer be obscured by your background.
Also, make sure to set the camera for your canvas' render camera and you can set the sorting order back to whatever it was before. Just check the individual pieces attached to your canvas to make sure their Z positions aren't "in front" of the game objects.
The background for your game shouldn't be on the canvas, it should be a gameobject with a sprite renderer and need to be attached with a sprite(background image) with a resolution that will fit most mobile screens (assuming you build it for mobile phone, i personally prefer making it 1028X720)
if you still insist on putting it on the canvas then you could set the canvas render mode to world space and set the sorting layer to something less than default or sort order -1
I know it is old post but #user8502296's answer saved me so I wanted to contribute. I changed the Canvas->RenderMode->Screen Space-Camera then I added Render Canvas->Camera->Main Camera.
Canvas
I'm developing a little game where I generate rooms of different size and would like this randomly generated room to be always visible on the screen without caring about it's size. The camera is on a top view angle (rotation = 90,0,0).
I tried to create a relationship between it's size and the Y axis position of the camera to make it always visible but it wasn't successful. There is the solution where the object is kept on the bottom left corner of the screen but if the object is too big only a part of it is visible by the camera. I really have no more idea ^^
Thank you for your help !
I guess you are using an Orthographic camera. For the Orthographic Camera, the size is the number of unity units from the center of the camera to the top/bottom of the screen. The width is then based on the aspect ratio. So, if you know how big the objects are that should be easy!
You can get or set the main camera size with Camera.main.orthographicSize
then get/set the aspect ratio (width/height) with Camera.main.aspect
and you can reset it after with Camera.main.ResetAspect();
I have a 2D unity project.
I cannot depend on OnMouseExit because overlapping 2D box colliders cause the method to trigger even when the mouse is inside the bounds, since something else is in front (which is not my intention).
I was going to manually check for the mouse exiting on every frame by using:
if(!_collider.bounds.contains(Input.MousePosition))
But this does not work because `mouse position' is in terms of the number of pixels across the screen, and 'bounds' is in terms of "units" relative to the origin of the scene. The camera is Orthographic and slides around to look at the 2D plane that the world's sprites sit on. I have no idea how many "units" fit across the screen and suspect that it would change as soon as you change the aspect ratio or screen size.
You can use ScreenToWorldPoint(), to convert from screen point to 3D/2D point based on the camera's viewport, something like this:
if(!_collider.bounds.contains(Camera.main.ScreenToWorldPoint(Input.MousePosition)))
I have a question regarding the different sizes of the web player of unity.
I have a scene where the user will select the level he wants to play and i the camera can move only on up and down , not sideways , and the user can not zoom in or out.
My problem is that because of the different screen sizes the camera size will exit the bounds of the game and the user will see a black part of the scene.
What i need to do is to clamp the ortographicSize of the camera. On the left of the map and on the right i have 2 objects which are the borders.
How can i clamp the camera size in order for it to not go over the borders ?
Thanks
The camera.orthographicSize is the half size of the vertical volume (you can use the resolution of the horizontal volume to get the needed vertical volume).
Probably you are looking to implement this: sizeX/size = width/Height,
Use this to calculate SizeX.