8
\$\begingroup\$

I am developing a 2D game with Unity.

I have two sprite objects rendered using SpriteRenderer.

With the new UI system, I want to use it to display an image between my two sprites. That is, my first sprite has a sorting order of 100, then my UI Image has a sorting order of 200 and then my second sprite has a sorting order of 300.

Is that possible?

I tried using sorting layers, but no matter what, the UI image seems to always overlay my two sprites.

|improve this question
\$\endgroup\$
1
\$\begingroup\$

I've been fighting with this for an hour and I finally came up with a solution.

I was working with a World Canvas UI and couldn't get it to work correctly with sprites: first, sprites were always on top, then the sprites disappeared completely even if the UI image above them was not fully opaque.

So based on: http://answers.unity3d.com/questions/832834/unity-2d-46b-ui-why-are-instantiated-prefab-sprite.html

You should set the "Order in layer" of your background sprite's "Sprite Renderer" to 0.
Then, set the "Order in layer" of your UI Canvas component to 1.
The foreground sprite "Order in layer" should be set to 2.
The sorting layer was default for the 3 elements.

Basically, you could work with more than one world space canvas and more than one sprite (in case you want many layers of 2d stuff) and set the sorting layers correclty (remember you cannot set the Order in Layer of the UI element individually. That is set by the order of the GameObject in the hierarchy. Instead, you must set the Order in Layer for the UI in the Canvas)

|improve this answer
\$\endgroup\$
1
\$\begingroup\$

This is fairly simple to do, Weexe actually was on the correct path just didnt give the entire information you seem need.

First create your 2 sprites and a Canvas holding your image you want inbetween. Set "Order in Layer" to 2 and 0 for the 2 Sprites you want in the background or foreground. A higher number means it's in the front. All elements, including the UI will have to be on the same Sorting Layer.

Now, click your Canvas and set the Render Mode to World Space, this is needed so you actually get the option to go between sprites in the world. Cuz now you have the Sorting Layer and Order in Layer Option on your Canvas aswell. Set the Order in Layer to 1 and the Sorting Layer to the same as the 2 Sprites!

Note: If you can't find your UI Image note that it is actually super large in the scene, you'll have to heavily reduce it in size and position it the image(not the canvas). If you want to find it just zoom out alot and you'll start to see it ( Tip: if it's actually a small image you should activate the transform tool so you know where it's currently positioned ).

I just recreated this in a minute with example images, definitly works. If you have any further Questions just comment. I'll gladly help.

|improve this answer
\$\endgroup\$
-1
\$\begingroup\$

You have to use the Render Mode "World Space" Reference : http://docs.unity3d.com/Manual/UICanvas.html

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ With "World Space" render mode, the image simply disappears. I can't see it in the game view. \$\endgroup\$ – Oxide Jan 14 '15 at 17:13
  • \$\begingroup\$ His explanation was rather incomplete. Once the render mode is set to "World Space", you then have to position the image in your scene. Did you do that? \$\endgroup\$ – jhocking Apr 20 '15 at 21:48
  • 1
    \$\begingroup\$ This answer should be improved with additional information. Why should that render mode be used? What problem is that solving? Are there any other steps? \$\endgroup\$ – MichaelHouse♦ Jun 20 '15 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.