I would like to create a circular field composed of smaller fields (imagine a donut split to several parts). Each field is like an arc, thus if I draw rectangles around its corners the rectangle would overlap the neighbouring fields.
How can I make sure that when a user clicks on a field, the click is handled by the correct field, not an overlapping part of a neighouring field?
If I understand correctly, what you want to do is to change the shape of collision box. Select your sprite (segment of the donut), then go to "edit animation" then find collision box and edit the shape of it. You can add points to the shape, just right click on the point and then select "add point" and then drag the points into desired shape. You can add points until you have enough to have a satisfying arc, but keep in mind that more collision box points means more processing power, for moving sprites on a mobile app recommendation is to not go over 8 points (or at least it was the last time I read the manual). Since it seems to be a static sprite you should be fine, but still don't go overboard with the points of the collision box, your main focus is the line between the segments anyway.