# How to divide a Widget Image (Circle) in five parts

Hello yall I need someone way smarter than myself.

I want to do a small Minigame as a UI mechanic. There is a circle with a dot within. The dot can be moved with W,A,S,D and can travel freely inside the circle. The outside circle acts as a border for the dot.

Now i want to divide ther circle in 5 sectors. Every sector should be able to check if the dot is inside or not. Something like that

First Problem:

1. The circle images always come with a square border, and the pivot point is positioned at the top-left corner. Initially, I attempted to calculate the positions, sizes, and borders of the four rounded triangles and the small central circle, but I cant wrap my head around it.
2. Then, I considered creating five separate images for the sectors and positioning them accordingly. However, I encountered the pivot point issue once again, where itâ€™s fixed at the top-left corner of the image border. I cant find a method on how to calculate the shapeâ€™s border for precise checking.

Thank you for your time reading this, and I hope someone can solve the knot in my head.

Unreal Engine Version: 5.3.2
Skripting: Blueprints

Many ways to simplify. I do some of these for making UI radars math easier, so Iâ€™m sure others do as well:

• in UMG you can make the pivot point of any widget in the center of it
• put the dot and the circle at the same location on the HUD both with pivot points in the center
• the calculation for the â€śsectorâ€ť of the circle is easy if it was not rotated 45 degrees (++, Â±,-+,â€“)
• do all the calculations as if the circle and the dot are not rotated, then draw them rotated 45 degrees

Some ideas should get you going I hope.

1 Like