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事件函数：