Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Turnip on January 09, 2013, 08:26:45 AM

Title: Cover Flow Style Scrolling Panel
Post by: Turnip on January 09, 2013, 08:26:45 AM
I am trying to setup a scroll view that looks like the cover flow on itunes, but I am not sure where to start. I have looked at the Scroll view scenes but I am still stuck.

Is there a better example, or tutorial that will point me in the right direction.

Thanks

(http://www.koupoukis.gr/wp-content/uploads/HLIC/askdavetaylor.com/0-blog-pics/itunes-7-cover-view.png)
Title: Re: Cover Flow Style Scrolling Panel
Post by: Turnip on January 10, 2013, 03:30:48 AM
Has anyone got any ideas? Seems like it should be possible to do but I am not sure how to start.
Title: Re: Cover Flow Style Scrolling Panel
Post by: ArenMook on January 10, 2013, 01:25:40 PM
Each of chose squares would be a different panel, and you would be moving panels in such a way that makes the tilt. I can't really suggest much else as this is highly app-specific, and not really related to NGUI at all. I think the closest example to this in NGUI would be the menu example with how the windows move there.
Title: Re: Cover Flow Style Scrolling Panel
Post by: FWCorey on January 14, 2013, 11:25:33 PM
If this is for a commercial project there may be trademark issues as well if it's being released in the U.S. market. Apple is a fairly litigious company and they have at least 2 trademarks on "Cover Flow" as a user interface design that I'm aware of.
Title: Re: Cover Flow Style Scrolling Panel
Post by: Turnip on January 19, 2013, 04:32:11 PM
Thanks for the replies. If there could be issues with the cover flow with Apple then I best just change my approach I think and just go for something simpler.

Thanks
Title: Re: Cover Flow Style Scrolling Panel
Post by: marasto on January 20, 2013, 09:10:11 AM
If u really need something like this there are 2/3 example. Check this for example (NGUI used for the slider)
http://game.ceeger.com/forum/read.php?tid=1411 (http://game.ceeger.com/forum/read.php?tid=1411)

But give some idea
Title: Re: Cover Flow Style Scrolling Panel
Post by: UIGuy on July 16, 2014, 06:05:38 PM
Each of chose squares would be a different panel, and you would be moving panels in such a way that makes the tilt. I can't really suggest much else as this is highly app-specific, and not really related to NGUI at all. I think the closest example to this in NGUI would be the menu example with how the windows move there.

Hi, new here and I'm a UI Artist, not a programmer. Often these little things stop an artist dead in his tracks and require help from a programmer. But I would like to suggest that this kind of perspective/scale/position change would be super handy for scrollviews in a 3D UI. You have provided Window Auto-Yaw, which is along these lines, but not configurable for an artist, and it's relative to the sides of the screen. I would prefer a solution that transforms the child relative to its position within the scrollview, i.e. distance from center of scrollview.

In my dreams, there is a script called "GridForScrollviews" that handles this. (This script could be automatically added when the UI Scrollview script is added.) It might look like the attached mockup. This also facilitates a lot of possibilities that don't look like Apple's solution.



Title: Re: Cover Flow Style Scrolling Panel
Post by: Nicki on July 16, 2014, 06:13:04 PM
@UIGuy, that sounds like a fairly simple thing to actually make. What you really only need is the position of the individual element and the position of the scroll view, then you can calculate how far from the visual center you are, to do "your thing".

I think from NGUI's perspective, the best thing would be to make those values available in an easily digestible manner, so custom implementations could be based on those values, instead of the specific solution you suggest in your picture.

I'll mull on how this can be done in a nice manner, but no promises (I'm on summer holiday, I'm just bored right now.. ;) ).
Title: Re: Cover Flow Style Scrolling Panel
Post by: UIGuy on July 17, 2014, 04:34:29 PM
@Nicki – Thanks for a fast response. Today I thought of an even simpler way this might work:

Tweens Section on GridForScrollViews – Specify Tweens that are played forwards/backwards as child moves closer to/further from center. This would work well with existing NGUI tween scripts.