Scroll View (Clipped Panel) - Tutorial not very clear

[pek]

Hi,

I've been trying to figure out how to create a basic scroll view but the tutorial isn't clear enough. I don't really understand how exactly should I structure my game objects. The Scoll View (secondary camera) is even more vague.

Let's assume that there is nothing in the scene but the very basic setup NGUI creates when clicking Create new UI.

Here is the hierarchy of game objects in my scene (under UIRoot -> Camera -> Anchor -> Panel):

• Anchor
  Components: UIAnchor (x offset 0.25)
  
  • ScrollView
    Components: UIPanel (Hard Clip), UIDraggablePanel (Scale: 0,1,0)
    
    • Contents
      Components: UIGrid, UIDragPanelContents, BoxCollider
      
      • SlicedSprite
        
      • SlicedSprite
        
      • SlicedSprite
        
    • Background
      Components: UIStretch, UITiledSprite
      

The problem with this setup is that the background is dragged along with the Contents game object. I assumed it's because ScrollView has the UIDraggablePanel component, so it drags all the children. However, I can't think of how to avoid that. If I move it to the Contents, where does the UIDragPanelContents go?

Another problem is the Sliced Sprites. For some reason, when Contents' transform is at (0,0,0), the SlicedSprites start at the middle of the scroll view, not at the very top. And, when I add a collider to the Contents, it's center is the center of the SlicedSprites, not (0,0,0). The weird thing is that the game object that actually is being dragged, is the ScrollView, so I can't offset the Contents game object to fix this. Also, once I drag it once, the contents return at the very top, even though that was not their original position! Here is a screenshot of that:



So, I'm definitely doing something wrong in my structure. Can somebody help me? Thank you in advance.

[ArenMook]

Background needs to be outside your draggable list.

[pek]

Background needs to be outside your draggable list.

So, in the Anchor? How am I then going to fill the background of the list? UIStretch doesn't work.

[Thurinus]

So the typical setup I use would go something like this:

• Dialog Container
  Components: can have UIPanel, but not necessary
  
  • Background
  • ScrollableHitZone
    Components: BoxCollider, UIDragPanelContents (draggable panel targeting ScrollablePanel below)
    
  • ScrollablePanel
    Components: UIPanel, UIDraggablePanel
    
    • Grid
      Components: UIGrid
      
      • UIElement
      • UIElement
      • UIElement

In your case, I think you should have a containing GameObject between Anchor and ScrollView the way I have Dialog Container, and have the background as a child of that GameObject to achieve the result you want. Hope I'm interpreting your question correctly

[pek]

Thanks for the suggestion, but isn't that setup going to fill the dialog background and not the scroll view background? I'm looking for a way to have a different background for my scroll view than the one in the dialog without having to specify width and height.

Thanks.

So the typical setup I use would go something like this:

• Dialog Container
  Components: can have UIPanel, but not necessary
  
  • Background
  • ScrollableHitZone
    Components: BoxCollider, UIDragPanelContents (draggable panel targeting ScrollablePanel below)
    
  • ScrollablePanel
    Components: UIPanel, UIDraggablePanel
    
    • Grid
      Components: UIGrid
      
      • UIElement
      • UIElement
      • UIElement

In your case, I think you should have a containing GameObject between Anchor and ScrollView the way I have Dialog Container, and have the background as a child of that GameObject to achieve the result you want. Hope I'm interpreting your question correctly

[ArenMook]

Yes, the background will not scroll. You can't scroll sprites anyway.