Camera Fit: Screen Handler

Asset Store Link!

​

Camera Fit is the easy way to handle screen aspect ratio for different devices, screens and window sizes!

Works on Mobile devices and all other platforms.

Supports both, orthographic (2D) and perspective (3D) cameras.

Has three different modes:

​

​

​

With the Dynamic mode, a specified area (main game area) will always be visible, no matter what screen/window size you choose - the Camera Fit component will adjust the frustum to always keep that area on-screen.

Video presentation:

Support e-mail (we would love to answer your questions or receive any feedback about the component): support@tagofjoy.lt

 

The images you have shown look very confusing.
I am looking for a replacement for the canvas scaler because it's broken in Unity.
Distorted button colliders, blurry at different resolutions, way out of view input areas etc.

In your image comparisons can you please explain if this asset is a suitable replacement for the canvas scaler and what exactly is going on with the images below because the areas outside the Main Game Area are what concern me because image perspective A has unclipped the sides and perspective B has unclipped the top. They should look the same on both devices right? Or perhaps the unclipped areas are black in the final builds?

 

Hi SilverStorm,

I'm not particularly sure if I understand what your needs are, but I'll try to answer your questions

Our plugin modifies the properties of a Camera to adjust it for different screen/windows sizes. Whereas the Canvas Scaler adjusts the Canvas itself. This means that you'll have to use a World Space Canvas to have proper control over the Camera. Now, when you have that, you should setup a Camera that covers all of your Canvas in your default resolution (the one that looks the best for your UI). Then if you add the Camera Fit component to the Camera and choose the Dynamic mode, it'll automatically set your default resolution as the main game area (you can edit that area later, if necessary). This means that however you resize the screen, the main game area (in this case, all of your UI) will always be visible. I. e. if the screen is higher than your main area, the camera will expand vertically, but if the screen is wider, it'll expand horizontally. This way your Canvas can have a constant size (no need for the Canvas Scaler), and Camera Fit will make sure that all of the UI is always visible. The UI elements won't snap to the sides of the screen though, so if you need that, you'll have to create a simple script of your own to reposition the UI elements (Camera Fit provides the properties that you need for that).

To answer your last question: yes, the camera "uncovers" the areas outside the main game area, because you will rarely want them black - it's better to have some buffer graphics (which aren't essential to your game, but are still there) to make the game look more polished. In case of UI, those areas will probably be empty, so that's not a problem, too. And, finally, you can obviously add some black Quads/Sprites/UI Images around the main game area if you actually need those areas covered with black.

I hope I've clarified the functionality and the usefulness of Camera Fit Let me know if you have further questions.

 

@DominoOne I want to purchase this asset but i have one question.
I want to cover the letterboxed/Pillarboxed area with the graphics that will show up on iPad which have aspect ratio of 4:3 , as i am designing my game for the aspect ratio of 16:9(iPhone). Do i need to create separate Camera for showing letterboxed area or the viewport of the camera is changed so that there is no need for the second camera, because i want to keep only one camera whose viewport must change according to change in aspect ratio.?

 

Hello rjvrajani,

With Camera Fit the magic happens on the same single camera Even if you publish the game on Android, Camera Fit would adjust the view for any aspect ratio (which, as we all know, is pretty random on Android). Even in windowed mode (e. g. Windows 10 Store or Standalone apps) it would work perfectly.

 

Thanks for your clarification. that means Camera's ViewPort changes according to different aspect ratios, which will show letterbox/pillarbox area using single camera.

 

Yes, exactly

 

Hello,
I recently purchased Camera Fit Screen Handler, and it is very helpful with the resizing of screen to look the same across all aspect ratios and resolutions. I am making a pixel perfect game for Android Devices and noticed that for every other resolution in sequence shows pixel errors. For example 9:16 Portrait 540 x 960 Pixel Perfect, 9:16 Portrait 405 x 720 Pixel Errors, 9:16 Portrait 360 x 640 Pixel Perfect. I was wondering if/how to fall back to the next Pixel Perfect resolution if the players device resolution is one with the pixel errors? Is this something you could add in a future update?

Thanks for any information.

 

Hi IDreamofIndie,

I'm not completely sure that I understand what you mean. Could you maybe attach a couple of illustrations? Thanks!

 

I don't really know how to explain it.
This is what I need the resizing to do.

What he shows adjusts to a resolution that works to keep pixel perfect in different ways that you can select for if the resolution is not a pixel perfect resolution to your base resolution.



EDIT:
I got in contact with the the above video's creator and was told they will be releasing it on the asset store soon.
Thanks

 

Sorry for a late reply, I had to give this some thought. Unfortunately, I couldn't think of a way to handle the regular screen resizing cases and the pixel-art cases in a single component without unnecessary cluttering. It's probably better to use another component. Or you could get the size of the camera and resize your game world accordingly.

On the other hand, Unity has made a blog post about the issue that you have described, so you could get the component for free over there (there's a link to a sample project): https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/

 

Not sure if I've understood right, I'm looking for a way to show exactly the same portion of the 3d world regardless of aspect ratio and resolution but UI elements must be anchored.
Something like so...

Is it what your asset is doing?

 

Hi Tropobor,

Before providing you with an answer, I have one question: do you need to draw the UI elements within the 3D camera or are they using a separate camera (or maybe even the "Screen Space - Ovelay" mode)?

 

Hi Domino,
For now, I'm in Screen Space Overlay mode but the project is open to other solution.

 

"Screen Space - Overlay" sounds perfectly fine So, with Unity UI you can make the UI elements snap to the sides of the screen - you have probably already done that. It's completely independent from the 3D camera.

And for the 3D camera, our plugin is exactly what you're looking for! You will be able to set up the middle area to be the "main area", so the camera will always keep it in-view, while automatically expanding the view to the sides or to the top-bottom, depending on the screen aspect ratio. You can see it demonstrated in the 22nd second of our video.

 

well... Great!
Is it possible to consider some kind of parameters, eg. your asset being able to dynamically compensate between height and width?
Image below:

 

This time I'm not sure what you mean. But as far as I understand, you need to change the "main area" during run-time? If so, it's completely possible. If e. g. the width is always the same (from your examples, the circle always has the same width, but when looking from the top, it becomes narrower in height), you can simply set the "main area height" value, and the "main area" will become narrower. I think that's what you need.

 

Well... your asset is called : Camera Fit: Screen Handler
And I do not understand why this is not include in unity by default.
Height Fit is.
Width Fit is not.
Why ?
Just wondering if I'm missing something, and/or if your asset could solve my issue.
Anyway, thanks for your answers and your patience, I really appreciate

 

I have no idea why Unity doesn't have more camera controls by default. While developing games, we've been constantly running into this need, so in the end we decided to just create a plugin for that.

From what I understood, I think our plugin is exactly what you're looking for - it should enable you to easily control your camera in different situations. But I'm not fully aware of all the situations you will need, so it's up to you to decide if you'll purchase it

 

I'm afraid I agree with you and unfortunately do not have much choice.
So... you are about to have a new happy customer here.

 

Hello,
I bought your asset today to solve the following problem:
My game is in 16:9 ratio, but it only runs in correct proportions if the user’s screen is set to an aspect ratio of 16:10, where it has the horizontal black bars. If I change my monitor resolution to an aspect of 16:9, for example, the game is stretched vertically out of proportion, with no black bars.
Unfortunately, your asset has not solved this issue. I've tried all three Camera Fit modes, deleted Player Settings from the Registry before each test, and tried a test on two different PCs, one running W7 and one W8.1 - still the same problem.
Could you advise on this? Thank you.
I’m using Unity 5.0.0. In Player Settings I have Default Is Fullscreen checked, the Default Width 1068, Default Height 600, giving a 16:9 ratio. Fullscreen Modes set to Fullscreen Window. The only checked Supported Ratio is 16:9. (My monitor is normally set to 1280×800.)

 

Hi Sulla__2014,

Hm.. Have you tried creating an empty project? Do you see the same effect? If so, it would seem like a Unity bug to me, so maybe you should try submitting a report to them.

 

Hi DominoOne,

Does this asset allow UI objects to be snapped to parts of the screen? For example, in the inspector, if I anchor a button to the top left of the canvas, and use your dynamic camera, will this button always be stuck to the top left of the device? I don't need the button to be stuck inside the "main game area" that i specify in the dynamic mode. I want the button to be top left, full stop.

Here is another asset that seems to support this, https://www.assetstore.unity3d.com/en/#!/content/24469. In the example video, the view area is changed but the UI components stay snapped. How does your asset handle this?

I use the canvas scaler set to the 'Scale With Screen Size' mode, and it works well for me, but I'm not sure if your asset affects this.

Thanks!

 

Hi comu,

Doesn't seem to be a problem When you create a Canvas and a camera for it (with Camera Fit assigned), choose the Render Mode of that Canvas equal to "Screen Space - Camera". Then set the anchor for the UI element (e. g. if you want it to snap to the top left corner, set the X Min to 0, X Max to 0, Y Min to 1, Y Max to 1), then play around with the position of the UI element, and they should snap to the corner of the screen Let me know if that helps!

 

Hey Domino,
First of all fantastic asset it has really helped the problem I was having and was incredibly easy to implement and use. I've just now tried using Cinemachine and it seems to cause a conflict. I realise it is an external asset but it is quickly becoming popular and I was wondering if you could offer any solution or if you've ran into the same problem I have. Cinemachine seems to control FOV itself. Which I believe is the issue. I'm using the perspective mode by the way.

Any advice appreciate anyway.

 

Hi Barabicus,

Thank you for the kind words! We haven't actually tested it with Cinemachine. Is it this one: https://www.assetstore.unity3d.com/en/#!/content/79898 ? By the way, which Camera Fit mode are you using?

 

Yea thats the one. I'm using Fixed Width. Its probably more a question of asking the Cinemachine people to allow controlled FOV as optional but I was just wondering if you knew of any work arounds.

 

Hi Barabicus,

I've just tried it out, and it seems that changing Update() to LateUpdate() in the CamerFit.cs script helps. Let me know if it works on your side

 

Hey,
Sorry for the late reply. I tried this out as well as putting the script in later in the script execution order and it seems to work. Thanks for the help

 

Great! Glad to help

 

Can we get some documentation on how to install this? The video assumes after you import it from the asset store it just magically shows up in the Rendering section which it does not. And the documentation that comes with this doesn't say anything that I can see. Seriously?

 

Sorry I spoke to soon. I did not see it in the menu but i did drag the script to the camera itself.

 

Hi chadmandoo,

I'm glad that you managed to find how to apply Camera Fit

For clarity purposes, there tree ways to do that: 1) drag the Camera Fit script onto a Camera; 2) select the Camera, click Add Component on the camera and find Camera Fit; 3) got o the Component menu, then Scripts and choose Camera Fit.

 

Hi Dom,
I have an training app with a many scenes and a lot of text. Each scene is very different and typically has several canvases. It works fine in resolutions 3:4 to 9:16. UI text is mainly on canvases with "Screen space- overlay" and "Scale with screen size".
I now want to be able to modify the app to run on wide screen devices like iphoneX and Samsung Note 8. The quick fix is side pillar boxing. A more thorough fix is to allow a wider camera view in each scene and allow text to expand to 9:16 in width and no further. This would prevent text being hidden by the curved screen corners and the cutout on iphoneX, as well as looking better and giving better readability.
Are you saying that what you call your "Main Game Area" can be the entire canvas?
I'd assume I'd need to change all my canvasses to 'screen space camera' to use your asset? This would mean a big performance hit on mobiles.
Can your asset help with either of these scenarios please? All advice welcome!

 

Hi @dradb, sorry for a late reply, I somehow managed to missed it!

A lot depends on whether your game is vertical or horizontal. If it's horizontal, you probably don't need our script for the situation that you're describing, but if it's vertical, the script would help a lot.

In any case, I would recommend using World Space Canvas (not sure why you're assuming that it would perform worse that the Screen Space one, but it definitely shouldn't). Then you can set the width and height of the Canvas yourself, not depending on the size of the view. So, as long as the aspect ratio is between 3:4 and 9:16, you would resize the width/height of the Canvas, but if it exceeds the limits, you just keep the Canvas 9:16. Simple as that Screen Space Canvases are easy to setup, but you lose a lot of control when you use them, so I always recommend using World Space Canvases.

 

Hi, when i use fixed width, the width matches on the phone exactly, but height is not scaled. when i use fixed height, this also works with height, but width does not scale properly. however, whenever i use dynamic, and set the horizontal/vertical FOV, on my mobile phone only the height is scaled and the vertical is always stretched beyond the field of view, any help?

btw my game is played horizontally

 

Hi @agreyabbas,

Could you elaborate and explain how you expect it to "stretch"? If you could provide sample images of how it actually works and how you'd expect it to work, it would be even better

 

Hello. I need to stretch the game screen so it stays on full screen. Will this asset help me in this? When compiling for android it fills the screen, but when compiled for windows this does not happen.
https://drive.google.com/file/d/1Mhxx-4vjdCN0YpDlfn40CN0Vu5Ey84dG/view?usp=sharing

 

Hm... Not sure if I understand what you need. If you actually need to stretch your view, this is not what Camera Fit does. What Camera Fit does is stretch the camera instead, and fits it to various aspect ratios of the screen

 

i want to purchase this kit. if you please clear my few points which i need in my game.
1) is it need any setting of ui,sprites etc. like i have set my complete game , where few ui item using anchors with stretch , center middle, left,bottom etc. (THEY WILL WORK FINE OR I HAVE TO CHANGE SOMETHING)?
2) new resulation like huawei mate 10 pro has a different screen resulation which is 2:1 (IS YOUR PLUGIN WILL WORK FOR ANY TYPE OF SCREEN RESULATION)

 

Thanks for your interest! Here are the answers:
1) You can use anchors and everything, not a problem. Our plugin only modifies the parameters of the camera to adjust it to your game/UI world. The only limitation is that you'll probably have to use World Space Canvases, because if you use Screen Space canvases, Unity intervenes and resizes them on its own.
2) Yep, our plugin works with any resolution. You can watch the video on the Asset Store and see how it reacts to free resizing of the game window

 

Does it work with Unity 2018.2.18f ????
Because I got this when I attempted to buy it

 

Yes, it works with all versions of Unity. We uploaded it with Unity 4.6, but the code is adapted for all later versions, too. We're using it in our own current projects without a problem

 

Will it work with new unity versions ?? Say unity 2018.3

 

Does this work with Unity 2018.3 ? Also, after reading the reviews on the unity asset page, someone wrote that there is a prob when this script is applied to the camera, it doesn't fit the UI accordingly. Can you clear that doubt for me ?

 

Thanks for your interest! Yes, it works with 2018.3 The UI isn't directly related to the camera in Unity. So, the way you set it up, the way it will work – our plugin won't change that behavior. The Screen Space UI is always a bit hard to control, so the easiest way to handle this is to set up a World Space canvas along with a UI camera, and then whenever the aspect ratio in the game changes, dynamically change the size of the canvas equal to the camera horizontal/vertical size (just a super simple script will suffice). Something like this:

Code (CSharp):

1. uiCanvasRectTransform.sizeDelta = new Vector2(2f * uiCamera.orthographicSize * uiCamera.pixelWidth / (uiCanvasRectTransform.localScale.y * uiCamera.pixelHeight), 2f * uiCamera.orthographicSize / uiCanvasRectTransform.localScale.x);

I just tested this, and it seems to work well.

 

I may have encountered a bug. I setup Camera Fit for an iPhone X, but when loading a scene with a different aspect ratio (like iPhone 8 Plus), it produces a square 1:1 ratio and also turns the camera into orthographic. I don't use any orthographic cameras so this is very strange. Here's the steps to reproduce:

1. Set Game window to 1125 x 2436 (iPhone X portrait).
2. Attach Camera Fit script to perspective camera and set to dynamic, horizontal center, vertical bottom.
3. Save scene.
4. Set Game window to 1080 x 1920 (iPhone 8 Plus portrait).
5. Load scene.

This makes a 1:1 orthographic camera for me. If I switch the camera to 'orthographic' then back to 'perspective', it snaps back to the proper ratio. It also builds in Xcode to an iPhone 8 Plus like this. Building to an iPad does not produce this behaviour.

EDIT: The 1080 x 1920 resolution seems to be the problem. It doesn't load properly on scene load and gets stretched when switching to it from a taller aspect ratio.

EDIT 2: Reducing the camera far clipping plane eliminates this behaviour. I haven't tested all the scenes yet but it's working on at least four of them.

 

Hi. Sorry for a late reply, I was away for a few days

Hm... I just tested the steps you listed and it doesn't reproduce on my end :/ It's also super weird, because nothing like that should happen. Are you sure you're not doing anything with the camera from other scripts (either yours or other plugins/packages)?

 

Thanks for replying. I have no other scripts on the cameras. Just a basic static setup.

In troubleshooting this morning, I found that deleting the component and adding it again makes the problem go away. My only wild guess is that, last week, I added the script to all cameras in one session and there must have been something wrong with Unity at that time and it was saved into the scenes. I will redo all scenes now and do a test build.

EDIT: Ok, I think this is it. Saving the scene with the game window set to a different resolution from when the Camera Fit component was added causes this issue. The following steps reproduce it 100% for me.

1. Set game window to 1080 x 1920 (iPhone 8 Plus portrait).
2. Attach Camera Fit script to perspective camera and set to dynamic, horizontal center, vertical bottom.
3. Set game window to 1125 x 2436 (iPhone X portrait).
4. Save scene.
5. Set game window back to 1080 x 1920 (iPhone 8 Plus portrait).
6. Load scene.

 

Which Unity version are you using? I've tried following the steps, but re-loading the scene doesn't break anything on my side :/ The only artifact that I'm seeing is that the view gets a little stretched when switching between the two resolutions. But re-loading the scene or playing the game (i. e. forcing a camera update) fixes that. If you could make a video (or screenshots) of how it all works/looks, it would be great.