Swipe function with Scroll

D-Ring

Ive put a scroll container in one of my popup windows (for a store) and everything works fine except have to grab the scroll bar to move it and cant just swipe with touch/mouse.

Also is there a setting to dim the screen behind a popup or do i just need to put a modulated canvas layer that gets turned on/off with all popups

TwistedTwigleg

@D-Ring said: Ive put a scroll container in one of my popup windows (for a store) and everything works fine except have to grab the scroll bar to move it and cant just swipe with touch/mouse.

You may be able to implement swipe with touch/mouse using the _gui_event function. In theory, the code would look like this:

var scroll_container;
const SCROLL_SENSITIVITY = 2;
var mouse_button_down = false
func _ready():
	scroll_container = get_node("scroll_container");
func _gui_event(event):
	
	# Check whether the left mouse button is pressed...
	if (event is InputEventMouseButton):
		if (event.button_index == BUTTON_LEFT):
			mouse_button_down = event.pressed;
	
	# Scroll with the mouse
	if (event is InputEventMouseMotion and mouse_button_down == true):
		scroll_container.scroll_vertical += event.speed
	
	# Scroll with touch
	if (event is InputEventScreenDrag):
		scroll_container.scroll_vertical += event.speed

Though I have not tested the code, but that is more or less what I would try to do if I was going to implement swipe controls for scrolling. Hopefully it helps :smile:

Also is there a setting to dim the screen behind a popup or do i just need to put a modulated canvas layer that gets turned on/off with all popups

Unfortunately I do not think there is anyway to dim the screen behind a popup. I've always just used a semi-transparent Panel/ColorRect behind the popup, and/or a CanvasLayer, when I need to dim the screen.

D-Ring

Ok so attach this to a script for the popup window that contains the scrollcontainer should do the trick then right?

TwistedTwigleg

@D-Ring said: Ok so attach this to a script for the popup window that contains the scrollcontainer should do the trick then right?

Yeah. Assuming the code works, which it may not given I have not tested it, then all you should need to do is attach the script to the popup window.

Thinking about it though, you may want to attach the script directly to the ScrollContainer so when the scroll container receives input events then it will catch it. If you want to try it directly on the ScrollContainer, you just need the scroll_container variable in the script above with self. To be honest though, I have no idea if that would be better or worse though.

D-Ring

Got this working and had to make a few changes. The speed.x for ScreenDrag seems to wait till the end of the drag so was always returning 0...however the relative vector for the drag updates constantly and can be used to get the desired effect. So this is my final code:

const SCROLL_SENSITIVITY = .03;

var mouse_button_down = false

onready var scroll_container = $ScrollContainer

func _on_Subscription_pressed():
	print("Pressed")


func _on_ScrollContainer_gui_input(event):
	if (event is InputEventMouseButton and event.button_index == BUTTON_LEFT):
		mouse_button_down = event.pressed;
	if (event is InputEventMouseMotion and mouse_button_down):
		scroll_container.scroll_horizontal -= event.speed.x * SCROLL_SENSITIVITY
	if (event is InputEventScreenDrag):
		scroll_container.scroll_horizontal -= event.relative.x

One thing of note for anyone doing this, for all the children in your scroll container you need to change the mouse_filter to pass. This allows it to still be clicked in the case of buttons but will pass the touch event to the scroll container so it will still scroll.

TwistedTwigleg

@D-Ring said: Ok so got it working on the computer, but doesnt work for touch events, Heres my code so far:

const SCROLL_SENSITIVITY = .03;

var mouse_button_down = false

onready var scroll_container = $ScrollContainer

func _gui_input(event):
	if (event is InputEventMouseButton and event.button_index == BUTTON_LEFT):
		mouse_button_down = event.pressed;
	if (event is InputEventMouseMotion and mouse_button_down):
		scroll_container.scroll_horizontal -= event.speed.x * SCROLL_SENSITIVITY
	if (event is InputEventScreenDrag):
		scroll_container.scroll_horizontal -= event.speed.x * SCROLL_SENSITIVITY

Do I need to change something in the project settings input mapping to get touch to work?

I do not think so, but to be honest I have not really done a lot of mobile work with Godot.

Looking at this QA post, maybe you need to replace event.speed with event.relative? Other than that, I really do not know and unfortunately searching on the internet is not yielding any really useful results (at least for me).

I really do not know to be honest, sorry.