- Home /
How to solve event triggers blocking scrollview inputs in an inventory/menu?
I'm working on an inventory system. I'm done with most of the basic stuff but there are a few critical points that I'm unable to fix.
This is how my inventory looks like at the moment.
This is the object hiearchy in the canvas.
These are the attached scripts and components.
As you noticed if you have checked the hierarchy, the panel is inside a scroll view.
Problem 1
I'm populating the inventory slots dynamically inside a grid layout using one example slot object. If the player has 30 slots, a script creates 29 copies of it and adds them as siblings. Grid layout handles the positioning. If there are 100 slots some of them won't be able to fit into the screen and the user will have to scroll vertically to reach them. All my inputs are blocked by the items in front of the scrollview, therefore I can't scroll the panel. I was using buttons earlier and everything was fine but I had to use an event trigger instead to differentiate between pointer up and down events to handle dragging.
Problem 2
It's a similar issue with the first problem. Maybe I can even solve it on my own if the first one is solved but here it is. There are 4 tabs at the top. I want to be able to switch between 4 inventory tabs using these buttons and also swiping horizontally. Unlike the vertical scroll in a single tab, horizontal swipe should move to the next tab completely and not show half of a tab and half of the other.
For example, if the user is in equipment tab a vertical scroll down should move the inventory slots up as long as the scroll's length. However, a swipe to right in equipment tab, as long as it's half a screen long, should move the whole materials tab into the screen and move the old, equipment panel out.
Any kind of help/guidance is appreciated. Thanks!
Problem 1: I don't quite get it. Did you say everything worked fine when you were using buttons? In that case, what's the problem?
Problem 2: You could nest each tabbed view as an equally wide vertical scrollrect inside a horizontal scrollrect.
(Note: You will need to use a custom scroll rect script to handle nesting correctly. I've written one up that you can find here: https://forum.unity.com/threads/nested-scrollrect.268551/#post-3434275)
To make sure that the entire tab is changed when you swipe to either side, make sure to go to your horizontal scrollbar component under the scrollrect and set "Number of Steps" to the number of tabs you have.
Answer by moment_um · Jul 25, 2019 at 08:09 PM
I finally made an answer for this. Obviously years late, but Hopefully anyone else who stumbles upon this will find it helpful. Add this component to any GameObject with the EventTrigger:
using UnityEngine;
using UnityEngine.EventSystems;
public class PropogateDrag : MonoBehaviour{
public UnityEngine.UI.ScrollRect scrollView;
// Start is called before the first frame update
void Start()
{
EventTrigger trigger = GetComponent<EventTrigger>();
EventTrigger.Entry entryBegin = new EventTrigger.Entry(), entryDrag = new EventTrigger.Entry(), entryEnd = new EventTrigger.Entry(), entrypotential = new EventTrigger.Entry()
, entryScroll = new EventTrigger.Entry();
entryBegin.eventID = EventTriggerType.BeginDrag;
entryBegin.callback.AddListener((data) => { scrollView.OnBeginDrag((PointerEventData)data); });
trigger.triggers.Add(entryBegin);
entryDrag.eventID = EventTriggerType.Drag;
entryDrag.callback.AddListener((data) => { scrollView.OnDrag((PointerEventData)data); });
trigger.triggers.Add(entryDrag);
entryEnd.eventID = EventTriggerType.EndDrag;
entryEnd.callback.AddListener((data) => { scrollView.OnEndDrag((PointerEventData)data); });
trigger.triggers.Add(entryEnd);
entrypotential.eventID = EventTriggerType.InitializePotentialDrag;
entrypotential.callback.AddListener((data) => { scrollView.OnInitializePotentialDrag((PointerEventData)data); });
trigger.triggers.Add(entrypotential);
entryScroll.eventID = EventTriggerType.Scroll;
entryScroll.callback.AddListener((data) => { scrollView.OnScroll((PointerEventData)data); });
trigger.triggers.Add(entryScroll);
}
}
And then assign the scrollview you want to scroll in the editor. In the future, either try to use buttons, or make your own script that uses the Unity handler Interfaces (e.g. IPointerClickHandler)
Answer by hannabone3445 · Aug 22, 2021 at 08:18 PM
Hi! Hey! Perhaps you can find a solution to your problem here. Otherwise, you can find a lot of useful information here