NGUI, 4.3 and new Sortyng Layers

[brago]

Hello all,
is there a way to put a NGUI widget over a custom "Sorting Layer" in unity 4.3.x?

[ArenMook]

Sorting layers are a 2D system feature. They are completely unrelated to NGUI. To ensure that NGUI is drawn on top of everything, make sure it's using a separate camera.

[Clarens]

We have to combine SkinnedMeshRenderer with NGUI UIPanels in  Unity 4.3.x. In this case we have to handle the sorting layers in NGUI. Is the following code a correct way to do this?
I used the SortingLayerExposed-Script (https://gist.github.com/nickgravelyn/7460288) to set the SortingLayer for the SkinnedMashRenderer. In NGUI I did the following patch:

In UIPanel.cs I added:

1. 67      public int sortingOrder = 0;
2. 68      public int sortingLayerID = 0;
3.  

In UIDrawCall GetDrawCall (int index, Material mat) I added after:

1. 397       // Create the draw call
2. 398      UIDrawCall drawCall = go.AddComponent<UIDrawCall>();
3. 399      drawCall.baseMaterial = mat;
4. 400      drawCall.renderQueue = UIDrawCall.list.size;
5. 401      drawCall.panel = this;
6.  

the lines

1. 402       drawCall.sortingLayerID = sortingLayerID;
2. 403           drawCall.sortingOrder = sortingOrder;
3.  

In UIDrawCall.cs I added:

1. 43   public int sortingLayerID
2. 44   {
3. 45      get
4. 46      {
5. 47         return mSortingLayerID;
6. 48      }
7. 49      set
8. 50      {
9. 51         if (mSortingLayerID != value)
10. 52         {
11. 53            mSortingLayerID = value;
12. 54            
13. 55            if (mRen != null)
14. 56            {
15. 57               mRen.sortingLayerID = mSortingLayerID;
16. 58               UnityEditor.EditorUtility.SetDirty(gameObject);
17. 59            }
18. 60         }
19. 61      }
20. 62   }
21. 63   int mSortingLayerID;
22. 64
23. 65   public int sortingOrder
24. 66   {
25. 67      get
26. 68      {
27. 69         return mSortingOrder;
28. 70      }
29. 71      set
30. 72      {
31. 73         if (mSortingOrder != value)
32. 74         {
33. 75            mSortingOrder = value;
34. 76            
35. 77            if (mRen != null)
36. 78            {
37. 79               mRen.sortingOrder = mSortingOrder;
38. 80               UnityEditor.EditorUtility.SetDirty(gameObject);
39. 81            }
40. 82         }
41. 83      }
42. 84   }
43. 85   int mSortingOrder;

In public void Set (BetterList<Vector3> verts, BetterList<Vector3> norms, BetterList<Vector4> tans, BetterList<Vector2> uvs, BetterList<Color32> cols) I added after:

1. 363         if (mRen == null)
2. 364         {
3. 365            mRen = gameObject.GetComponent<MeshRenderer>();
4. 366         }
5.  

the lines:

1. 368         if (mRen != null)
2. 369         {
3. 370            mRen.sortingLayerID = sortingLayerID;
4. 371            mRen.sortingOrder = sortingOrder;
5. 372         }

And after:

1. 374         if (mRen == null)
2. 375         {
3. 376            mRen = gameObject.AddComponent<MeshRenderer>();
4.  

the lines:

1. 377            mRen.sortingLayerID = sortingLayerID;
2. 378            mRen.sortingOrder = sortingOrder;
3.  

Finally I added in UIPanelInspector.cs after:

1. 211      if (clipping != UIDrawCall.Clipping.None && !NGUIEditorTools.IsUniform(panel.transform.lossyScale))
2. 212      {
3. 213         EditorGUILayout.HelpBox("Clipped panels must have a uniform scale, or clipping won't work properly!", MessageType.Error);
4. 214        
5. 215         if (GUILayout.Button("Auto-fix"))
6. 216         {
7. 217            NGUIEditorTools.FixUniform(panel.gameObject);
8. 218         }
9. 219      }
10.  

the lines:

1. 221   int newSortingLayerId = EditorGUILayout.IntField("SOL ID", panel.sortingLayerID);
2. 222   if (newSortingLayerId != panel.sortingLayerID)
3. 223    {
4. 224         panel.sortingLayerID = newSortingLayerId;
5. 225         UnityEditor.EditorUtility.SetDirty(panel);
6. 226   }
7. 227
8. 228   int newSortingLayerOrder = EditorGUILayout.IntField("SOL Order", panel.sortingOrder);
9. 229    if (newSortingLayerOrder != panel.sortingOrder)
10. 230   {
11. 231         panel.sortingOrder = newSortingLayerOrder;
12. 232         UnityEditor.EditorUtility.SetDirty(panel);
13. 233    }
14.  
15.  

[ArenMook]

I don't know anything about this sorting feature, so can't say.

[mudart]

Faced with this problem. Found a simple solution.

1. File:UIDrawCall.cs
Added code:

1.    
2. public int sortingOrder
3. {
4.     get { if (mRenderer != null) return mRenderer.sortingOrder; else return 0; }
5.     set { if (mRenderer != null && mRenderer.sortingOrder != value) mRenderer.sortingOrder = value; }
6. }
7.  

2. File:UIPanel.cs Method:UpdateDrawCalls
/// Update all draw calls associated with the panel

Find a cycle update all drawCalls (NGUI v3.49, #1180 string)
dc.clipping = clipping; - etc

Added code:

1. if (dc.sortingOrder != depth) dc.sortingOrder = depth;

Now depth parameter is equivalent to the sort order.
Use sortable layers can be added to the panel, and similarly updated.

[ArenMook]

Can you explain your setup, mudart? (UIPanel settings, what you're trying to do, etc?)

[DEngland]

Thanks for the examples mudart. I needed to make a customization similar to this (except with sortingLayerID instead of sortingOrder).

In my case, I have a 2D isometric game where the user can pan and zoom the camera, and I need to have some UI elements which appear to be attached to objects in the world. I am tackling this by letting the game camera render those particular pieces of UI, which works fairly well and avoids the need for positioning/scaling them each frame as the camera is panned/zoomed, while also ensuring there is no positional lag when this happens.

The downside is that NGUI isn't really intended to be rendered by non-UI cameras and does not provide a way to control the sorting layer. With mudart's change to UIDrawCall I also added a public variable to UIPanel that lets my other scripts set the sorting layer, which allows me to properly control where it's drawn in by regular cameras.

[ArenMook]

As a note, 'sort order' is something you can set on the UIPanel in the current Pro version if the Render Q is set to Explicit.

[coeing]

@Clarens: Thanks for sharing your patch, I will try it in our project. We need to sort our NGUI elements with Spine models and some bitmap texts which are rendered by mesh renderers. I used the render queue before but in my opinion the sorting layers are a great way to achieve the sorting in a 2D game. Here is a good answer which explains the difference between the two: http://answers.unity3d.com/questions/671540/render-queue-vs-sorting-layer.html

@ArenMook: I'm sure there are many important features to add to NGUI, but it would be great to include the sorting layer property for UIPanels in one of the next versions

[ArenMook]

It has already been included over a month ago. As mentioned, you can specify  it on the panel when the render queue is set to explicit.

[coeing]

It has already been included over a month ago. As mentioned, you can specify  it on the panel when the render queue is set to explicit.

Yes, I saw the sorting order property. What I was talking about is the possibility to define the sorting layer as well.

[ArenMook]

I'll look into it some more when 4.5 is in a more stable beta.

[Benzino07]

Hi,

I see the mSortingOrder property has been added but I am still unable to get my UIPanels to draw over Unity's Sprite unless the sprite is on the Default Sorting Layer.

I've gone ahead and implemented a similar approach to DEngland by adding a public property to the UIPanel inspector so you can specify the SortingLayer, but was wondering if there is a more official approach so my changes are not lost after an update.

Thanks.

[ArenMook]

Hmm? You can already specify a sorting layer on the panels. It works best if you specify "Explicit" as the Render Queue however, as otherwise NGUI will keep changing draw queues on you.

[Benzino07]

Hmm? You can already specify a sorting layer on the panels. It works best if you specify "Explicit" as the Render Queue however, as otherwise NGUI will keep changing draw queues on you.

In 3.7.1? I see no option for sorting layer on UIPanel, only depth, Render Q and Sort Order. I've messed around with these, and it makes no difference, any Unity Sprite in a sorting layer that is not default will be drawn over it.