Incredible tutorial. Learned a ton about circle math. Improvement I would implement, to the other readers: Re-order the Line and Inner Circle drawing to happen later on in the _draw function so that they draw over top of the selection highlight. This will hide the jaggy edges of the highlight fill.
This is my favourite type of quick access menu, and this is a really good tutorial for it. Easy to understand, modular for variable numbers of selections, with very lovely code. Very much appreciated!
This is a very epic tutorial thank you!! I ended up using @export_range and set / get functions to reduce un-needed update events, the _input function for getting mouse and selection, signal passing the texture atlas, selection, and name values is also pretty handy when interacting with other UI elements
New to Godot _(for no reason in particular, cough cough),_ and I'm really enjoying it. I used Game Maker quite a bit as a teenager, and it gives me a similar feeling. I was really stoked when I heard it had its own coding language, since I remember GML being insanely easy to jump into & play around with -- it wasn't as simple as GML (I doubt _anything_ will be), but the whole package has been really easy to get acquainted with.
Really, really, and I mean it, REALLY great tutorial. So many uses. I was looking for something flexible like this for a very long time! Thank you so much. I'm gonna make some changes in my version, tho. Instead of atlas texture I want to implement the viewport so I can use 3D scenes with animations and stuff instead of just simple images. Don't know how to do that just yet (just finished watching your tutorial skipping the coding part with texture adjustment) but I think you gave enough explanation how to actually do this. Viewport, nevertheless, is nothing else but a texture (or can be one). Thank you very much!!!
I think I can call my attempt a success here. I was able to replace atlas texture used in this tutorial with Viewport Textures. I'm sure there is a better way to do this but if anyone's interested then here is how I've done it. Replace: @export var options : Array[WheelOption] with @export var options : Array[SubViewport] Add premade 'SubViewport' scenes with your 3D objects as children for 'selectionWheel.tscn' and add them to the array one by one. That's the biggest downside for this method, sorry. Now, in the code, instead of 'draw_texture_rect_region' use 'draw_texture_rect', like here: draw_texture_rect(options[0].get_texture(), Rect2(offset, SpriteSize), false) draw_texture_rect(options[i].get_texture(), Rect2(drawPos, SpriteSize), false) and move these lines to the bottom of this piece of code, like here: for i in range(1, len(options)): var startRads = (TAU * (i-1)) / (len(options) -1) var endRads = (TAU * i) / (len(options) -1) var midRads = (startRads + endRads) /2.0 * -1 var radiusMid = (innerRadius + outerRadius) /2
var drawPos = radiusMid * Vector2.from_angle(midRads) + offset
if selection == i: var pointsPerArc = 32 var pointsInner = PackedVector2Array() var pointsOuter = PackedVector2Array()
for j in range(pointsPerArc +1): var angle = startRads + j * (endRads - startRads) / pointsPerArc pointsInner.append(innerRadius * Vector2.from_angle(TAU -angle)) pointsOuter.append(outerRadius * Vector2.from_angle(TAU -angle)) pointsOuter.reverse() draw_polygon( pointsInner + pointsOuter, PackedColorArray([selectedColor]) ) draw_texture_rect(options[0].get_texture(), Rect2(offset, SpriteSize), false) draw_texture_rect(options[i].get_texture(), Rect2(drawPos, SpriteSize), false) I just hope YT will keep these paragraphs with proper formating. Moving 'draw_texture_rect' to the end of this loop will allow ViewportTextures to be rendered at the top of the radial menu. If someone want more clear way to see the code, here is the link to the pastebin: pastebin.com/W5VGBzCC I hope it will help someone. If you have any questions or have a better idea how to improve the way to do this, please reply. Thank you.
Excellent tutorial. Tell me something: how could it be done if there was a submenu for each menu option. For example, if I had an option in the menu to plant and I had 3 different types of seeds, and I had to choose one in particular, how would I do it? Would you subdivide each segment into three or make another arc in each segment? Could you give an example? Anyway, thank you very much.
Honestly I don't think radial menus would work very well for that sort of UX no matter how you implement it. They're much better for "quick access" of limited options. For something with layers like that, you'll probably want to do a more traditional UI of some sort, then maybe add PopUp sub-menus on top of that for the sub-types?
Amazing tutorial, just what I needed. I only have one question, any reason you didn't use custom resources for the wheel options instead of a custom class? Can it work? Is it better or worse?
The drawing should work, but you'll need to replace the mouse angle calculation code with analog stick code. I haven't worked with controllers in Godot before so I can't give code snippets for it, but theoretically the math should be much simpler, as an analog stick should just allow you to get the angle directly.
Incredible tutorial. Learned a ton about circle math.
Improvement I would implement, to the other readers: Re-order the Line and Inner Circle drawing to happen later on in the _draw function so that they draw over top of the selection highlight. This will hide the jaggy edges of the highlight fill.
Dude, I liked your video and I will be implementing it this weekend, but it's your 3 circles at 10 minutes in that earnt you the subscribe...
Thanks for the feedback! As a creator, it's really great to hear what does and doesn't stick out to the audience about different videos!
Thanks a lot! The video is great and the things i liked the most about your video is that it is direct to the point. Keep it up
Dude this is fucking amazing tutorial. Working on my game for quite some time now. And some things you shown there are just super sweet! Huge thanks.
I ended up not using your solution, but building my custom one. But it's still a great tutorial! Well done :)
This is my favourite type of quick access menu, and this is a really good tutorial for it. Easy to understand, modular for variable numbers of selections, with very lovely code. Very much appreciated!
Took me 2 hours to make it ))) thanks. Next will make it as a touch button selections
This is a very epic tutorial thank you!! I ended up using @export_range and set / get functions to reduce un-needed update events, the _input function for getting mouse and selection, signal passing the texture atlas, selection, and name values is also pretty handy when interacting with other UI elements
Man, that's really great tutorial
Thank you so much for this insanely good tutorial, i was able to make a fortune wheel thanks to that :)
Excellent. This also teaches other features of Godot.
Great tutorial! It was exactly what I was looking for!
Hey! This wheel addon is really cool. I'm using it in a game I'm working on, thanks for making it! :)
great video, no questions left open - you have a new subscriber :)
New to Godot _(for no reason in particular, cough cough),_ and I'm really enjoying it. I used Game Maker quite a bit as a teenager, and it gives me a similar feeling. I was really stoked when I heard it had its own coding language, since I remember GML being insanely easy to jump into & play around with -- it wasn't as simple as GML (I doubt _anything_ will be), but the whole package has been really easy to get acquainted with.
Welcome to Godot! Glad you're enjoying so far!
You are a great person
Thanks!! Now I just need to make a few slight changes so it fits my game :)
Really, really, and I mean it, REALLY great tutorial. So many uses. I was looking for something flexible like this for a very long time! Thank you so much. I'm gonna make some changes in my version, tho. Instead of atlas texture I want to implement the viewport so I can use 3D scenes with animations and stuff instead of just simple images. Don't know how to do that just yet (just finished watching your tutorial skipping the coding part with texture adjustment) but I think you gave enough explanation how to actually do this. Viewport, nevertheless, is nothing else but a texture (or can be one).
Thank you very much!!!
I think I can call my attempt a success here. I was able to replace atlas texture used in this tutorial with Viewport Textures. I'm sure there is a better way to do this but if anyone's interested then here is how I've done it.
Replace:
@export var options : Array[WheelOption]
with
@export var options : Array[SubViewport]
Add premade 'SubViewport' scenes with your 3D objects as children for 'selectionWheel.tscn' and add them to the array one by one. That's the biggest downside for this method, sorry.
Now, in the code, instead of 'draw_texture_rect_region' use 'draw_texture_rect', like here:
draw_texture_rect(options[0].get_texture(), Rect2(offset, SpriteSize), false)
draw_texture_rect(options[i].get_texture(), Rect2(drawPos, SpriteSize), false)
and move these lines to the bottom of this piece of code, like here:
for i in range(1, len(options)):
var startRads = (TAU * (i-1)) / (len(options) -1)
var endRads = (TAU * i) / (len(options) -1)
var midRads = (startRads + endRads) /2.0 * -1
var radiusMid = (innerRadius + outerRadius) /2
var drawPos = radiusMid * Vector2.from_angle(midRads) + offset
if selection == i:
var pointsPerArc = 32
var pointsInner = PackedVector2Array()
var pointsOuter = PackedVector2Array()
for j in range(pointsPerArc +1):
var angle = startRads + j * (endRads - startRads) / pointsPerArc
pointsInner.append(innerRadius * Vector2.from_angle(TAU -angle))
pointsOuter.append(outerRadius * Vector2.from_angle(TAU -angle))
pointsOuter.reverse()
draw_polygon(
pointsInner + pointsOuter,
PackedColorArray([selectedColor])
)
draw_texture_rect(options[0].get_texture(), Rect2(offset, SpriteSize), false)
draw_texture_rect(options[i].get_texture(), Rect2(drawPos, SpriteSize), false)
I just hope YT will keep these paragraphs with proper formating.
Moving 'draw_texture_rect' to the end of this loop will allow ViewportTextures to be rendered at the top of the radial menu.
If someone want more clear way to see the code, here is the link to the pastebin:
pastebin.com/W5VGBzCC
I hope it will help someone. If you have any questions or have a better idea how to improve the way to do this, please reply.
Thank you.
@@WoYoSenseiPL hey hi, This way, how is the code, how does the texture work, since it gives an error...
thank you so much
Excellent tutorial. Tell me something: how could it be done if there was a submenu for each menu option. For example, if I had an option in the menu to plant and I had 3 different types of seeds, and I had to choose one in particular, how would I do it? Would you subdivide each segment into three or make another arc in each segment? Could you give an example? Anyway, thank you very much.
Honestly I don't think radial menus would work very well for that sort of UX no matter how you implement it. They're much better for "quick access" of limited options. For something with layers like that, you'll probably want to do a more traditional UI of some sort, then maybe add PopUp sub-menus on top of that for the sub-types?
@@squadron_studio Yes, it's a good option. Thanks.
Amazing tutorial, just what I needed. I only have one question, any reason you didn't use custom resources for the wheel options instead of a custom class? Can it work? Is it better or worse?
The wheel_option class extends AtlasTexture which is a Resource! So we are actually using a custom resource here, just not with the name Resource.
any ideas why using C# apearence of scene doesnt changes when i change values in editor?
nwm. Its just randomly starts working without any changes
is this usable with an analog stick on a controller?
The drawing should work, but you'll need to replace the mouse angle calculation code with analog stick code. I haven't worked with controllers in Godot before so I can't give code snippets for it, but theoretically the math should be much simpler, as an analog stick should just allow you to get the angle directly.
@@squadron_studio thanks, i will research just that