Unity实现棋盘方格

本文参考：p1_哔哩哔哩_bilibili 

一、精要提炼

1、Button自带的白色底图是圆角的，Image组件自带的白色底图是方角的。

2、2D中Instantiate指定的位置为屏幕坐标系的位置，左下角为(0,0)

3、求某个组件的位置：xx.transform.position，xx为GameObject对象

4、求某个组件的width：xx.getComponent<RectTransform>().rect.width

5、设置某个组件的大小：xx.getComponent<RectTransform>().sizeDelta = new Vector2(yy, zz);

二、通过预设体创建第一个方格

效果如图：

1、设置Game屏幕分辨率为2000*3200，大致相当于一般收集的分辨率

2、创建Canvas， 命名为BoardCanvas，其参数配置如下：

3、在Canvas下创建一个Panel，命名为BoardPanel，其大小自动为Scratch填充整个Canvas

4、在Panel下创建Image，命名为Background，其参数为：

大小：1700*1700

5、在Panel下再创建一个Button作为棋盘的方格，命名为BlockButton，其下有Text和Image组件。

Button的大小：200*200

Button自带白色底图是圆角的，我们希望Button的白色底图是方角的，需要需要再添加如上所示的Image组件，其自带的白色底图是方格的。

6、在Assets下创建Prefab目录，将BlockButton放置其中。我们希望通过代码生成一个个的方格。

7、创建一个Empty物体命名为GameManager

8、创建一个C#脚本命名为BoardGameManager，并挂载到GameManager下：

public class BoardGameManager : MonoBehaviour
{
    [SerializeField]
    private GameObject blockButton;
    [SerializeField]
    private GameObject panel;

    private void Awake()
    {
        Instantiate(blockButton, new Vector3(0,0,0), Quaternion.identity, panel.transform);
    }
}

然后配置两个GameObject的信息如下：

执行代码后效果如下：

方格出现在Canvas的左下角，而不是我们想要的Panel的中间位置。

这是因为Instantiate中执行的(0,0,0)是屏幕坐标系的位置，位于屏幕的左下角，如果需要转化为Canvas中的中间位置，则需要加上canvas的坐标位置。代码修改如下：

public class BoardGameManager : MonoBehaviour
{
    [SerializeField]
    private GameObject blockButton;
    [SerializeField]
    private GameObject panel;
    [SerializeField]
    private GameObject boardCanvas;

    private void Awake()
    {
        GameObject button = Instantiate(blockButton, new Vector3(0,0,0), Quaternion.identity, panel.transform);
        button.transform.position += boardCanvas.transform.position;
    }
}

三、创建任意个数的方格

已知Panel中心点的局部位置为(0,0)，即最外层正中心的位置。

方格分别标记为(m,n)，此为序号信息，非坐标值信息。第一个为(0,0)，第二个为(0,1)，依次进行标记。如下图所示：

已知最外层正方形的边长为len1，空隙的长度为len2，方格的个数为count。

根据正中心的坐标值，可以求得最左上角的坐标值，进而求得每个方格中心点的坐标值。首先count为单数/双数分别推导公式，然后就会发现count单数/双数共用同一个公式。此处省略计算过程，只在代码中给出最终的结果公式。

BoardGameManager.cs完整的代码如下：

public class BoardGameManager : MonoBehaviour
{
    [SerializeField] private GameObject blockButton;
    [SerializeField] private GameObject background;
    [SerializeField] private GameObject panel;
    [SerializeField] private GameObject boardCanvas;
    public int count;

    private void Awake()
    {
        float totalLen = background.GetComponent<RectTransform>().rect.width;
        float gapLen = 10;
        if(count == 0)
        {
            count = 8;
        }
        renderBoard(totalLen, gapLen, count);
    }


    /**
     * totalLen: background总长度
     * gapLen: 方格间空隙长度
     * count: 方格个数
     */
    private void renderBoard(float totalLen, float gapLen, int count)
    {
        float buttonLen = 1f * (totalLen - count * gapLen - gapLen) / count;

        for (int i = 0; i < count; i++)
        {
            for (int j = 0; j < count; j++) 
            {
                float poxX = 1f / 2 * (2 * i + 1 - count) * (totalLen - gapLen) / count;
                float poxY = 1f / 2 * (2 * j + 1 - count) * (totalLen - gapLen) / count;    
                Debug.Log(poxX + " " + poxY);
                GameObject button = Instantiate(blockButton, new Vector3(poxX, poxY, 0), Quaternion.identity, panel.transform);
                button.transform.position += boardCanvas.transform.position;
                button.GetComponent<RectTransform>().sizeDelta = new Vector2 (buttonLen, buttonLen);
            }
        }
    }
}

四、点击方格显示信息

首先，创建BoardButton的C#脚本，将button的属性信息存放在该类中。

public class BoardButton : MonoBehaviour
{
    private int posX;
    private int posY;

    public void setPos(int posX, int posY) { 
        this.posX = posX;       
        this.posY = posY;
    }

    public void onClickButton()
    {
        Debug.Log(this.posX + ", " + this.posY);    
    }
}

然后，修改BoardGameManager.cs代码，增加记录pos的信息：

public class BoardGameManager : MonoBehaviour
{
    [SerializeField] private GameObject blockButton;
    [SerializeField] private GameObject background;
    [SerializeField] private GameObject panel;
    [SerializeField] private GameObject boardCanvas;
    public int count;

    private void Awake()
    {
        float totalLen = background.GetComponent<RectTransform>().rect.width;
        float gapLen = 10;
        if(count == 0)
        {
            count = 8;
        }
        renderBoard(totalLen, gapLen, count);
    }


    /**
     * totalLen: background总长度
     * gapLen: 方格间空隙长度
     * count: 方格个数
     */
    private void renderBoard(float totalLen, float gapLen, int count)
    {
        float buttonLen = 1f * (totalLen - count * gapLen - gapLen) / count;

        for (int i = 0; i < count; i++)
        {
            for (int j = 0; j < count; j++) 
            {
                float poxX = 1f / 2 * (2 * i + 1 - count) * (totalLen - gapLen) / count;
                float poxY = 1f / 2 * (2 * j + 1 - count) * (totalLen - gapLen) / count;    
                Debug.Log(poxX + " " + poxY);
                GameObject button = Instantiate(blockButton, new Vector3(poxX, poxY, 0), Quaternion.identity, panel.transform);
                button.transform.position += boardCanvas.transform.position;
                button.GetComponent<RectTransform>().sizeDelta = new Vector2 (buttonLen, buttonLen);
                button.GetComponent<BoardButton>().setPos(i, j);
            }
        }
    }
}

最后，在BoardButton组件中配置OnClick事件函数：

此时运行程序，点击任何一个方格都会打印位置信息。