Page 1 of 1

Circular menu

Posted: Thu Mar 22, 2018 12:53
by Anasky
Heya,

I'm currently trying to implement a circular menu, but for that I need to display a certain curved area in a darker color.
The length of the area should be dependant on the amount of options a player is given.
How should I go about making a menu like this? ( https://cdn.dribbble.com/users/170905/s ... ptidea.gif )

Thanks in advance,
Anasky

Re: Circular menu

Posted: Thu Mar 22, 2018 19:41
by Ident
Depends. This is a quite complex UI, not only for animation and interaction but also for rendering.
Are you trying to exactly recreate what is shown?
If you want dynamic buttons with dynamic click areas you won't get around doing some kind of programmatic generation of the UI elements. CEGUI layouts wont help you much with this, they expect you to predefine your stuff, like most widget toolkits.
I can imagine ways to do this UI but its all very custom on rendering, selection and animation..

Re: Circular menu

Posted: Fri Mar 23, 2018 10:55
by Anasky
Ident wrote:Depends. This is a quite complex UI, not only for animation and interaction but also for rendering.
Are you trying to exactly recreate what is shown?
If you want dynamic buttons with dynamic click areas you won't get around doing some kind of programmatic generation of the UI elements. CEGUI layouts wont help you much with this, they expect you to predefine your stuff, like most widget toolkits.
I can imagine ways to do this UI but its all very custom on rendering, selection and animation..


For now I'd be happy with a non-animated version. But yeah, the buttons need to resize based on the amount of buttons that are in that specific menu. Would you be able to provide me with a starting point, or perhaps a widget that someone else built that provides a radial menu? Given console games using it quite commonly nowadays, I was hoping CEGUI would have a widget that provided this functionality?

Re: Circular menu

Posted: Sat Mar 24, 2018 06:28
by Ident
This is not trivial and many approaches are possible. I would probably make a totally custom widget. It would just render a texture ( a render texture target), to which i render customly in opengl/d3d or I would maybe try to use CEGUI's ability to render solid triangles.In either case, the geometry (vertices) would have to be generated programmatically. For the text I would probably use CEGUI's text labels and just place them dynamically as children of this window (autowindow). The mouse position inside the window and interactions can all be gotten from within the widget in CEGUI so I can use that to handle the interaction, hit-tests have to happen programmatically again to determine where which element is currently located.

Overall this is not easy and this is just a very high level description of an approach. You will have to dig really deep into rendering and CEGUI to solve this :)

Re: Circular menu

Posted: Sun Mar 25, 2018 20:09
by Anasky
Yeah, I feared as much :( Thanks for writing down your potential approach to this though :)
Could you maybe point me to how I'd draw to a rendertexture and display that rendertexture using CEGUI?

Re: Circular menu

Posted: Mon Mar 26, 2018 18:31
by Ident