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 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.
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 map (2d) which is about 5 times the size of the screen area. I can touch drag the map. However the user must only be able to drag it as far as the map is still showing. So the empty area outside map isn't showing.
So my question is: which of the two methods are best:
1) have colliders at the side of the screen and then put colliders on each side of the map. Then checking for collision and if so move the map so its collider does not touch the screen collider.
Or
2) check for the position of the map (i have an adjustable screen size according to device) and then stop the drag if it gets dragged further than visibility of screen. Using coordinates and math.
Will it take up more space (the ios/android) file if I use solution 1?
Thanks.
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)))