Splitting a rect into 4 triangular pieces.

Discussion in 'Scripting' started by flipwon, May 17, 2019.

1. flipwon

Joined:
Dec 29, 2016
Posts:
93
I'm trying to make a rectangular button that has four sections. They would be split from corner to corner into 4 sections, like an X going through a square. I want to use the OnPointerClick event handler to see which section of the rect the user is clicking on.

I have been trying to math it out for a while and keep scrapping it. Maybe this will come easier to someone else?

Here is what I have at the moment, which works for squares, but not rectangles:
Code (CSharp):
1. public void OnPointerClick(PointerEventData eventData)
2.     {
3.         RectTransform rect = GetComponent<RectTransform>();
4.         Vector2 clickPos = eventData.position;
5.
6.         //Get center to set middle to 0
7.         var centerX = rect.sizeDelta.x / 2;
8.         var centerY = rect.sizeDelta.y / 2;
9.
10.         clickPos.x -= centerX;
11.         clickPos.y -= centerY;
12.
13.         if (clickPos.x > Math.Abs(clickPos.y))
14.         {
15.             Debug.Log("right");
16.         }
17.         else if (clickPos.y > Math.Abs(clickPos.x))
18.         {
19.             Debug.Log("top");
20.         }
21.         else if (-clickPos.x > Math.Abs(clickPos.y))
22.         {
23.             Debug.Log("left");
24.         }
25.         else if (-clickPos.y > Math.Abs(clickPos.x))
26.         {
27.             Debug.Log("bottom");
28.         }
29.
30.         Debug.Log(clickPos);
31.     }

Last edited: May 17, 2019
2. ThermalFusion

Joined:
May 1, 2011
Posts:
838
Transform the click point to get a relative offset to the center of the button, where all four triangles would meet. If you have a non square button, multiply the new y coordinate with the aspeect ratio of the button. Then simply compare the absolute value of the x and y values of your relative point to find the largest one, this is your direction.
If abs(x) larger than abs(y) you know right or left was pressed, if x is positive then right otherwise left.

3. flipwon

Joined:
Dec 29, 2016
Posts:
93
This is where I'm having issues. The buttons sizes vary at runtime.

4. ThermalFusion

Joined:
May 1, 2011
Posts:
838
It should just be x/y if you modify the y.

flipwon likes this.
5. csofranz

Joined:
Apr 29, 2017
Posts:
877
While you can use math (and it should not be that difficult - you should get away with an ugle cascace of three 'if' statements per section, you can completely cheat your way out of this by using 4 polygon (one for each triangle) colliders and simply determine which was clicked on.

Last edited: May 17, 2019
6. flipwon

Joined:
Dec 29, 2016
Posts:
93
This was it, just need to do it separately if it's scaled on the X. Thanks man