Search Unity

Splitting a rect into 4 triangular pieces.

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

  1. flipwon

    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

    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

    flipwon

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

    ThermalFusion

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

    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

    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 :)