How do I make an infinitely looping carousel scrollcontainer setup?

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

I am currently trying to make a carousel setup using the ScrollConatiner node with a VBoxContainer which holds 10 children all spaced out side by side. I want the ScrollContainer to repeat the children behind the first, so it’s not just a terminating list of objects within it. I’ve been searching for a while, but cannot find anything about making a carousel setup in Godot. The purpose of this is to simply make the list of 10 (or more depending on what I add later) to simply be an infinite loop so I can have a set of interactables look more interesting than just a bunch of static un-moving things.
I have never made one in any other language so I haven’t the slightest clue as to how to go about this setup.

I originally wanted to do a circular carousel setup, but I think starting with the basic linear looping one might help me get there.
Any help is much appreciated.

:bust_in_silhouette: Reply From: guacamolestash

Hi,

don’t know if you’re still looking for a solution but I came here to solve the exact same effect and ended implementing one myself.

So one way of doing it is to (by code) duplicate the first element of your list and add it again so the first and the last elements are the same.
Then, depending if the previous and next element you’re chosing in game, you can tween between the last and last+1 element (and vice versa).

In my exemple, it looks like this :

  • ScrollContainer
    • HBboxContainer
    • Item0
    • Item1
    • etc…
    • Tween

the script is attached to the ScrollContainer

onready var tween = get_node("Tween")
onready var child_count = get_node("HBoxContainer").get_child_count()
onready var img_size = get_node("HBoxContainer").get_child(0).get_texture().get_size()


func _ready():
	# duplicate first character to set him in front and back of carousel to create the effect
	var first_child = get_node("HBoxContainer").get_child(0)
	var new_last_child = first_child.duplicate()
	get_node("HBoxContainer").add_child(new_last_child)

to duplicate the first child.

# scroll te scrollcontainer when choosing an item
func roll(prev = 0, next = 0):
	var prev_pos
	var next_pos
	prev_pos = prev*img_size.x
	next_pos = next*img_size.x
	if prev == child_count-1 and next == 0:
		next_pos = (prev+1)*img_size.x
	elif prev == 0 and next == child_count-1:
		prev_pos = (next+1)*img_size.x
	tween.interpolate_property(self, "scroll_horizontal",
		prev_pos, next_pos, 0.1,
		Tween.TRANS_SINE, Tween.EASE_IN_OUT)
	tween.start()

if you want a VBoxContainer ans a vertical scroll effect, use the “y” value of img_size and interpolate the “scroll_verticall” in your tween.

have a nice day