Pan over an image like a map using scroll container in godot?

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By hamza_memon

I want to create a level select screen, the aspect ratio for my game screen is 5761024 and the image, I am using is 20482048. What I want is for the user to scroll the screen and navigate along the path to select levels. I know how to implement just horizontal or vertical scroll, but, for this one, I want the user to be able to scroll in every direction like a map. Can anyone suggest the node setup in the scroll container for that?

enter image description here
enter image description here1920×1080 219 KB

no Idea how to or if it is even possible to do this with scroll containers but I imagine it would be easier if you just made a seperat scene for the map and moved arround it using a kinematicbody. or just moving the camera directly.

zen3001 | 2020-04-26 20:49

2

try this

extends ScrollContainer
class_name PannableScrollContainer

# Internal info
# -- Dragging map
var click_start:Vector2 = Vector2.ZERO
var old_scroll:Vector2 = Vector2.ZERO

func _ready():
	# Hide scrollbar
	get_h_scrollbar().modulate.a = 0
	get_v_scrollbar().modulate.a = 0
	
	set_process(false)

func _gui_input(event):
	if Input.is_action_just_pressed("right_click"):
		click_start = get_global_mouse_position()
		old_scroll = Vector2(scroll_horizontal, scroll_vertical)
		set_process(true)
	elif Input.is_action_just_released("right_click"):
		click_start = Vector2.ZERO
		set_process(false)

func _process(delta):
	if click_start:
		var new_scroll:Vector2 = old_scroll + click_start - get_global_mouse_position()
		scroll_horizontal = new_scroll.x
		scroll_vertical = new_scroll.y