Auto Scroll To Selected Button in Grid When Outside Viewport

Question

I have a grid setup which has items spawned into it.

The items have a lambda expression on them that calls an EventTrigger when Selected, like so.

                 EventTrigger.Entry eT = new EventTrigger.Entry();
                 eT.eventID = EventTriggerType.Select;
                 eT.callback.AddListener((eventData) => { SnapTo(g.GetComponent<RectTransform>()); });
                 g.GetComponent<EventTrigger>().triggers.Add(eT);

I have a method SnapTo, which moves to the selected gameobject.

     public void SnapTo(RectTransform target)
     {
         Canvas.ForceUpdateCanvases();
 
         inventoryContentPanel.anchoredPosition =
             (Vector2)inventoryScrollRect.transform.InverseTransformPoint(inventoryContentPanel.position)
             - (Vector2)inventoryScrollRect.transform.InverseTransformPoint(target.position);
     }

However I'd like to only SnapTo when the selected item is outside the scroll views viewport, that's what makes it tricky. As if it's visible within the viewport and not being masked it should simply select it without scrolling.

Real Game Example : https://www.youtube.com/watch?v=k49kXZ2lFZs&ab_channel=AdamTheD

Is there an easy way to do this, or even an asset/plugin I can use instead?

EDIT : I found an easy way to tell if the selected object is outside of the viewport. Now I just need help figuring out how to push the out of view selection into view.

     public void SnapTo(RectTransform target)
     {
         int index = inventoryChildrenList.IndexOf(target.gameObject);
         RectTransform rect = inventoryChildrenList[index].GetComponent<RectTransform>();
         Vector2 v = rect.position;
         bool inView = RectTransformUtility.RectangleContainsScreenPoint(inventoryScrollRectTransform, v);
 
         if (!inView)
         {
 
         }
     }

Answer 1

Here is my solution for those struggling in the future... basically after you determine if it's visible with RectTransformUtility.RectangleContainsScreenPoint, you compare the last entry you had selected with the next entry you're selecting. If the next entry is higher up than the current one, move the content panel down. If it's lower, than move the content panel up.

     public void SnapTo(RectTransform target)
     {
             int index = inventoryChildrenList.IndexOf(target.gameObject); //Inventory Children List contains all the Children of the ScrollView's Content. We are getting the index of the selected one.
             RectTransform rect = inventoryChildrenList[index].GetComponent<RectTransform>(); //We are getting the RectTransform of the selected Inventory Item.
             Vector2 v = rect.position; //We are getting the Position of the Selected Inventory Item's RectTransform.
             bool inView = RectTransformUtility.RectangleContainsScreenPoint(inventoryScrollRectTransform, v); //We are checking if the Selected Inventory Item is visible from the camera.
 
             float incrimentSize = rect.rect.height; //We are getting the height of our Inventory Items
 
             if (!inView) //If the selected Item is not visible.
             {
                 if (oldRect != null) //If we haven't assigned Old before we do nothing.
                 {
                     if (oldRect.localPosition.y < rect.localPosition.y) //If the last rect we were selecting is lower than our newly selected rect.
                     {
                         inventoryContentPanel.anchoredPosition += new Vector2(0, -incrimentSize); //We move the content panel down.
                     }
                     else if (oldRect.localPosition.y > rect.localPosition.y) //if the last rect we were selecting is higher than our newly selected rect.
                     {
                         inventoryContentPanel.anchoredPosition += new Vector2(0, incrimentSize); //We move the content panel up.
                     }
                 }
             }
       
             oldRect = rect; //We assign our newly selected rect as the OldRect.
         }

Answer 2

Answer by a-fatin · Dec 02, 2021 at 06:22 AM

@Razputin Thanks for sharing your code here. I managed to get it to work with a few tweaks. Had to figure out how to do a few things with the EventTrigger first though but you really helped me. Really thank you.

Add comment · Share

Auto Scroll To Selected Button in Grid When Outside Viewport

2 Replies

Your answer

Follow this Question

Related Questions