I am using unity UI for the first time and trying to create a level selection menu just like Angry Birds.

I had successfully created the dynamic level selection menu. It was all good in the inspector but when I build and run it, something strange happens: when I click on the first button of the first row, instead of that button, the last button of that row got clicked.

I searched and found that the image was not stretching (because of preserve aspect property checked) but the bounds were stretching with the resolution so the bounds were overlaping and the wrong button was getting clicked.

  1. There is a panel which is child of the canvas gameObject.
  2. Buttons are child of panel gameObject.
  3. Panel's anchors are set to stretch the canvas.
  4. Buttons' anchors are set to stretch the panel.

Here is the code to create menu dynamically.

public class UITest : MonoBehaviour 

    public Button button;
    public RectTransform parent;

    void Start()

    void SetupButtons()
        float x = -155;
        float y = 55;

        for(int i=1; i<15; i++)
            var I = i;
            var btn = Instantiate(button) as Button;
            var btnRect = btn.GetComponent<RectTransform>();

            float width = btnRect.rect.width/5;
            float height = btnRect.rect.height/5;

            btn.transform.SetParent(parent, false);
            btnRect.anchoredPosition = new Vector2(x, y);
            btn.onClick.AddListener(() => Temp(btn, I));

            if(i%5 == 0)
                y += (height);
                x = -155f;

                x += -width;

            //Debug.Log(width +", " + height);

    void Temp(Button btn, int i)
        //Debug.Log("Clicked: " + i);
        Debug.Log(btn.GetComponent<RectTransform>().anchoredPosition + " " + btn.GetComponent<RectTransform>().rect);

Here are some screenshots to better understand the problem.

I hope you guys have understood the problem please help me solve the problem.

enter image description here enter image description here

  • \$\begingroup\$ Quite frankly, you would be better off not using Unity UI for a menu like this. \$\endgroup\$ – jgallant Mar 10 '16 at 17:39
  • \$\begingroup\$ yeah I read it before there are some performance issues with this but I don't want spend another day to learn new tool. \$\endgroup\$ – Daniyal Azram Mar 10 '16 at 17:45
  • \$\begingroup\$ Not new tools, just use GameObjects instead of UI canvas for all of this. Unity UI does some stuff well, but a menu screen like this, I would suggest you do not use it at all. That is just my opinion. \$\endgroup\$ – jgallant Mar 10 '16 at 17:46
  • \$\begingroup\$ Hmm I will try that tomorrow but if you can help me with that? \$\endgroup\$ – Daniyal Azram Mar 10 '16 at 17:49
  • 1
    \$\begingroup\$ I kinda just did :P In all honestly, the unity UI anchoring system is a tinkering nightmare. With a screen like this, it is going to be very difficult to anchor all those buttons in a way that will work nicely with Unity UI. \$\endgroup\$ – jgallant Mar 10 '16 at 20:06
transform.anchorMin = new Vector2(0f, 0f);
transform.anchorMax = new Vector2(1f, 1f);
transform.pivot = new Vector2(.5f, .5f);


  • \$\begingroup\$ Thanks for your answer but I already know how to set anchor points through code, anyway I had solved the problem. \$\endgroup\$ – Daniyal Azram Mar 11 '16 at 12:43

Thank you everyone for the response but I had solved the problem myself. In case anyone else facing this problem, I just set the anchor points to be the middle of the panel and my problem vanished.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.