Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: pek on February 08, 2013, 04:11:11 PM

Title: Scroll View (Clipped Panel) - Tutorial not very clear
Post by: pek on February 08, 2013, 04:11:11 PM
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):

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:

(http://i.imgur.com/bZ8xw59.png)

So, I'm definitely doing something wrong in my structure. Can somebody help me? Thank you in advance.
Title: Re: Scroll View (Clipped Panel) - Tutorial not very clear
Post by: ArenMook on February 09, 2013, 08:03:26 AM
Background needs to be outside your draggable list.
Title: Re: Scroll View (Clipped Panel) - Tutorial not very clear
Post by: pek on February 12, 2013, 11:27:23 AM
Quote from: ArenMook on February 09, 2013, 08:03:26 AM
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.
Title: Re: Scroll View (Clipped Panel) - Tutorial not very clear
Post by: Thurinus on February 12, 2013, 06:52:15 PM
So the typical setup I use would go something like this:

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 :)
Title: Re: Scroll View (Clipped Panel) - Tutorial not very clear
Post by: pek on February 13, 2013, 10:48:27 AM
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.

Quote from: Thurinus on February 12, 2013, 06:52:15 PM
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 :)
Title: Re: Scroll View (Clipped Panel) - Tutorial not very clear
Post by: ArenMook on February 13, 2013, 01:36:39 PM
Yes, the background will not scroll. You can't scroll sprites anyway.