- Home /
The question is answered, right answer was accepted
How can I display a flat background - 2D image, not a skybox - behind everything in my camera?
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!!
I tried this and it worked for a moment in the editor but then for no reason that I could see my Texture GUI buttons did not show up over the background image???
Can somebody please lock this up? People keep bumping it. :|
Unity now has a simple way to do this, in Unity 2018.4+.
Follow these few steps to add texture as a camera background:
1.Create a new Canvas that would hold your image. 2.In that canvas, on Canvas component set: -Render Mode to Screen Space - Camera. -Render Camera to your main camera (drag&drop). -Plane Distance are the units, at which the background would render. 3.Right-click on the newly created canvas and create an Image inside of it. 4.On the newly created image on Image component: -Set Source Image to your desired background sprite. -Stretch your image to the full screen size. You can do this as follows: in the Rect Transform of that image, there is a gray square in it with some arrows, and lines (saying stretch on top and left side), click it, a window with multiple squares would open, hold down the Alt and click the most bottom-right square.
Now you should have a tecture as camera background!
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.
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?
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
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?
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.
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; }
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
Thank you jektal for sharing your update and than you duck for your step by step approach!
Answer by jamessa · May 20, 2015 at 09:26 AM
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.
Sample code here: https://github.com/jamessa/ImageAsBackground
To use my image as texture for the sprite I needed to select the Texture and choose "Sprite (2D and UI)" as Texture Type in the Inspector. Took me quite some time, I just started playing around with Unity.
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.
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)
Ist not the moste stable but the easyest background images setup, works fine for me.
I was wondering if this solution is less resource hungry than the accepted solution ?
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 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/
Follow this Question
Related Questions
Dynamically instantiated game objects not showing in main camera (with background camera) 3 Answers
Making GUI Buttons on a GUI Texture 1 Answer
How can I prevent my GUI background texture from getting pixelated or stretched? 1 Answer
Why can't I see my objects in the scene view when adding a background image and a background camera? 1 Answer