1-3 创建地图单元坐标UI

发表于 分类于 本文字数： 1.6k 阅读时长 ≈ 1 分钟

　　在之前的步骤中，我们已经生成了一个6x6的矩形地图网格，为了方便之后的调试与观察，这里需要显示每个地图单元在地图网格内的坐标。

　　在场景中创建一个Canvas，并且按照以下步骤对Canvas作出修改：

  1. 将Canvas设置为“Hex Grid”的子物体
  2. 重命名为Hex Grid Canvas
  3. 删除Graphic Raycaster组件
  4. 将Canvas组件的Render Mode属性设置为World Space
  5. 在x轴方向旋转90度
  6. 设置Canvas Scaler组件的Dynamic Pixels Per Unit值为10
  7. 删除场景中的“EventSystem”物体

下图为Hex Grid Canvas设置完成后的效果：

　　对Canvas做好属性设置之后，创建一个Text子物体，具体设置步骤如下：

  1. Text重命名为Hex Cell Label
  2. Width为5，Height为15
  3. Text组件的Font Size值为4
  4. Text组件的Alignment为水平居中、垂直居中
  5. 删除Text组件中默认的初始文字内容
  6. 将Hex Cell label创建为Prefab

下图为Hex Cell label设置完成后的效果：

　　接下来，需要在创建地图单元的时候，同时创建Hex Cell Label，并且把自身的坐标位置显示出来。根据这个思路修改脚本，代码如下：

HexGrid.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
using UnityEngine.UI;

public class HexGrid : MonoBehaviour 
{
  …

    //存放显示地图单元坐标的Text Prefab
    [SerializeField] private Text cellLabelPrefab;

    //Text Prefab的父级Canvas
    private Canvas gridCanvas;

    private void Awake() 
	{
        //获取Hex Grid子物体下d Canvas组件
        gridCanvas = GetComponentInChildren<Canvas>();

    …
    }
}

　　添加代码完成后，将Hex Grid Canvas设置为Hex Grid的子物体，这样才能使gridCanvas = GetComponentInChildren<Canvas>();正常执行。最后将之前创建的Hex Cell Label预置拖入Hex Grid脚本的cellLabelPrefab变量中。效果如下图：

　　创建了Hex Grid Canvas和Hex Cell Label的联系之后，接着要在创建地图单元的时候，同时实例化Hex Cell Label预置，位置与实例化的Hex Cell位置相对应，同时显示出实例化Hex Cell在数组中的位置，也就是坐标，代码如下：

HexGrid.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private void CreateCell(int x, int z, int i) 
{
    …

    //该变量用来存储被实例化的cellLabelPrefab预置
    Text label = Instantiate<Text>(cellLabelPrefab);

    //设置该label的父级，也就是canvas
    label.rectTransform.SetParent(gridCanvas.transform, false);

    //设置label的位置，与被实例化的cell位置相同
    label.rectTransform.anchoredPosition = new Vector2(position.x, position.z);

    //设置label的文字，就是cell在数组中的位置
    label.text = x.ToString() + "\n" + z.ToString();
}

　　代码完成后，运行效果如下图：

　　下一章里，我们要重新排列地图单元的位置，使其符合正六边形地图单元的排列方式。