Unity 2d background sprite for all mobile device resolution

Unity Engine
1

I am new to unity 2d development.
I am making 2d game with Unity 4.3.4 for mobile device and use unity in-house 2d tool, but now I run into some problem and I couldn’t figure it out, so I hope someone can give me a direction or suggestion. Sorry if this question has been post before.

My artist make a 1024x768 background image for 2d game and when I run the game with 1024x768 or 2048x1536 screen size, image fit perfectly, like image below

1600825--96627--$ipad1024x768.png
1600825--96627--$ipad1024x768.png829×661 189 KB

When i switch screen resolution to iphone 5 screen size, there are gaps on the left and right side of screen, which is unacceptable result, like image below

1600825--96631--$iphone5.png
1600825--96631--$iphone5.png824×660 118 KB

The camera’s setting is orthographic and I set size to 3.84 because pixel to unit is 100, so calculation is 768 / 2 / 100 = 3.84 and both viewport width and height are 1.

My question is how to get background image to fit on different screen size on mobile device without gap, cut or stretch by just using only one background image, which is 1024x768?

I have try to change camera aspect of ratio to whatever the screen resolution is on, the background image fit on whole screen but get stretch which is unacceptable.

Can someone help with this problem?

2

The short answer is, you can’t; something has to give. Based on that image, I’d suggest cutting mostly from the top.

3

One approach to support common aspect ratios for multiple devices is to select a base aspect ratio e.g, 16:9 and add ‘extra’ content for 4:3 aspect ratio and so on so your background image is displayed correctly. Hopefully this link should help?

4

Basically what I do is that I always calculate the ratio of screen width to the image width and screen height to image height. Based on the ratio calculated, I scale the image with the higher ratio so that it maintains the aspect ratio and fits to screen as well.

5

Thanks for answers, since I don’t want to stretch image so I will go for approach that add extra content to background image.

6

Hi,Nelson !

I am having the same problem like you but in (portrait mode) using sprite image,have you solved your problem if yes then kindly help me?

7

playmonkey1 approach is one good method without stretch your background. If you don’t want your background to be stretch then you need to find out common screen ratio then add extra content to your background. I saw some blog that Halfbrick studio’s jetpack joyride also doing the same way to overcome the screen ratio problem. Find out the screen ratio your game will support is most important thing before you do any of work, no matter what device your are working on