How can I display a flat background - 2D image, not a skybox - behind everything in my camera?

Question

hi,

I am working on a characted editor and I want to separate the scene from the background. the editor has got different views and I need the same background in any of them. my idea was to simply add a flat 2D image to the game camera background (whatever Im using each time). I thought it would be much easier but I cant find out how to do it properly.

the closest Ive been is having a camera for the game scene and then create a 2nd camera whith a skybox in a separate layer but I cant set it up as non depth camera.

in any case, is there any way to simply add a flat image as background no mather which camera, view, perspective I have??

Thanks a lot!!

Answer 1

Best Answer

Answer by duck · Jan 05, 2010 at 01:53 PM

You're almost there, with the 2nd camera approach. Here's how to do it:

Create a new camera (GameObject -> Create Other -> Camera), and name it "Background Camera".

Create a new GUI Texture (GameObject -> Create Other -> GUI Texture), and name it "Background Image".

Click the "Layer" dropdown menu in the Background Image's inspector pane, and select "Add Layer".

In the next free "User Layer" slot, create a new layer name called "Background Image". This will be directly under the layer named "Terrain" if you haven't yet added any others.

Select your Background Image in the hierarchy, and give it the desired texture, and set the x, y, width and height under "Pixel Inset" so that it fills the screen appropriately.

Near the top of the inspector window, Use the layer dropdown menu to assign your "Background Image" layer that you defined earlier to this gameobject.

Now select your Background Camera in the hierarchy, and adjust these settings in the inspector:

Un-Check Flare Layer and Audio Listener (but leave GUILayer enabled)
Set Clear Flags to Solid Color
Set Depth to -1
Set Culling Mask, first to "Nothing", and then to "Background Image"

Now Select you other (main) camera, and in the inspector:

Set its Clear Flags to "Depth Only"
Click its culling mask setting, and un-check "Background Image". This should result in the culling mask displaying as "Mixed ..."

Voila, this should give you your GUI Texture rendered by your background camera, behind everything else rendered by your main camera. And for any other additional cameras (eg, other camera angles) that you want to use, just repeat the last two steps on them.

Add comment · Show 18 · Share

RobF · Mar 23, 2010 at 12:31 PM 0

Share

thanks for this Duck, I was looking for the same thing. Query though, is there anyway to stop the clipping for a full background image when aspect ratio is changed?

Eric5h5 · Apr 21, 2010 at 11:16 PM 5

Share

It's much better if you set all the pixel inset values to 0, and set the scale to (1, 1, 1) ins$$anonymous$$d. Otherwise, the background image doesn't adapt to different screen sizes. The only possible drawback is that the background image will get stretched or squished with different aspect ratios than the one you used to create the game. If this is not desirable, you can use a script like this one: http://www.unifycommunity.com/wiki/index.php?title=GuiRatioFixer

DaveA · Feb 28, 2011 at 09:21 PM 0

Share

In 3.2, when I do all the above, the 'background' image is drawn really as a 'foreground' image in the Editor, all my other geometry behind the texture. I changed 'depth', no help. Anyone?

mack411 DaveA · Oct 04, 2016 at 07:53 AM 0

Share

in Hierarchy create a separate canvas for background image add the Background Image as its child change the 'Render mode' of canvas to "Screen space - Camera" assign 'Render Camera' i.e. your background camera and tag this 'canvas' as "Background Image"

this should help.

paulg568 · Aug 25, 2011 at 05:06 PM 0

Share

This solution works excellently. $$anonymous$$y only problem is when I go to actually make the background scroll, it stutters every now and then as it moves.

I am adding an offset*Time.deltaTime every update to the pixelInset.x. Is there a better way to make the background scroll? Code is below.

function Update () { var xVel : float = -xVelocity*Time.deltaTime; background1.pixelInset.x += xVel; background2.pixelInset.x += xVel; }

jektal · Mar 22, 2015 at 09:52 PM 3

Share

Could someone update this for Unity 5? It seems like GUI Texture has been removed, and trying to follow these instructions but using Canvas->Image objects puts the 2D image in front of the rest of the scene.

edit Fixed it... The Canvas component (on the canvas object) has a "Render Camera" property which needs to be assigned to the Background Camera

enoy jektal · Aug 29, 2017 at 07:14 PM 0

Share

Thank you jektal for sharing your update and than you duck for your step by step approach!

Show more comments

Answer 2

The old method does't work quite well in Unity 5. To apply the same effect, you'll need Sprite with your camera.

Create a new camera (GameObject > Camera), and name it "Background Camera".
Create a new Sprite (GameObject -> 2D Object -> Sprite), and name it "Background Image".
Click the "Layer" dropdown menu in the Background Image's inspector pane, and select "Add Layer".

In the next free "User Layer" slot, create a new layer name called "Background Image".

Select your Background Image in the hierarchy, and give it the desired texture, and set the x, y, width and height under "Pixel Inset" so that it fills the screen appropriately.

Now select your Background Camera in the hierarchy, and adjust these settings in the inspector:

Un-Check Flare Layer and Audio Listener and GUILayer (Legacy in Unity 5)

Set Clear Flags to Solid Color
Set Depth to -1
Set Culling Mask, first to "Nothing", and then to "Background Image"

Now Select you other (main) camera, and in the inspector:

Set its Clear Flags to "Depth Only"
Set Depth to 0

Click its culling mask setting, and un-check "Background Image". This should result in the culling mask displaying as "Mixed ..."

Things should be working now.

alt text

Sample code here: https://github.com/jamessa/ImageAsBackground

Answer 3

Answer by Jaap Kreijkamp · Jan 05, 2010 at 01:37 PM

A very simple solution add a plane with background texture as child object to the camera so it will always keep the same position relative to the camera. Move the plane close to the 'far clipping plane' distance.

Add comment · Show 5 · Share

FrHaYwOrKs · Apr 11, 2011 at 02:42 PM 0

Share

Liked and used! A really fast way to set up a static background! (I would suggest a directional light too to make it look... brighter! :D)

Malzbier · May 17, 2011 at 10:57 AM 0

Share

Ist not the moste stable but the easyest background images setup, works fine for me.

M_Plot · Jul 02, 2013 at 04:11 PM 0

Share

I was wondering if this solution is less resource hungry than the accepted solution ?

mjd1221 · Apr 02, 2014 at 06:17 PM 0

Share

works great!

salvador007 · Apr 17, 2014 at 10:46 AM 0

Share

Yeah... Jaap is right..it can be simply done by adding a plane with desired texture and setting it as child of camera ,where ever camera moves it follows. But I also liked the way Duck suggested for me its new approach i ll definitely use it some where.

Answer 4

Answer by arananet · Dec 31, 2014 at 05:12 PM

Best solution here (at least for me) :) http://pixelnest.io/tutorials/2d-game-unity/background-and-camera/

Add comment · Share

How can I display a flat background - 2D image, not a skybox - behind everything in my camera?

4 Replies

Follow this Question

Related Questions