How to do circular scrolling?

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

Hello,
I’d like to make a circular scroll for a chapter selection screen.

Here’s an example (timestamp 0:45):

Basically adding a “path” for the scrolling to follow instead of it just being horizontal or vertical.

The current scroll container doesn’t have any option like this, is there any workarounds?

Thanks!

:bust_in_silhouette: Reply From: exuin

You will have to make a custom container.

I mean ok but if I asked it’s that I don’t know how to program this kind of custom stuff…

Lulullia | 2022-06-14 16:33

:bust_in_silhouette: Reply From: DaddyMonster

Nothing inbuilt but that can be done pretty easily. First make a scene with Node2D root - let’s call it “Pivot”.

Now make another scene “Element”, add a node2D root again and give it a script and a ColorRect child (or whatever you want to use as containers).

Our mission now is to spawn the elements and position them in a circle around the axis. Here’s the Axis script:

var element_scene = preload(your_scene_path)
var element_count = 10
var elements = []
var radius = 100

func _ready():
    for i in element_count:
        elements.append(element_scene.instance())
        add_child(elements[i])
        elements[i].rotate((2*PI/element_count)*i)
        elements[i].position.y += radius

Code untested and written veeeeeery quickly.

Now on the element script add a _process() method with a look_at() method depending on what you want it to do.

The next thing is adding the mouse control. Check when the player clicks and then the mouse movement on the y can spin the axis. There are many ways to skin that cat, have a play with what works best. I’d add a nice fade in and out maybe depending on the rotation; make it look pretty. :slight_smile: