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

Development Programming & Scripting
, , ,
1

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.

image

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

image

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

2

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:

1 Like