Unity 2D Setting Background Image

Hi Community,

I am new to Unity and trying to learn 2D gaming for mobile platform (came from Flash/AS3 background). I need to set background image for my 2d game and its like my image size is 960(w)x1280(h).

What I need is that if device resolution is smaller than image than bg image should be centred and cut the extra part keeping 1:1 ratio.

If device resolution is bigger than image, in that case image should be stretched in RATIO, of course width or height whatever goes bigger will be cut out off display.

I tried using Skybox but it is stretching/shrinking my bg image in case of resolution which is different than my bg image's ratio.

I am looking for some automated way so that unity can handle this itself. But if there is no automated way than any manual width/height solution will also work.

Any help is appreciated.

Thanks

 

1) drag your image file into scene view to create a sprite
2) set the scale to (x960 y1280 z0) and the position somwhere in the background
3) use the scale tool to make it small again. (but keep the ratio)

 

Well, Unity does scale it automatically for any resolution.. Why would you worry about that? Did you at least try to run your background at different devices with different resolution??
You need to set your camera properly.. Whatever you see in your camera, that you should have in output for any other devices.. The only thing would be a GUI, which you have to position depending on screenResolution, like getting the screenHeight and Width.. but for the gameplay I wouldn't worry, so far I didn't have any problems with cuttings in my first game...

 

I tried with a sprite and also with a GUITexture but it do not automatically scale the image according to the resolution. My image is of size 960 x 640. But when I try this in 600x1024 it doesn't scale it automatically.

I tried some manual scaling and yes that is working but I was looking for some auto work done by Unity. It would be great if you can tell me some steps of how does Unity scale it automatically (as you written) or any tutorial or anything like that.

Thanks

 

How did you test it exactly? Did you just change the resolutions in Game Screen? or Did you actually upload your project in to some device.. By the way, do you develop it for mobile or desktops?

As I said before, set your Main Camera properly.. this can be a case. Unity does scaling automatically, you don't have to take any additional actions..

Here is a nice tutorial for 2d..
http://pixelnest.io/tutorials/2d-game-unity/

 

I test on both a 10 inch tablet with very high resolution and small phone with a low resolution and as far as I can see, Unity doesn’t have a problem scaling graphics in the Gameworld but I did have huge problems at the beginning with anything in the GUI, especially involving text.

My solution (I hope it doesn’t sound a dumb one), was to create two variables myratiox and myratioy which were basically Screen.Height / 1000f and Screen.Width / 1000f (or some other relatively arbitrary number, such as the screen resolution you’re testing on).

Then in the GUI, whenever I was defining the Rect to draw Labels, Textures, etc., I’d simply define float variables for my x, y, w, and h values which I’d multiply by myratiox (for x and w) and myratioy (for y and h). I’d also make the x, y, w, and h variables public so I could adjust them when running the game in the editor. I then align my elements on the PC and then hard code those values into Start.

Not sure if this is the right way but everything has come out looking exactly the same on both mobile devices.

 

...It's probably simpler to just create a sprite and position it relative to the camera at that point.

 

I think Unity's camera clear flags should include a texture option, i.e. choose a texture that gets cleared to, which internally throw up a quad with a texture on it.

 

hello friends please reply

i want to change background image after score 150 in a single level how can i do this please help me.

 

hii friends please reply... i want to change background image after some complete scores like 100, so how can i do this .

 

It was a sort of vaguely stated reply earlier, but I think the best thing to do would be to lock the z position somewhere in the background, then in update, set the xy position to follow the camera's x and y. You could (on scene load or whenever background changes) do a raycast to a plane or to the background itself (use layer mask) from the edge of the current screen space, and if it doesnt hit the background image (so that means the image is too small / blank space exists around the background) you scale up the background until a raycast does hit all edges (then you know the whole background fits on screen no matter what resolution you are at). As long as you scale both x and y equally (by ratio of the image) then the image will never look "squished" or "stretched", at most it would look pixelated. Just an idea.

 

I used TransparentFX Layer on the inspector of a Sprite----if used as object
OR giving a negative value in the "Order in Layer" field----BackgroundImage

 

background sprite images instantiate when change scene in unity2d??

 

Where is scene view, is that the area in the middle, Never mind i have figured it out the answer is yes.