Search Unity

UNITY UI Scroll through items one by one

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by Danirey, Jan 30, 2015.

  1. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    Hi,

    I'm wondering how can i make a scroll rect to stop on each item when dragging. I have all working great with the standard elastic movement, but i want to drag the list, and stop on the first item after the actual position in the drag direction. Maybe this is too complicated for me, but i could give it a try.:)

    Is this possible without dying in the process?? I suppose this will have some math involved , but i can't figure it out.

    Any idea?

    Thanks
     
  2. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    I made something similar, so it is possible :) I made it with inspiration from this post from the anwsers site:
    http://answers.unity3d.com/questions/776667/can-a-scroll-rect-snap-to-elements.html

    What I ended up with was for an inventory, where I have x rows, the scroller then scrolls to the point where the gesture (mobile in my case) places it - then it lerps the rest of the distance to the nearest "snap point".
     
  3. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    That's a great starting point! Thanks a lot @Ramsdal ;)

    Anyway it is a shame that unity doesn't include this feature…

    I'll try that ASAP!

    Cheers!
     
  4. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    There are some interesting approaches in that article @Ramsdal however, mostof them require using the EventTrigger component, which shouldn't be used unless you really need that level of flexibility.

    There is one example buried in there that shows how to implement the same effect using the Interface events, which would be my recommended approach.
    If I get the time I'll add an example of this to the UI Eextensions bitbucket repo - https://bitbucket.org/ddreaper/unity-ui-extensions
     
  5. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    Hi @SimonDarksideJ,

    Yes, it is a bit of a pain using the event trigger. I'm already using the interface events for every UI action i need.

    Have you guys had any problem getting generic reference of a panel Animator component to show it like a tooltip? I'm trying this using onPointerEnter and Exit to detect when the cursor is over a panel i want to show the info from. I've a tooltip panel with a simple fade out/in animation that will be trigged when the cursor enters another panel, but it only works with one at a time, and if i have 3 or 4, only works one and it is always the same one. If i disable that one, then works the next one. Weird, ….. I've double checked the code and there is only one explicit reference to the panel Animator component, so i don't know what's wrong. I don't have the code here, but i'll post it later to show you. It is very simple, and only have the OnPointerEnter and the OnPointerExit interfaces. When enters, then "tooltipAnimator.SetBool("SHOW", true);" I've placed debug logs everywhere to check what is wrong and it goes through this line of code but nothing happens….. This script is attached to each element in the scrollrect panel. It is a fixed number of slots inside the Scrollpanel. If i place the cursor over the first one it works. In the second slot, it enters the OnPointerEnter function right, but the animator never gets the Bool value….

    I'm pretty sure this is my fault with C#. I'm converting all the stuff i had for my game in JS to C. But the weird thing is that if this script is attached only to one panel, it works, so in theory, the code is right…..
     
  6. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    I did actually not know that event triggers is not optimal, thanks I will read up on that.. ;) However I ended up implementing mine with interfaces as well, for which I am now glad:
    Code (CSharp):
    1. VerticalScrollSnap : MonoBehaviour, IDragHandler, IEndDragHandler, IBeginDragHandler
    This is for my inventory which scrolls both horizontally and vertically (horizontal between categories and vertically between items). I have a simpler version for a "only vertical" scroller where the "IBeginDragHandler" interface can be omitted.
     
  7. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    Well,

    Solved the problem. Here is a script to show a window like a tooltip. Just in case it helps anyone!

    Code (CSharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3. using System.Collections;
    4. using UnityEngine.EventSystems;
    5.  
    6. public class UI_ITEM_SLOT_DATA : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
    7. {
    8.  
    9.         public GameObject itemHolderObject;//the item we want to show the info from...
    10.         public float delay = 2f;//the delay befor showing the panel
    11.         private bool count = false;
    12.         private float timer ;
    13.         private GameObject tooltipPanel;
    14.  
    15.        
    16.         void Awake ()
    17.         {
    18.                 tooltipPanel = GameObject.Find ("TOOLTIP_PANEL");//get the tooltip panel object
    19.  
    20.         }
    21.        
    22.         void Update ()
    23.         {
    24.                 //we use a delay counter to show only the tooltip if the mouse is "delay" seconds over it....
    25.                 if (Time.time > timer && count == true) {  
    26.                         fillInfo ();
    27.                 }
    28.  
    29.         }
    30.    
    31.         void IPointerEnterHandler.OnPointerEnter (PointerEventData data)
    32.         {
    33.                 //we are over the slot...
    34.                 if (this.itemHolderObject != null) {//If this slot has some item, then can show the tooltip!
    35.                         //start the counter to show the panel
    36.                         timer = Time.time + delay;
    37.                         count = true;
    38.                 }
    39.  
    40.         }
    41.        
    42.         void IPointerExitHandler.OnPointerExit (PointerEventData data)
    43.         {
    44.                 //reset the counter
    45.                 timer = 0f;
    46.                 count = false;
    47.                 //and hide the panel
    48.                 tooltipPanel.GetComponent<Animator> ().SetBool ("SHOW", false);
    49.  
    50.         }
    51.        
    52.         public void fillInfo ()
    53.         {                        //fiil the data in the panel...  
    54.                 GameObject.Find ("TT_ITEM_NAME").GetComponent<Text> ().text = itemHolderObject.GetComponent<ITEM> ().itemName;
    55.                 GameObject.Find ("TT_ITEM_DAMAGE").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().bulletAtts.baseBulletDamage.ToString ();
    56.                 GameObject.Find ("TT_ITEM_AMMO").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.currentBulletsInClip.ToString () + "/" + itemHolderObject.GetComponent<GUN> ().weaponAtts.bulletsPerClip.ToString ();
    57.                 GameObject.Find ("TT_ITEM_RANGE").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().bulletAtts.bulletRange.ToString () + " meters";
    58.                 GameObject.Find ("TT_ITEM_SHOT APS").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.shotAPcost.ToString () + " APS";
    59.                 if (itemHolderObject.GetComponent<GUN> ().weaponAtts.burstAPcost > 0)
    60.                         GameObject.Find ("TT_ITEM_BURST APS").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.burstAPcost.ToString () + " APS";
    61.                 else
    62.                         GameObject.Find ("TT_ITEM_BURST APS").GetComponent<Text> ().text = " -/-";
    63.                 GameObject.Find ("TT_ITEM_RELOAD APS").GetComponent<Text> ().text = itemHolderObject.GetComponent<GUN> ().weaponAtts.reloadAPcost.ToString () + " APS";
    64.                
    65.                 //now we have the data and show the panel
    66.                 tooltipPanel.GetComponent<Animator> ().SetBool ("SHOW", true);
    67.         }
    68.  
    69. }
    70.  
    And returning to the thread thing.. :p I'm finishing the script using interfaces. I'll post it in as soon as i finish it!
     
  8. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    Ok! I can't get it working. I just used the reference code and change the two functions (On drag and DragEnd) for the interfaces. I've this:
    Code (CSharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3. using System.Collections;
    4. using System.Collections.Generic;
    5. using UnityEngine.EventSystems;
    6. [RequireComponent(typeof(ScrollRect))]
    7.  
    8. public class SCROLL_STOP_BY_ITEM : MonoBehaviour,IDragHandler, IPointerUpHandler
    9. {
    10.  
    11.  
    12.         float[] points;
    13.         [Tooltip("how many screens or pages are there within the content (steps)")]
    14.         public int
    15.                 screens = 1;
    16.         [Tooltip("How quickly the GUI snaps to each panel")]
    17.         public float
    18.                 snapSpeed;
    19.         public float inertiaCutoffMagnitude;
    20.         float stepSize;
    21.    
    22.         ScrollRect scroll;
    23.         bool LerpH;
    24.         float targetH;
    25.         [Tooltip("Snap horizontally")]
    26.         public bool
    27.                 snapInH = true;
    28.    
    29.         bool LerpV;
    30.         float targetV;
    31.         [Tooltip("Snap vertically")]
    32.         public bool
    33.                 snapInV = true;
    34.    
    35.         bool dragInit = true;
    36.         int dragStartNearest;
    37.    
    38.         // Use this for initialization
    39.         void Start ()
    40.         {
    41.                 scroll = gameObject.GetComponent<ScrollRect> ();
    42.                 scroll.inertia = true;
    43.        
    44.                 if (screens > 0) {
    45.                         points = new float[screens];
    46.                         stepSize = 1 / (float)(screens - 1);
    47.            
    48.                         for (int i = 0; i < screens; i++) {
    49.                                 points [i] = i * stepSize;
    50.                         }
    51.                 } else {
    52.                         points [0] = 0;
    53.                 }
    54.         }
    55.    
    56.         void Update ()
    57.         {
    58.                 if (LerpH) {
    59.                         scroll.horizontalNormalizedPosition = Mathf.Lerp (scroll.horizontalNormalizedPosition, targetH, snapSpeed * Time.deltaTime);
    60.                         if (Mathf.Approximately (scroll.horizontalNormalizedPosition, targetH))
    61.                                 LerpH = false;
    62.                 }
    63.                 if (LerpV) {
    64.                         scroll.verticalNormalizedPosition = Mathf.Lerp (scroll.verticalNormalizedPosition, targetV, snapSpeed * Time.deltaTime);
    65.                         if (Mathf.Approximately (scroll.verticalNormalizedPosition, targetV))
    66.                                 LerpV = false;
    67.                 }
    68.         }
    69.        
    70.         void IPointerUpHandler.OnPointerUp (PointerEventData data)
    71.         {
    72.                 int target = FindNearest (scroll.horizontalNormalizedPosition, points);
    73.        
    74.                 if (target == dragStartNearest && scroll.velocity.sqrMagnitude > inertiaCutoffMagnitude * inertiaCutoffMagnitude) {
    75.                         if (scroll.velocity.x < 0) {
    76.                                 target = dragStartNearest + 1;
    77.                         } else if (scroll.velocity.x > 1) {
    78.                                 target = dragStartNearest - 1;
    79.                         }
    80.                         target = Mathf.Clamp (target, 0, points.Length - 1);
    81.                 }
    82.        
    83.                 if (scroll.horizontal && snapInH && scroll.horizontalNormalizedPosition > 0f && scroll.horizontalNormalizedPosition < 1f) {
    84.                         targetH = points [target];
    85.                         LerpH = true;
    86.                 }
    87.                 if (scroll.vertical && snapInV && scroll.verticalNormalizedPosition > 0f && scroll.verticalNormalizedPosition < 1f) {
    88.                         targetH = points [target];
    89.                         LerpH = true;
    90.                 }
    91.        
    92.                 dragInit = true;
    93.         }
    94.        
    95.         void IDragHandler.OnDrag (PointerEventData data)
    96.         {
    97.                 if (dragInit) {
    98.                         dragStartNearest = FindNearest (scroll.horizontalNormalizedPosition, points);
    99.                         dragInit = false;
    100.                 }
    101.        
    102.                 LerpH = false;
    103.                 LerpV = false;
    104.         }
    105.        
    106.         int FindNearest (float f, float[] array)
    107.         {
    108.                 float distance = Mathf.Infinity;
    109.                 int output = 0;
    110.                 for (int index = 0; index < array.Length; index++) {
    111.                         if (Mathf.Abs (array [index] - f) < distance) {
    112.                                 distance = Mathf.Abs (array [index] - f);
    113.                                 output = index;
    114.                         }
    115.                 }
    116.                 return output;
    117.         }
    I assume that "SCREENS" are the number of SLOTS in my case, right? I'm testing and no effect at all.

    Any idea? The scroll setup is the default plus the content object which in my case is a panel with 3child panels inside and an horizontal layout. Maybe with this code i should specify the content?

    Thanks!
     
  9. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    It took me a while to get something I liked too, so it might require a "few" tests to get it right. My class ended up beeing quite different than from the example given. But screens refer to the amount of "slides" if you will.
     
  10. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    Thanks, i'll keep trying. ;)
     
  11. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
  12. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    Sure, this is the simplified version for just vertical scrolling that can be modified as needed, I have another one for vertical & horizontal scrolling and category selection but it is somewhat bigger and more specific to the needs of my project. However this should get you started in the right direction.

    Please be aware that this could be categorized "work in progress", as such it is not optimized in any way ;)

    Edit: Upon skimming the code I see many things that could be changed, like the CalculateChildren method - the reason for this method is that the code is copied and adapted from the more complex class, where the layout of the children is not just one per row. It should be fairly simple to change it though :)

    Code (CSharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3. using UnityEngine.EventSystems;
    4. using System.Collections;
    5. using System.Collections.Generic;
    6.  
    7. [RequireComponent(typeof(ScrollRect))]
    8. public class LootVerticalScrollSnap : MonoBehaviour, IDragHandler, IEndDragHandler
    9. {
    10.     // The currently selected inventory "bag"
    11.     public Transform selectedInventoryPanel;
    12.  
    13.     //Top padding and vertical spacing between icons
    14.     public int paddingAndSpacing = 10;
    15.  
    16.     private int columnCount = 1;
    17.     private List<Vector3> scrollPositions;
    18.     private ScrollRect scrollRect;
    19.     private Vector3 verticalLerpTarget;
    20.     private bool isLerpingVertical;
    21.     private float scrollWidth;
    22.     private RectTransform childRect;
    23.  
    24.     void Start()
    25.     {
    26.         scrollWidth = (transform as RectTransform).sizeDelta.x;
    27.         scrollRect = gameObject.GetComponent<ScrollRect>();
    28.         scrollRect.inertia = false;
    29.         isLerpingVertical = false;
    30.  
    31.  
    32.         scrollPositions = new List<Vector3>();
    33.         CalculateChildren();
    34.  
    35.         childRect = (transform.GetChild(0).transform as RectTransform);
    36.         (selectedInventoryPanel as RectTransform).position.Set(0, 0, 0);
    37.     }
    38.  
    39.     void CalculateChildren()
    40.     {
    41.         scrollPositions.Clear();
    42.         if (selectedInventoryPanel.childCount > 0)
    43.         {
    44.             int screens = Mathf.CeilToInt((float)selectedInventoryPanel.childCount / (float)columnCount);
    45.             float imgSize = selectedInventoryPanel.GetComponent<GridLayoutGroup>().cellSize.y;
    46.          
    47.             for (int i = 0; i < screens; ++i)
    48.             {
    49.                 int add = paddingAndSpacing;
    50.                 if (i == 0)
    51.                 {
    52.                     add = paddingAndSpacing;
    53.                 }
    54.                 scrollPositions.Add(new Vector3(0, i * (imgSize + add), 0f));
    55.             }
    56.         }
    57.     }
    58.  
    59.     void Update()
    60.     {
    61.         if (isLerpingVertical)
    62.         {
    63.             selectedInventoryPanel.localPosition = Vector3.Lerp(selectedInventoryPanel.localPosition, verticalLerpTarget, 10 * Time.deltaTime);
    64.             if (Vector3.Distance(selectedInventoryPanel.localPosition, verticalLerpTarget) < 0.001f)
    65.             {
    66.                 isLerpingVertical = false;
    67.             }
    68.         }
    69.     }
    70.  
    71.     Vector3 FindClosestFrom(Vector3 start, List<Vector3> positions)
    72.     {
    73.         Vector3 closest = Vector3.zero;
    74.         float distance = Mathf.Infinity;
    75.  
    76.         foreach (Vector3 position in scrollPositions)
    77.         {
    78.             Vector3 pos = position;
    79.             if (Vector3.Distance(start, pos) < distance)
    80.             {
    81.                 distance = Vector3.Distance(start, pos);
    82.                 closest = pos;
    83.             }
    84.         }
    85.  
    86.         return closest;
    87.     }
    88.  
    89.     public void OnDrag(PointerEventData data)
    90.     {
    91.         isLerpingVertical = false;
    92.     }
    93.  
    94.  
    95.     public void OnEndDrag(PointerEventData data)
    96.     {
    97.         if (scrollRect.vertical)
    98.         {
    99.             verticalLerpTarget = FindClosestFrom(selectedInventoryPanel.localPosition, scrollPositions);
    100.             isLerpingVertical = true;
    101.         }
    102.     }
    103. }
     
  13. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Well as you said it's a start. Will add this to the collection (attributions included of course :D)
    if you make it better, you can always update the version on the BitBucket site
     
  14. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
  15. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    Ahh yeah i have seen that thread as well, there a quite a few good examples there. Just had a look at the bitbucket site, ill bookmark it for future reference ;) No need to reinvent the wheel if it is already made ;)
     
    SimonDarksideJ likes this.
  16. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    With the bitbucket site, I am doing a fair amount of additional work to make it a single project. So unifying namespaces, structures, etc. The focus is the scripts and the fabulous work everyone is contributing
     
  17. Danirey

    Danirey

    Joined:
    Apr 3, 2013
    Posts:
    520
    Ramsdal likes this.
  18. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Ramsdal likes this.
  19. BinaryX

    BinaryX

    Joined:
    Aug 4, 2014
    Posts:
    55
    @SimonDarksideJ That post on the answers site was the exact place where i started from as well when i made that horizontal scroll snap. It would be awesome if you can extend it even further to work for vertical snapping also. Thanks for the repo.
     
  20. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Reminds me, must log a proposal for the vertical one (my preference would be to extend the current one to handle vertical and avoid too many different controls)
    *Edit - added a new proposal on the repo
     
  21. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    The one I posted was with vertical scroll ;) so should be fairly straightforward to adapt it ;)
     
  22. Kerihobo

    Kerihobo

    Joined:
    Jun 26, 2013
    Posts:
    21
    Hi Ramsdal! Thanks for sharing your script, it worked great. I replaced the line that referrred to the GridLayoutGroup component with:

    Code (CSharp):
    1. float imgSize = selectedInventoryPanel.GetChild(0).GetComponent<LayoutElement>().preferredHeight;
    and applied VerticalLayoutGroup instead, it requires disabling ChildForceExpand width/height, and each child needing a LayoutElement component goes a long way to keeping all the elements at the size I really want them.

    I was REALLY STRUGGLING WITH SNAPPING!!!

    I can't thank you enough, a slight edit and this now does exactly what I want, thanks heaps!

    One thing I would like to implement would be to use up/down arrows to scroll as well. I already have a system for this but I will look at merging my system with yours a bit.

    I was originally achieving this same result by ignoring the uGUI interfaces and manipulating the pos.y property of the menuPanel with some retarded maths.
     
    Last edited: Feb 25, 2015
    twobob and Ramsdal like this.
  23. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    Glad you can use it :)

    This should be fairly simple to implement with a method that takes the current lerp target and find next or previous position and then reset the lerp target and enable lerping.
     
  24. Rotecks

    Rotecks

    Joined:
    Dec 17, 2014
    Posts:
    57
    @Ramsdal Hi. Thanks for your script)
    I'm trying to apply it to the panel with Scroll Rect component. Scroll Rect component contain in Content tab other panel that I want to scroll. When I press play Unity, all buttons at this panel changes positions and become not visible on current screen. How to use this script correctly?
     

    Attached Files:

  25. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    Can you post the code for HorizontalScrollSnap?
     
  26. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    I did post @Ramsdal s version of the horizontal scroll snap to the UI Extensions repo. Is this one much different?
     
  27. Rotecks

    Rotecks

    Joined:
    Dec 17, 2014
    Posts:
    57

    Attached Files:

  28. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    @Rotecks well that is.. not entirely correct ;)

    Actually I am not entirely sure what you are trying to do, is the intent to show one page with 3x4 levels, and then change to another page with 3x4 levels? In that case you would need to create one panel for each 3x4 levels and have the levels nested under the newly created panel. You would then be scrolling between the panels and since the levels are nested under the panel they would follow.

    Hope that made sense ;)
     
  29. Rotecks

    Rotecks

    Joined:
    Dec 17, 2014
    Posts:
    57
    @Ramsdal Thanks)
    It seems I misunderstood the purpose of the script. I wanted to make flipping between pages like in question here.
    I did not realize that you have offered to do in the previous post. Sorry(
    Thanks again:)
     
  30. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,185
    @Ramsdal You think you could PM your original script that supported more than one children per row?
     
  31. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    @Ben BearFish The one posted here is using gridlayout, so it should support x children per row (just not with horizontal scrolling). In the script above you would have to edit the column count variable, and maybe other places it has been a while since I last had a look at this.

    Or was it the horizontal scrolling you needed as well?
     
  32. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,185
    Yeah, I was hoping to have any layout, horizontal or vertical scrolling, with either 2 separate scripts, or a script where I could select horizontal or vertical and get the layout logic from that.
     
  33. Ramsdal

    Ramsdal

    Joined:
    Oct 18, 2013
    Posts:
    250
    I do not have that unfortunately, the more advanced script I was referring to is very customized for the particular needs in my project. But speaking very generally it is 4 containers that each scroll vertically (3 items in each row) and only one container is visible at a time, then it is possible to scroll between the for containers horizontally (actually this is not done with scrolling but with lerping).

    The linked script is only for vertical scrolling. If you would want one only for horizontal scrolling that should be fairly straightforward to make from the example above - the scroll positions would need to be adjusted. Unfortunately the example is not as general as it should be since it was build for the needs of my ui and only to test it so it has not been optimized and has since changed a bit.
     
  34. instruct9r

    instruct9r

    Joined:
    Aug 1, 2012
    Posts:
    121
    Hi guys. I have made a video tutorial relating how to make a ScrollRect to snap to UI Elements...

    I hope it will help you :)...

    Part 01:



    Part 02:
     
    Ghosthowl likes this.
  35. blamejane

    blamejane

    Joined:
    Jul 8, 2013
    Posts:
    226
    Thank you for this awesome video tutorial!! Can you post a sample project for download?

    I followed Part 01 and when I debug the GameController it prints the distance between buttons as 0, 328, 656, 984, and 1312; not the 0, 300, 600, 900, 1200 which shows in the video. Do you know why I'm getting the discrepancy?

    Edit: okay I see that the numbers (distance to center) for each button change as I scroll. But when I run the game without moving anything, my distance to center should be 0, 300, 600, 900, and 1200. But they aren't.

    Edit 2: Figured it out...I had to set the Canvas > UI Scale Mode to Constant Pixel Size, not Scale with Screen as the video shows. Not sure why it doesn't work like the video, but at least I'm getting 0, 300, 600, 900, and 1200 when starting the game.
     
    Last edited: May 24, 2015
  36. instruct9r

    instruct9r

    Joined:
    Aug 1, 2012
    Posts:
    121
    hi blamejane. You can see that i am doing everything from scratch in the tutorial. If you follow everything that i do exactly the same way, it shoud work as it does in the tutorial. I'm using Unity 5.1. Not sure if you use different version if something coud have been changed in the Editor, but it shoud work the same way..

    thanks
     
  37. blamejane

    blamejane

    Joined:
    Jul 8, 2013
    Posts:
    226
    thanks @instruct9r I was able to get it working. However I need to make one enhancement to the functionality here...

    I need the ability to have infinite scroll: If I have 5 buttons then when I get to the end of the 5th button, scrolling doesn't stop it just continues with button 1 in the position of button 6. I want button number 1 to be copied/moved to the end, effectively making it button 6, and the reverse of that if scrolling towards button 1.

    I'm having a heck of a time finding/creating the c# solution, so if anyone has come across a snapping to center infinite scroll, I'd really appreciate the link/help.
     
  38. SidarVasco

    SidarVasco

    Joined:
    Feb 9, 2015
    Posts:
    163
    I'm trying to use the Horizontal Scroll Snap from the extention repo but my content never aligns at the center, nor does it actually scroll to the next page it just goes halfway. Any anchor settings I have to keep in mind?
     
  39. Jakhongir

    Jakhongir

    Joined:
    May 12, 2015
    Posts:
    37
    @instruct9r the video is indeed VERY AWESOME, thanx for making that! I do also need that functionality as @blamejane, could you please give some advices how this can be achieved.
     
  40. instruct9r

    instruct9r

    Joined:
    Aug 1, 2012
    Posts:
    121
    Heya @Jakhongir @blamejane

    I've made part 3 explaining, how you can achieve this.



    Btw, you can use the tutorials specific thread, for adding comments and such: Tutorial Thread
     
    Jakhongir likes this.
  41. DottorFeelgood

    DottorFeelgood

    Joined:
    Jan 5, 2015
    Posts:
    5
    Hey check this out!

     
  42. instruct9r

    instruct9r

    Joined:
    Aug 1, 2012
    Posts:
    121
    @DottorFeelgood i don't get, what's the point of that video? It shows an asset functionality or?
     
  43. Jakhongir

    Jakhongir

    Joined:
    May 12, 2015
    Posts:
    37
  44. bao-tran

    bao-tran

    Joined:
    Dec 9, 2015
    Posts:
    5
  45. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Posted a comment on the YouTube video, asking the author if they would like to share the control with the UI Extensions Project. is that you @DottorFeelgood ?
     
  46. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    And they responded, so should hopefully see this component i the UI Extensions project soon. Fingers crossed :D
     
    bao-tran likes this.
  47. Jakhongir

    Jakhongir

    Joined:
    May 12, 2015
    Posts:
    37
    Hello, have you added it to the project, if yes where should I look. I cloned the project today from https://bitbucket.org/ddreaper/unity-ui-extensions, but could not find @DottorFeelgood's scroll staff.
     
  48. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    I got the code yesterday and began working on adding it. It needs a fair amount of work to turn it in to a UI component, should have an update soon.
     
  49. Jakhongir

    Jakhongir

    Joined:
    May 12, 2015
    Posts:
    37
    Ok, thanx.
     
  50. zero_null

    zero_null

    Joined:
    Mar 11, 2014
    Posts:
    157
    Is it possible to get the currently active item in the ScrollRect?
    I want the index of current selected item as I need to select next action upon clicking the item.

    Thanks.
     
unityunity