Issue with Canvas Background?

Question

I'm preparing a 2d game. I'm working with particles, the problem is my particle is displaying on the obstacle and also a problem with level text see the reference image:

and the second issue is when I run my game on mobile then below some space left?

• canvas : screen space camera and render camera->main camera.
• Background RectTransform (stretch->stretch).

Canvas Inspector:

Particle Inspector:

Obstacle Inspector:

Answer 1

first, welcome to this community. second, before making any real project try to read all of its documents and do some tests with it.

on canvas select scale with screen size and drag anchors to fill the place you want. so your object scales to fill in different phone screen sizes and ratios.

about particles and obstacles, it depends what tools are you using. if you use unity builtin particles, you can define colliders for you particles that is a very heavy feature. and define a box collider for your obstacles. if you use UI particles and those obstacles are UI, there is no builtin feature for it you have to search what works best for you.

please share your inspector for score text and obstacle for more complete answer.

Answer 2

In order to get the particles behind UI elements you have to change the "Order in Layer" for either the canvas for the UI elements, the VFX Layer or both depending on what's best for your project right now.

Create a new project and try this:

1. Set the camera to orthographic and give it a reasonable size for your target resolution
2. Create an Image in the scene (this should add a Canvas to your scene as well)
3. Create a Particle System (should be a child of your canvas object)
4. Check the "Sorting Layer" and "Order in Layer" of the Canvas object (It should be on "Default" and "0"
5. Go to your Particle System and scroll down to the Renderer component
6. Notice that there's also a "Sorting Layer" and "Order in Layer" and they're equal to the one from the Canvas object
7. Set the "Order in Layer" to 100 and notice that the particles are now rendered on top of the UI Image (which is rendered with the properties of the canvas object)
8. Set the "Order in Layer" of the Particle System to -100 and notice that the particles are now beneath the UI Image

You might want to use bigger numbers than -1 and 1 and go with -100 and 100 for example so that you can decide what to render on top of what more easily later without changing the "Order in Layer" for every component again when you change something.

---

The reason why the layouting is different on your phone than in your editor is because your phone has probably a different resolution and/or aspect ratio than the resolution you chose in the editor. Making your game work on multiple devices and resolution is a whole new topic on it's own. But, you should be able to find some stuff regarding that on YouTube and Google.