Device Background Fit

I'm making a game for IOS and Android and am having a hard time trying to make a script that will fit all my elements in the screen. I want my game to run on any device, so this is essential. I have watched a couple Youtube videos, but none work. Please help! (I'm so close to releasing my game so I would really appreciate a quick response, thanks!)

 

Note: I want my game to only be in landscape mode

 

You will need to come up with a combination of parenting and anchors that gives you what you need. Luckily you are only landscape, because it gets a lot more ticklish if you want to do landscape and portrait, and sometimes it's easier to make separate screens for those two modes.

Stuff you want against the left edge, anchor it there. Stuff you want against the right edge, anchor it there. Stuff you want dead center, anchor it dead center and make sure it fits at the narrowest screen, which is probably 4:3 ratio.

If you want the middle of the screen to shrink and grow, that's possible too, by putting anchors that are at the lateral limits of your edge elements, and possibly some ContentSizeFitter scripts in the middle, but that gets complicated quickly.

ALTERNATELY, you can put the entire UI hierarchy into a single GameObject, then put an AspectRatioFitter component on that object and set it to Fit Inside Parent at the aspect ratio you currently have the screen laid out with. If you do this, you will have black bars below and above on narrower screens, and black bars on the side on wider screen, and this MAY cause your app to fail certain appstore cehcks.

Obviously the top option, which requires a bit more work, results in a superior layout experience.

 

I'm pretty confused on how to do the top option. I tried anchoring my objects, but it resulted in blank space when I changed the aspect ratio. Can you provide a video or example to help me?

 

This is a good introduction for making a UI that works with different aspect ratios or resolutions.

 

Thanks for the example! Will check it out and see if I encounter any problems.

 

I tried doing this using the example, and it worked fine for one of my scenes. However, the other scenes didn't. This is how it looked.
Before changing aspect ratio:

After changing aspect ratio:

It seems like the background doesn't stay in the main camera when the camera changes ratios. I tried moving the background to the canvas, but then the background doesn't appear even when I don't change the ratio. Help!

 

I tried to make my canvas scale with screen size, however that didn't work either. Please help!

 

Your object "BACKGROUND" is a child of your Canvas, but doesn't look like a UI object? Its Transform is not a RectTransform (it has no anchors), and you are using a SpriteRenderer component (from Unity 2D) rather than an Image component (from Unity UI).

 

I tried this, but there's a lot of space that still needs to be filled up.

 

Set the anchors and size to fill the parent.

 

It worked! However, now my player is not visible. When I play my game the money prefabs also don't appear.

 

It seems like the background is being drawn on top of my player and money prefabs. Is there a way to fix this?

 

Check into SortingLayers and SortingOrder, or alternatively Camera depth and/or canvas sorting orders and render types. With correct configuration you stack anything however you want.