7. Scroll View (clipped panel) - Clip region change for Portrait / Landscape

[ImNotLost]

I created a scroll view like tutorial 7


List (gameObject)
 o UIPanel
   o Sliced Sprite (border) (UIStretch, UIAnchor, UIDragPanelContents, BoxCollider)
 o UIAnchor (Widget is Sliced Sprite (border) above
   o UIPanel, UIDraggablePanel
     o UIGrid
       o Elements...


I need this to work with various screen resolutions, e.g. Portrait / Landscape on the same phone as well as resolutions for different Android and iOS devices.

The problems are:

• The softclip region must be updated when switching between Portrait / Landscape
• The items in the grid must be re-positioned to be close to the border left, say 20 pixels off

How do I deal with these issues?

I added a script that changes the panel x position and the panel clip size but it does not play nice with the UIDraggablePanel script.

[ArenMook]

1. You have to adjust the soft clip range manually as there is no component to do that for you.
2. Set the soft clipping border X to 20.

[Codemeddler]

Hello,
What is the preferred way of changing the clip area on the fly? We are adjusting the clipping area on a proceduraly generated panel, and for some reason changing the clip area and size also affect the position of the panel. Is this the way it should work, or are we missing something? Also, we're running an oldish version of 2.1.6 if that matters.

So basically we reposition a draggable panel after filling it to be centered, then adjust the clip area to be in the middle of the panel, but this again moves the panel in the opposite direction. I've tried using UIDraggablePanel.ResetPosition and UIGrid.Reposition before and/or after the adjustments, but they didn't seem to help. So any suggestions?

Cheers,
-Tommi

[ArenMook]

When you say you're adjusting its position -- what do you mean? Generally clipped panels are "moved" by adjusting the clipping rectangle's center by +A, and transform by -A. This way the geometry actually stays in place and doesn't need to be rebuilt.

[Codemeddler]

Okay, let me explain more specifically.

We have the draggable panel vertically centered on the screen in the editor. It has an UIGrid element underneath, which is filled dynamically at runtime. This results in the first item in the UIGrid being in that middle of the screen position, which isn't what we want. So we adjust the position of the panel and move it up so that the middle of the UIGrid (CellCount/2) is showing in that center position. Since the clip area is still at the top of the panel, we adjust the clip area down to be at the center of the panel, but this results in the whole panel moving and the UIGrid isn't positioned in the middle anymore. We're kind of positive we're doing something the way it is not supposed to be done, hence the question about the preferred way of doing things.

And since (ASCII) images are worth more than thousand words, here's what we're trying to achieve (the number of cells can change, this is just to illustrate):

Legend: C = Clipped Grid Cell, G = Visible Grid Cell, [] = Draggable Panel
- Top of screen
[C]
[C]
[G]
[G] - Middle of screen
[G]
[C]
[C]
- Bottom of screen

And here is what we are getting by default:
- Top of Screen



[G] - Middle of screen
[G]
[G]
[C]
[C] - Bottom of screen
[C]
[C]

What we have after moving the panel:
- Top of screen
[G]
[G]
[G]
[C] - Middle of screen
[C]
[C]
[C]
- Bottom of screen

What we have after moving the clip area:
- Top of Screen




[C] - Middle of screen
[C]
[G]
[G]
[G] - Bottom of screen
[C]
[C]

If I recall correctly, trying to do the clipping area change first and the centering the panel after resulted in the clipping resetting to the top either when you started dragging or immediately, but if that is the correct order of doing this we have to examine what was actually happening again (the code for centering is currently commented out while we are working on snapping and wrapping for that panel as well).

Cheers,
-Tommi

[ArenMook]

Here's an obvious question... why not move the grid instead? Then you don't need to move the panel and its clipping. You can also use a table if you prefer. With a table, the origin point is in the top-left corner rather than the center of the first item like it is for the UIGrid. Might be easier for your logic.

[Codemeddler]

We actually tried that but there was some odd behavior happening with moving the UIGrid too. However, I found out we weren't actually running even the 2.1.6 version and apparently some trainees had been messing with the actual NGUI code, which probably caused all the issues. We updated to the latest version, and now all the draggable stuff is behaving as expected and even the SpringPanel now works (we had some odd problems with that one too). Sorry for the useless posts.

Cheers,
-Tommi