[Help] How to make pseudo Donut Menu?

Unity Engine
1

Hey guys!

After hours of trying to get it right and fail, i come to you, the UI Gurus!

Never been good at math, am trying to do something like this

Arrange some ui buttons around a circle, distance between them depending on their number shouldnt be that hard?

Am sure there is out there someone that already made “donut” like button arrangement before willing to share some love & wisdom :slight_smile:

Thanks a lot!

2226408--148304--donutmenu.jpg

2

Why use math if Unity has math built into it? Assuming you are fine with using regular game objects (as opposed to using uGUI), you could do it like this:

  • Create an empty game object that acts as the pivot point for a single button.
  • Create a child game object that contains the button, say as a sprite. Move this child object upwards a little, depending on how far you want to spread out the buttons.
  • Now you just need to rotate the parent object.
  • Do all of this with all of your buttons. Of course you need to rotate them with different angles, the delta between each being (360 / (number of buttons)). Pretty simple.
  • If your button graphics must not rotate, you can rotate them back individually after the whole procedure.

The nice thing about this solution is that you can animate it, too: Instead of doing it all in one frame, you could animate the whole button-spread-out routine over several frames.

3

@blizzy Yeah that’s what i thought at first , Using gameobjects instead of uGui is not one of my options here :frowning:

BUMP!
-btw been a lover of your “lerp like a pro” post!

4

Not my post, I merely link to it.

5

Well that was fun!

First off, for a general overview of how to approach this without relying on rotating Vectors manually, see here for a good explanation.

Now there are a couple of caveats applying this to Unity’s UI, the most notable being:

  • You can’t just plop a point down, you have to wrestle with anchors and offsets.

  • CanvasElements use relative positioning ([0, 1]), and the absolute distance that [0, 1] represents can be different between the horizontal and vertical axis.

Here’s how I circumvented these in my example implementation:

  • I took the lazy way out and didn’t bother making it scalable. I set the anchors to the derived point, all offsets to 0 and the set the size to absolute pixel values. I recommend taking this a step further and actually position the anchors at the desired corners of the element.
  • Account for the difference by using a different radius value for each axis.

I’ve included my implementation script as well as a UnityPackage that comes with a scene and dummy prefabs. (This is free to use for everyone who finds it, CC0 license, yadayadayada. ;))

Hope this helps a bit, and let me know if you have any questions! Good luck!

2229461–148518–PieMenu.cs (1.93 KB)
2229461–148519–PieMenuDemo.unitypackage (7.22 KB)

1 Like
6

UI objects are GameObjects. The positioning is slightly trickier, but the concept is still the same.

7

Wot! exactly what i was looking for! nothing more, nothing less… Thanks a loot!

@Kiwasi “UI objects are GameObjects. The positioning is slightly trickier, but the concept is still the same.”

Those types of comments dont help at all, its like saying building a Game is the same as building a Car, just slightly trickier, but the concept of “building” is the same… dosnt it?

Regards!

8

I bet he was really just trying to be helpful.

9

This looks fun. I’ll give my take on it tonight when I get home. I’m on mobile right now so I can’t see @Senshi 's solution, so I can’t tell if you took the same route as I’m planning. (Just using some basic trigonometry to project the angles using the Unit Circle) Is this what you did?

10

Yup! I then simply wrapped the trig code in a function that takes in existing Buttons, so you can set those up before-hand and have the code worry about positioning them.

11

Well darn… I’ll still give it a go as a fun exercise.

1 Like
12

So I’ve finally held true to my promise. Here is my take on a Pi Menu, with sectional highlighting abilities. Let me know what you think.

It’s not a masterpiece and simply a sleepy night’s work. :wink:

2362653–160293–PiMenu.unitypackage (15.1 KB)