Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

[Released] NGUI Infinite Pickers - A complete picker framework

Discussion in 'Assets and Asset Store' started by gregzo, Jul 9, 2013.

  1. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    NGUI Infinite Pickers 1.5
    Asset Store Link

    Video of the new WYSIWYG workflow

    v1.0 videos ( not WYSIWYG but similar workflow )
    Video - setting up a text picker
    Video - forwarding picker events
    Video - multiple widgets per picker element

    Requires the paid version of NGUI 3.x. NGUI 2.x compatible version available upon request.

    -A complete framework - pickers are entirely customizable.

    -Adjust widgets spacing, direction, pivot, color right in the editor - NGUI inspired WYSIWYG workflow ( new in 1.1 )

    -Momentum, auto-recenter

    -Recycles the minimum amount of objects - mobile friendly ( no instantiate or destroy )

    -Text, number, sprite, and date pickers

    -DateTime compound picker prefab included - set the date and time to now, or retrieve the selected date and time as a System.DateTime struct - supports 6 languages

    -Expandable picker included - less space, more choice

    -Horizontal and vertical

    -Scroll wheel

    -Insert new elements in a picker dynamically

    -Multiple, independent UISprite and UILabel widgets per picker element supported

    -Clean, documented C# code

    -IPForwardPickerEvents forwards OnSelectionStart, OnSelectionChange, OnRecenter and OnPickerStopped events via SendMessage : inspector friendly!

    -Whether you need 3, 5 or 11 visible elements, no need to build them all in the scene - Infinite Pickers will add the missing ones automaticaly when playing

    Please note that the example pickers provided are not meant to be used in actual projects, but to serve as templates for your much nicer designs.


    Future features

    The following features are planned - drop a line to let me know which one I should do first.

    -WYSIWYG editing through a custom inspector - Done in 1.1
    -More languages for the date picker
    -A nice, usable, iOS styled picker ( pickers in the demo scene use default NGUI assets )***
    -Other features, do suggest.

    *** Needs a designer - contact me if you feel up to the task [PAID JOB]
     
    Last edited: Jun 19, 2014
  2. Tapgames

    Tapgames

    Joined:
    Dec 1, 2009
    Posts:
    242
    This is what I need right now! :) any eta on the release and price?

    Cheers, Roy
     
  3. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Roy,

    Price : 15$

    Making tutorial videos now.

    I'll try to submit before tomorrow noon, if I can't make it, it'll have to be in a week ( holidays coming up ).

    Cheers,

    Gregzo
     
  4. Zeblote

    Zeblote

    Joined:
    Feb 8, 2013
    Posts:
    1,102
    I'd love a better UIInput. So you can copy/paste into it, move the cursor, highlight text etc just like a very basic text field. That's one thing NGUI does really lack. If you got some extra time maybe you could create that!

    Btw these widgets are really nice.
    I spent like 5 minutes scrolling the dates but it doesn't come to an end. what.
     
  5. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Zeblote,

    UIInput "enhanced" would be a totally different project, I'm trying to stay focused on delivering nice functional pickers here!
    I've seen a video, linked in the NGUI forum, of such an asset : blinking carat, click to reposition in UIInput, etc... Maybe it's out there already?

    About the date widget in Infinite Pickers : that's the whole point, dates are dynamically created using System.DateTime. Choose a min date, a max date, an init date ( including the user's "now" ), and that's what your picker will contain. For the same reason, it's really trivial to support more languages. Ask for one, and I'll include it! I suspect it won't handle arabic and chinese so well...
     
  6. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Submitted and uploaded the tutorial videos - see the first post of this thread.
     
  7. KyleStaves

    KyleStaves

    Joined:
    Nov 4, 2009
    Posts:
    821
    Any update on the availability of this plugin? Looks great, thanks!
     
  8. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Kyle,
    The asset is pending review. Hopefully any day now.

    Cheers,

    Gregzo
     
  9. Tapgames

    Tapgames

    Joined:
    Dec 1, 2009
    Posts:
    242
    Let's hope it will be reviewed soon :p
     
  10. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Yep, hope.

    Updated the OP with a "future features section" : let me know what I should prioritize!

    Gregzo
     
  11. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Released!
     
  12. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    1,051
    Bought!

    aaaaaaaaaaaaaaand (sorry)

    NullReferenceException: Object reference not set to an instance of an object
    IPCycler.Init () (at Assets/NGUIPickers/Scripts/b_OtherComponents/IPCycler.cs:124)
    IPPickerBase.Setup () (at Assets/NGUIPickers/Scripts/d_Internal/IPPickerBase.cs:61)
    IPPickerBase.Awake () (at Assets/NGUIPickers/Scripts/d_Internal/IPPickerBase.cs:49)


    on the demo, looks to be in the NumberPicker gameObject
    Looks to be the objects under the Cycler are missing Labels.

    EDIT:
    Fixed it. The problem is the NumberPicker in the demo is broken. If you replace it with a prefab NumberPicker it works fine.

    EDIT2:
    Something weird going on. If I replace it with the prefab it works. But close the scene (after saving) and reopen it the same error then pops up again on the NumberPicker.

    ty!
     
    Last edited: Jul 19, 2013
  13. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Sonicviz,

    Many thanks for buying!

    You're experiencing a script execution order bug that evaded my radar, apoligies. The fix is super easy :

    In Scripts/OtherComponents/IPCycler.cs, line 79, replace
    Code (csharp):
    1. _panel = _draggablePanel.panel;
    with
    Code (csharp):
    1. _panel = gameObject.GetComponent ( typeof ( UIPanel ) ) as UIPanel;
    UIDraggablePanel grabs it's reference to UIPanel panel in Awake, so if it hasn't executed yet when IPCycler's Awake happens, null ref...

    Incredibly, I never once experienced the null ref when working on this. Call it bad good luck!

    Update submitted.

    Cheers,

    Gregzo
     
  14. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    1,051
    Fixed. ty!
     
  15. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Update just accepted a minute ago, fixes the script execution order bug. Thanks Unity for the fast process!
     
  16. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Thanks to all of you who bought NGUI Infinite Pickers this week-end, I hope you find the asset useful.

    Good news : after a busy week-end, I'm getting ready to submit v1.1, which features custom inspectors and WYSIWYG editing right in the inspector. It should tremendously improve the workflow, making it more NGUI like.

    Cheers,

    Gregzo
     
  17. Boji

    Boji

    Joined:
    Jul 10, 2012
    Posts:
    44
    It would be great if you'd add an option for the picker to work like the one in Infinity Blade: http://www.youtube.com/watch?v=TtfsStjS9_4 , with:

    -horizontal and vertical swiping between items/lists
    -non-looping list
    -integrate a scroll bar for PC use
    -scale, opacity highlighting
     
  18. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Boji,

    Thanks for the suggestion, I'll see what I can do for the next update.
    If others request the same, I'll be sure to include these features.

    In the meantime, please note that you IPForwardPickerEvents provides SendMessage callbacks for when the picker starts to move, stops to move, and when the center element changes, which you can use to scale or fade items. Not exactly as in Infinity Blade, though...

    Cheers,

    Gregzo
     
    Last edited: Jul 22, 2013
  19. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    1,051
    Sounds like great enhancement.

    A pop up version triggered by button would be useful too.

    ty!
     
  20. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi SonicViz,

    By pop up version, do you mean that the picker should just appear at the press of a button ? Or scale into existence ? Or fade from 0 ?

    If it just needs to appear, the next update has you covered. Simply activate / deactivate the picker with NGUITools.SetActive.
     
  21. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    1,051
    Just some method to keep it minimised until a new selection needs to be made.
    If incorporated into a complex gui the picker by itself is too large, but works better as a popup.
     
  22. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Just posted a webplayer preview of v1.1, features opacity and scaling of picker items, as well as an expandable picker. Check the OP!

    Cheers,

    Gregzo
     
  23. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    1,051
    Nice. ty!
     
  24. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    v1.1 submitted, hopefully out by the end of the week. OP updated with a video demonstrating the new WYSIWYG workflow.

    Cheers,

    Gregzo
     
  25. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    1,051
    One UX problem I see with the expandable picker.
    When it’s collapsed the label is greyed out a little, which makes it hard to see.

    I think it's related to the Closed Panel Clipping on the PickerPopper, currently set at 60.
    Setting it above 100 starts to bring it back, but then the other selections show when the picker is closed.

    As it is likely to be an informational control it needs to be shown at full luminosity (if that’s the word, ie: not greyed out)

    ty!
     
  26. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Sonicviz,

    Indeed it has to do with clipping and clipping softness, on Cycler's UIPanel. The way the expandable picker works, the panel's clipping range is tweened along with the background sprite.

    Try playing with both PickerPopper's closedPanelClipping and UIPanel's softness - in the demo scene's expandable picker, the following values achieve what you want I think :
    On the cycler's UIPanel, softness to x = 20, y = 30
    In PickerPopper, closedPanelClipping = 65.

    Let me know if that works for you!

    Cheers,

    Gregzo
     
  27. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Expandable picker has been reworked, now includes new tweening scripts extending NGUI's UITweener : TweenPanelClipRange and TweenPanelSoftness. This makes new effects possible, as well as solves any issues with expandable pickers softness greying out widgets when collapsed. Will include these changes in next update, for now waiting for v1.1 to be accepted.

    Also, v1.1 features a new callback in IPForwardPickerEvents : onCenterOnChild notifies you when recentering kicks in, allowing for effects such as scaling or alpha tweening just as the picker starts to recenter on a widget ( after momentum has dropped enough ). It's used in the bark picker included in the demo scene ( see OP for webplayer ).

    Cheers,

    Gregzo
     
  28. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    v1.1 has just been accepted - WYSIWYG with custom inspectors are here!

    This update considerably improves the workflow, making it all the more NGUI like.
    It also includes 2 user requests : expandable picker, and a bark picker featuring alpha and scaling of selected elements - see the new demo scene.

    Cheers,

    Gregzo
     
  29. Ins116

    Ins116

    Joined:
    Jul 29, 2013
    Posts:
    6
    Hi, how to change the value spritenames?
    Doing so:
    this.GetComponent <IPSpritePicker> (). spriteNames [0] = "Apple"
    value changes, but the sprite remains the same.

    settings $Безымянный.png
     
    Last edited: Jul 29, 2013
  30. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Try ResetPicker after updating spritenames. Will be at work in a couple of hours, and will give you a more detailed reply then!

    Happy picking,

    Gregzo
     
    Last edited: Jul 30, 2013
  31. Ins116

    Ins116

    Joined:
    Jul 29, 2013
    Posts:
    6
    Thank you! this helped!
     
  32. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Ins116,

    I'm glad I could help.

    I noticed in your screenshot that you have the IPSpritePicker component placed on the same GameObject as the IPCycler. This will work fine but tends to crowd the inspector quite a lot. I strongly advise you, mainly for ease of use, to stick to the structure used in the prefabs :

    Parent picker GameObject has 1 or more picker scripts ( found in the "Main Picker Types" folder ) as well as IPForwardPickerEvents scripts if needed.
    Children always include a Background GameObject ( holding the background sprite and the selector sprite ), and a Cycler GameObject.
    That way, most interactions happen on the parent GameObject, and unless you need to add tweens, no component needs to be added to any of the children.

    I hope you enjoy the asset, and stay open to suggestions.

    Cheers,

    Gregzo
     
  33. _MGB_

    _MGB_

    Joined:
    Apr 24, 2010
    Posts:
    74
    Hi,

    Just bought this - having a slight problem...
    When I add the pickers to my scene I can't see any text on any of the controls at run-time. The text is visible in the editor and when paused, just not at run-time! The test scenes run fine.
    Have tried adding the controls to a panel, changing the label Z pos and depth etc, run out of ideas...

    NGUI v2.6.3, Pickers v1.1
     
  34. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi _MGB_,

    Are you using one of the prefabs as basis?

    And how is your NGUI UI structured?

    I've never had this issue, trying to fish for more details.
     
  35. _MGB_

    _MGB_

    Joined:
    Apr 24, 2010
    Posts:
    74
    Argh sorry, found the problem: the widgets were getting added to the default layer, not the NGUI one!
     
  36. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Ha! I'm glad you found the problem quickly. Let me know if you have any suggestions, I have a few tweaks to roll out ( in v1.11 ) soon and still have a bit of time to add features if they are universal enough.

    Cheers,

    Gregzo
     
  37. _MGB_

    _MGB_

    Joined:
    Apr 24, 2010
    Posts:
    74
    Hey Gregzo,

    Got a strange problem where I can't close the expandable picker if I've dragged the cycler.
    After a bit of debugging, it never gets past the line: while ( _waitBeforeClosing ) in ClosePicker(). Wondering if its a race condition somewhere..?
    Adding some debug logging, I see the _waitBeforeClosing flag gets set to true when I click to close, then never set to false.
     
  38. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi _MGB_

    What do you mean by dragged the cycler? Dragged whilst playing? If yes, with a UIDraggableObject component?

    There is no reason to drag the cycler itself. You can offset the widgets inside it using the picker inspector. The cycler itself should stay at Vector3.zero.

    You can definitely drag around the parent picker object, though.
     
  39. _MGB_

    _MGB_

    Joined:
    Apr 24, 2010
    Posts:
    74
    To clarify: I'm using the ExpandablePicker prefab. At run-time I click to expand it, then drag the cycler to a new value, then click to close. At that point it flashes and doesn't close.
     
  40. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Ok, sorry for the misunderstanding!
    The expandable picker has been completely reworked in v1.11, which I haven't submitted yet ( it's the only change so far... ). If you need it, I can mail you 1.11 directly - send me your email by PM.

    1.11 brings 2 new scripts extending NGUI's UITweener to tween clipping and clipping softness of UIPanel. Handy for the expandable picker. Also, a new OnPickerReleased callback popped into existence. I hope it fits your needs!
     
  41. _MGB_

    _MGB_

    Joined:
    Apr 24, 2010
    Posts:
    74
    PM sent - thanks for the fast support Gregzo!
     
  42. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Sent.
    You'll find the ExpandablePicker has changed quite a bit :
    On the PickerPopper object, you'll find a PickerPopper component where you can seperately adjust durations for scale tween and clipping tween, opening and closing the picker.
    The tweens work exactly like NGUI tweens ( they extend UITweener ), and can be found on the cycler object and the background sprite if you need to tweak easing and / or closed picker size.

    Happy picking,

    Gregzo
     
  43. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    v1.11 just submitted.
    If you are having trouble with the expanded picker and need a fix before the update gets accepted, PM me your email and your invoice nb.
    Happy picking,

    Gregzo
     
  44. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    v1.11 somehow became 1.2. Available now!

    Release notes :

    -2 new classes extend NGUI's UITWeener class : TweenPanelClipRange and TweenPanelClipSoftness. They work like any other NGUI tweeners.
    -PickerPopper modified to take advantage of this. Check the ExpandablePicker prefab in the demo scene.
    -IPCycler now has a recenterSpringStrength field.
    -IPSpringPanel script used in pickers instead of NGUI's SpringPanel - fixes an occasional bug with expandable pickers.
    -Pickers handle interrupted recentering more graciously.

    Happy picking,

    Gregzo
     
    Last edited: Aug 13, 2013
  45. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,462
    Gregzo,

    Nice picker, I've started to use it and was wondering how to drag and drop a selection from the picker to another gameObject.

    Thanks.
     
  46. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi rocki,

    I'm glad you're enjoying the pickers, and thanks for the interesting question!

    Pickers move on drag, so we would have to set some kind of threshold for when to disable picker movement and display a copy of the selected sprite / label.

    What exact behaviour do you have in mind? I've had a look and tested a little, it shouldn't be difficult to stop the picker as touch / mouse leaves it, and drag around a copy of the widget. It might look strange if the widget suddenly appears, so we might fade it in and tween it's position to the mouse / cursor's position intead.

    Do give more details!

    Happy picking and dropping,

    Gregzo
     
  47. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,462
    Gregzo,

    Let's take for example there are 2 pickers, one horizontal and one vertical. The user can drag a selection from the horizontal picker and drops it into a slot in the verticle picker. So in effect these picker components become Drag/Drop enabled. Another use case is to be able to drag and drop onto other components that are not pickers. If other components want to become receivers of a drag selection, then they will need a DragDropReceiver.cs component. This makes any GO able to receive a picker's drag selection. Ngui has some examples of drag/drop for some of the components. Adding Drag/Drop functionality to the pickers would really expand their usage.
     
  48. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,462
    A question that not related to the drag/drop.

    Is it possible to expand the area of mouse interaction. Currently, only from center highlighted selection/area can flick/scroll the picker. I would like the entire length or width of the picker to be exposed to the touch. I tried expanding the selector but it doesn't work.

    Edit: Looks like the examples are working like how I wanted. I was testing with the " SpritePickerScalingSelection" which seems to be able to flick from the center.
     
    Last edited: Aug 12, 2013
  49. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Hi Rocki,

    No problem to implement drag and drop, I was just wondering about the details. Dropping from a list to a picker is very straight forward, but dragging an element out of a picker is not, in terms of design choices, not in terms of coding. You'll notice that no NGUI example provides both drag and drop and draggable clipped panel.

    I'll try some things out, but would love to hear some suggestions.

    A few points that need to be addressed :

    -What is the trigger that differentiates "picking" from dragging something out of the picker?

    -It could simply be different colliders : if each element in the picker has it's own collider, that could work, but would make the picker less easy to use. When picking sprites, for example, sprites would have to be small enough that there is some space left around them to drag the picker, and not the element... Or a smaller collider could be positioned on the selected item only, with similar results.

    -Should the dragged element disappear from the picker it was dragged out of ? If yes, should it leave an empty slot or should the picker re-organize itself to adjust?

    Maybe I'm approaching this the wrong way, and should let users decide by only providing basic hooks, but how basic?

    I'll submit an update soon ( by the end of the week ), and will provide an example. Any suggestions will help shape how my example will work.

    Cheers,

    Gregzo

    P.S.: Do send me your email by pm, I'll send you an example before submitting.
     
  50. gregzo

    gregzo

    Joined:
    Dec 17, 2011
    Posts:
    795
    Sure, you'll find every picker has a collider on it's Background element. Select it to see in the scene view how big the collider is, and simply adjust it's scale as you see fit.

    You can also remove the collider altogether, if you wish to only manualy scroll the picker via buttons like in the v1.0 example scene.