- Home /
The question is answered
How do I make UI elements go behind my 2D game objects?
Hello everyone, as the background I have implemented a UI Image inside a canvas. However, it goes over all the game objects, killing the purpose of a background. It is a 2D scene, is the a way to render the background in the back?
I just checked my email and saw you reworded your question, and I will answer your question again right now because I don't think you saw my last response yesterday and just deleted the whole thread.
You need to change your Canvas Renderer to Screen Space Camera so you can change the sorting layer as well as order in layers, this will answer your question, is the easiest to setup, requires the least amount of CPU, and is just generally the recommended way to do exactly what you are asking.
Now that you worded the body of your question from "How do I display 2D objects behind my UI" to "How do I get my background to display", I understand the why now, and I would NEVER use a Canvas to display my background image, ins$$anonymous$$d I would use a sprite renderer to display a 2D sprite based background.
UI in general is not used to simply display images just like screw drivers are not meant to hammer nails, but both will get the job done. Think of using a Canvas (parent object of all UI) to only record player interaction with buttons, menus, sliders, things like that; sprite renderer (or mesh renderer for 3D) are the components used to display images and would make 1000% more sense to use a sprite renderer if you are just trying to show a background (even if it is a scrolling parallax background).
I did answer this question correctly within one answer and two clarifying comments later (and even apologized for not giving you a 100% complete answer the first round) and it is kind of frustrating to provide help on this forum and see people not take the advice and rather than ask "I'm doing what you are saying, it doesn't seem to work..." they just move on and ask for next answer; I have never seen anyone insult anyone for trying to learn on here, or reddit, or youtube, or anywhere and would say game dev community is super friendly and eager to help; I personally have a ton of patience for people who are willing to listen and learn and it's uplifting to see those moments when it starts to make sense for newbies; don't be so proud that you are afraid to ask for more information if something isn't making sense or working for you.
Anyway, hope this helps you out, and just be honest on this forum, don't be afraid that someone will call you out for not understanding an answer they provide, literally have never seen that anywhere.
Hello @I_Am_Err00r , I am extremely grateful for your answer. To give a little bit of background (pun intented) I was opting for the sprite renderer solution you are talking about, but it wasn't completely practical as the camera zooms out at times, revealing what's beneath. Which took me to look for a way to display it as UI, so it's always the same size and displaying fully (there are obviously other ways to avoid that problem but the UI solution seemed the most straightforward). As for your answer, I foggily remember that you recommended to set the camera to World Space ins$$anonymous$$d of the supposed Screen Space Camera and something happened in the way that was making it act like a sprite. So I edited the question to bump it (literally added a space) and the other replies have been removed for some reason. Though upon reading this, I decided to try it again and it worked exactly as intended and I thank you. Sorry for the wall of text, the inconvenience, and my noobie brain.
I lied about this being my last post :)
Thanks for not taking my venting personally, I'm having a rough day at work and I just took it out on you, so sorry, I'll reward you with 10 points for not taking it personal.
Here is the answer you have been seeking: https://kylewbanks.com/blog/create-fullscreen-background-image-in-unity2d-with-spriterenderer
I haven't tested this, but this is a fairly common issue and it looks like this tutorial walks you through so that regardless of camera zoom or position, the background will display.
Answer by JedBeryll · Aug 28, 2019 at 04:24 PM
Hi
Create new material
Select shader for material: UI/Default
Set render queue to something like 2300
Assign this material to the image component's material slot
Make sure your camera clear flags are set to anything but skybox.
Hi
Upon trying this, I have noticed that this renders the image behind other UI, not behind the scene as intended for this image
Are you sure you followed all steps? I have just tried this and it works for me. Backgroudn is behind everything and ui is over 3D objects.
I followed everything just right. Also, it might be that your scene is 3D and $$anonymous$$e is 2D
Ok, I'm going to leave you alone after this post, but seriously why are you using a Canvas to display an image? How are your other 2D objects renderered? Are you using a Canvas to display all of your objects? Do any of your objects have a Sprite Renderer? Who taught you this or why did you decide to go this route?
I know you're trying to help @JedBeryll, but given your reputation (karma) you should know that adding a material isn't the most optimal, manageable, and newbie friendly way to go about this and that using a Screen Space Camera render mode for UI and then order the layers from there is (which is the first answer you provided I saw in the email about this thread, but I guess you deleted when you saw my previous comments telling @pigaroos to do that); however, the real problem is @pigaroos is using UI to display background images and we both know that a sprite renderer would be the best route to do that, despite the question asked by OP.
Alright, I'm out of this thread, best of luck to you @pigaroos.
Follow this Question
Related Questions
2D UI in 3D space 3 Answers
Unity 2D not rendering images in Canvas 1 Answer
Canvas Screen Space Issue 1 Answer
How to change UI image render order dynamically on runtime 1 Answer
UI Image size 1 Answer