+1 vote

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?


Godot version 3.4.4
in Engine by (15 points)

2 Answers

0 votes
by (8,152 points)

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

0 votes

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[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. :)

by (2,154 points)
edited by
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.