Radial Positioned Menus

Hey all,

I am planning to achieve something quite like the mock up below.



None of those UI bubbles will be visable, but when there is some mouseOver on certain squares, I would like to have a menu appear based on the position of the board (and the camera).

I can tell this is something that can be quite hard to get right and that there are many varibles involved, like logic that chooses what direction to spawn the UI on, the path orientation at the square, and adjusting a triangle transform to give the effect.

Can anyone give me some recommendations as to where I should be looking to achieve such an thing?

 

It seems to me you could preset the position of each bubble. Then, when needed, just scale it up from 0. You could Lerp, Slerp, or tween the scale up.

 

Are you sure you want to orient the options to the square they come up from? It wouldn't take away from the game to have them always facing the player in a readable way.

As for some of your other ideas, you can use the mouse position and draw the menus around it.

 

Sorry I was a bit unclear. As you can see in the pic, the menus are all the same rotation upwards, it will still be readable. I am talking about having it detect how close each square is away from the edge and having it set the menu position based on that. Notice how each menu is on the side facing outwards. I am wanting to know how to detect that.

The preset position for each bubble is a good idea. A user could move it around based on their preference and it would save. However the game paths are aways diffrent as it is user made. There is no one set configeration, and i was hoping for it to be able to set the position on the outside themselves.

 

If your tile is a clickable object and you orient them correctly, you can use tileReference.transform.right*-1 to get that direction