4.3
Hello everyone,
I’m relatively new to the forum but have been working with Godot for a while. I’m currently working on a project where I need to arrange elements in an HBoxContainer along a curved path rather than in a straight line. Is this possible in Godot? If so, could someone guide me on how to achieve this or suggest any alternative approaches?
Thank you for your help!
Can you provide an example on how its supposed to look?
something like this:
You could do this with VBoxContainer’s inside of HBoxContainer and then put a Control Node with the correct size to align them in a curve shape
I was thinking the same thing too, but I want the element to also change its rotation along the curve tangent.
Then you could just rotate it according to its position
I dont think you could do that once you put it under hbox. the layout is locked under the parent
In code it should still work
It is too cumbersome to solve this using an HBox. I decided to code the positions instead. I’m bad at math, but somehow I managed to get it right.
extends Control
var radius: float = 300.0
var central_angle: float = 120.0
var start_position: Vector2 = Vector2(250,1500)
var gap_between_element: float = 20.0
func _ready():
arrange_elements($elementNode)
func arrange_elements(n : Control):
# Calculate the angular step
var our_child_count = n.get_child_count()
var step_angle = deg_to_rad(central_angle) / (our_child_count - 1)
# Position each element
for i in range(our_child_count):
var angle = -deg_to_rad(central_angle) / 2 + i * step_angle
var x = start_position.x + i * gap_between_element + radius * sin(angle)
var y = start_position.y + radius * -cos(angle)
var element = n.get_child(i)
element.position = Vector2(x, y)
# Rotate the element to face upward along the curve
element.rotation = angle
Hope the Godot developers can introduce a ‘Curve’ feature in the container.
Shaders might be able to do that actually, but gui-input wont work that way
I was actually looking for this exact thing so that I could make a fanned out hand of cards. Thanks for working out this solution!
Was there anything specific that you had to read or watch to come up with this solution? Im always interested in learning more.
Hi, I came up with this solution by visualizing it like this:
I then came up with the solution by identifying the pattern and finding a mathematical equivalent to it. Thinking about it again, it is actually simple. You just set up the pivot position and then code something like this:
for i in element.size() → rotate (angel * i)
You could adjust the pivot position & the angle to change how “curvy” your curve and how tight the gap between them.
Ah I see. Thanks! That’s a good way to visualize it. The idea of offsetting the pivot and just rotating from there makes it pretty intuitive 