UIPanel - Clipping Issues

[iretrograde]

Hey there guys,

I've been building my game for a little while and recently I ran into a problem after restructuring/cleaning my menus where the clipping is behaving differently than intended.

More importantly, it seems like objects aren't being clipped properly by the UIPanel and they are "bleeding over" the remaining UI items. I've already covered collision issues by making sure that important buttons and colliders, sit above objects that were clipped by the UIPanel.

The panel below is also a draggable panel, with the list being populated dynamically, properly hierarched in the tree in terms of parent/children and the parent most object has a collider with a UIDragPanelContents with it in order for the items to be draggable.

I've attached two images to show the issue. You can see that in the second image, the total player score sits at a higher z and layer than the game round summary table. But the clipped objects can still be seen above the background, defined by the dark grey area.

Please let me know if I can provide more information or what I should look into in order to try to resolve this issue.

Thanks a ton and cheers!

[ArenMook]

Clipped panels only work if shaders are supported. This means that if you're targeting mobiles, you need to target ARMv7 / GLES 2.0.

Clipped panels also only clip immediate children. Nested panels are not supported.

[iretrograde]

My Player Settings are targeting ARMv7 and my renderer is set to OpenGL ES 2.0

My score table is setup like the following, there is only 1 UIPanel for the whole table, and each entry is NOT an individual UI Panel. All of this has been working previously well. Is there a chance that my shaders got messed up?

-- Panel_GameRounds - UI Panel + UI Draggable Panel
-- ++ Table_RoundScores - UI Table
   -- ++TableEntry_0 -- Box Collider + UIDrag Panel Contents
      -- ++ Player1Score -- UILabel
      -- ++ Player2Score -- UILabel
      -- ++ Player1Word -- UILabel
      -- ++ Player2Word -- UILabel
      -- ++ TableBackground -- UISlicedSprite
      -- ++ GamePuzzleBoard -- UISprite
   -- ++TableEntry_1 -- Box Collider + UIDrag Panel Contents
      -- ++ Player1Score -- UILabel
      -- ++ Player2Score -- UILabel
      -- ++ Player1Word -- UILabel
      -- ++ Player2Word -- UILabel
      -- ++ TableBackground -- UISlicedSprite
      -- ++ GamePuzzleBoard -- UISprite

All of this sits within a GameRound_MenuPage gameobject that has a UIPanel that handles animating in, and contains other things like the Header, drag panel for moving the table around if there aren't enough items so the user can click on the grey area, OkButton, etc...

Once again, this was working well previously, but I've been restructuring a ton of my menus and this recently started happening. Hard Clip as well as soft clip, work on other areas. I've attached an image with the menu showing how soft clipping is working (you can notice the fade) but it still bleeds (due to no clipping) if nothing is above it on depth.

As you can notice, the game summary heading covers the bleeding on the top since those objects are higher up on the Z axis. I've also attached a picture of my menu structure.

From what I remember, clipping was working fine. I'm still aware of colliders not being clipped, and have been handling those cases properly by layering a "floor collider" between draggable panels and the rest of the menu.

[Nicki]

Disable depth pass.

[iretrograde]

Hey thanks a ton Nicki, that totally helped.

I read the FAQ by Aren and various info relating to depth pass and draw calls. Having said that, I'm still a bit confused as to which cases I should be enabling depth pass or not.

I did find a sample saying that enabling depth pass and clipping don't mix, what I'd like to understand is why.

[ArenMook]

Depth pass is only for one reason -- 3 UIs. If you don't understand something, don't use it.

[laurentl]

Clipped panels also only clip immediate children. Nested panels are not supported.

Example 7 scroll view contains nested element and works so what do you mean exactly by only immediate children ?

[Nicki]

Only widgets drawn by that panel. If there are other panels lower in the hierarchy, then THEY draw the widgets inside them instead - and thus won't be clipped.

[laurentl]

Cool, thanks. Going back to fixing scroll list

[iretrograde]

Aren, I've just been doing a ton of rework with menus to match your optimal suggested setup and just wasn't sure where I messed up. Thanks for the help for sorting this out.

Having said that, can you explain what you mean by 3 UI's? I've worked in games for years but have very little experience with rendering logic. I've done 3d programming in open gl and direct x even, I'm just haven't properly delved into ngui code to fully understand what's going on (I've done it in a lot of parts, having said that, I've been pushing to release my game and would love some help to sort these issues out).

I've been reading as much as possible and structuring my menu along the way to follow your guidelines for turning menus on/off, using NGUITools.SetActive, (Unity 3.5x), turning static off/on between updating data, and a bunch of other things to try to get things running more optimally (i.e. structuring my code to optimally update a facebook menu with 1000+ friends, f*** me).  Having said that, on my Kindle Fire things are running at about 20-30fps and there are several things that I'd love to ask more about but need to get the game bug free for a release before heading further into this.

If you can bear with me along the way and perhaps point me in the right direction as I go, I'd really appreciate it.

Cheers!

[Nicki]

He meant 3D UIs, where you can swivel and move in Z.

If you have 100+ friends on a list, you should seriously consider making it fill containers of friends so you have less active on the screen at any one point - because 1000 friends with 3-4 associated widgets will crash your app.

[iretrograde]

Ah cool, thanks Nicki.

I took a look at the other forum post here where someone created a solution for the drag panel with a list/grid that only uses a small number of objects n+2, where the 2 additional ones are used to load/clear a new user as the list is being scrolled through.

Still haven't implemented that solution, but at least I've tried it with a sizeable list of users and things didn't crash. Having said that, I also haven't loaded the user profile images into an atlas in order to show them, still a little Facebook icon for now.

[Nicki]

You'll probably not want that in an atlas if it's user generated, then you should use a UITexture and save them as textures - making atlases run time is not fun.

Of course, if you give them X avatars to choose from, then certainly into an atlas with them.