5-11 高度与颜色编辑可选功能

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

　　现在我们可以创建更大尺寸的地图了，但是地图编剧工具的功能并没有任何变化。首先是对地图单元上色和调整高度是同时进行的。其次因为有了更大的地图，一次编辑一个地图单元显得过于繁琐。在这一章中，我们先实现编辑高度与颜色功能变为可选，也就是在点击一个地图单元的时候，可以选择只改变其颜色或者只改变其高度。
　　这个功能可以通过添加一个toggle组来实现。复制一个颜色选项卡并将标签名改为“—”或者其他字符，与颜色选择的勾选框文字进行区分。然后设置其OnValueChanged事件传递参数为-1。此选项目的是用来取消选中颜色。如下图：

　　-1对于颜色数组来说是一个无效的下标，我们可以根据这个数值确定是否对地图单元进行颜色修改。代码如下：

HexMapEditor.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
public class HexMapEditor : MonoBehaviour
{
    …
    
    //表示当前是否可以修改cell的颜色
    private bool applyColor;
    
    …
        
    public void SelectColor(int _index)
    {
        //当传入的索引值大于0的时候，才会获取当前选中的颜色
        applyColor = _index >= 0;
        if (applyColor)
        {
            activeColor = colors[_index];
        }
    }
    
    private void EditCell(HexCell cell)
    {
        //当applyColor为true，也就是索引值大于等于0，才会修改cell的颜色
        if (applyColor)
        {
            cell.Color = activeColor;
        }
        
        cell.Elevation = activeElevation;
    }
}

　　修改地图单元高度使用的是一个Slider组件，在这里创建一个toggle表示是否应用高度编辑,默认设置为开启状态。代码如下：

HexMapEditor.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class HexMapEditor : MonoBehaviour
{
    …
    
    //是否启用修改cell高度的功能
    private bool applyElevation = true;
    
    …
        
    private void EditCell(HexCell cell)
    {

        if (applyColor)
        {
            cell.Color = activeColor;
        }

        //当toggle勾选时，才会修改cell的高度
        if (applyElevation)
        {
            cell.Elevation = activeElevation;
        }
    }
}

　　完成代码后，我们重新整理一下UI上各个组件的位置和层级结构，将所有UI都放入一个Panel中，然后再将颜色修改的UI与高度修改的UI分开，这样就显得更加整洁，也便于后期调试。如下图：

　　为了让修改高度开关起效，我们需要创建一个方法，在Toggle每次勾选或取消选择时候都调用这个方法。代码如下：

HexMapEditor.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
public class HexMapEditor : MonoBehaviour
{
    …

    /// <summary>
    /// 当高度修改的toggle点击时，调用此方法
    /// </summary>
    /// <param name="toggle">toggle当前是否被选中</param>
    public void SetApplyElevation(bool toggle)
    {
        applyElevation = toggle;
    }
}

　　完成代码后，要在Toggle组件上挂载此方法。当挂载方法时确保是使用的方法列表顶端的dynamic bool method。如下图：

　　现在我们在运行时就可以选择是修改颜色还是高度，或者像之前一样同时修改。甚至可以两个都不选，尽管现在这个功能没什么用。如下图：

为什么当我选择一个颜色后自动取消选择高度了？
这个情况发生在把所有的选项都放在一个Group时，可能是直接复制了一份颜色选项卡然后修改成高度选项卡，但没有清理Toggle组件的Group。

　　至此，我们就完成了单独进行高度和颜色的可选编辑功能，虽然这个功能现在看上去好像没什么用。但是随着编辑器的功能不断增多，这个功能将在之后体现出来它的作用。在下一章中，我们将定义一个笔刷大小，用来批量修改地图单元的颜色或高度。

Github代码