E Story 故事编辑器开发笔记 #16 实现小地图

自定义小地图类

  1. 打开UI文件夹，点击鼠标右键 Create -> MonoBehaviour Script创建C#文件，命名为NavMap
  2. 打开NavMap.cs，将内容修改如下：
C#
using UnityEditor.Experimental.GraphView;
using UnityEngine.UIElements;

namespace E.Story
{
    // 导航地图
    public class NavMap : MiniMap
    {
        public void Init()
        {
            // 默认浮动
            anchored = false;
            // 默认不可见
            visible = false;
        }

        public override void BuildContextualMenu(ContextualMenuPopulateEvent evt)
        {
            if (!windowed)
            {
                // 切换小地图的浮动/固定模式
                evt.menu.AppendAction(anchored ? "浮动" : "固定",
                    action => { anchored = !anchored; },
                    DropdownMenuAction.AlwaysEnabled);
            }
        }
    }
}

在视图中添加小地图

打开StoryGraphView.cs，新增字段navMap，新增AddMiniMap方法和ToggleMiniMap方法

C#
private NavMap miniMap;

// 添加小地图
private void AddMiniMap()
{
    miniMap = new();
    miniMap.Init();
    miniMap.SetPosition(new(0, 0, 200, 200));

    Add(miniMap);
}

// 切换小地图
public void ToggleMiniMap()
{
    miniMap.visible = !miniMap.visible;
}

修改StoryGraphView方法，增加调用语句

C#
// 构造器
public StoryGraphView(StoryEditorWindow window)
{
    /* ... 此处代码已省略 ... */

    AddMiniMap();
}

实现切换显示小地图

打开StoryGraphView.cs，新增ToggleMiniMap方法

C#
// 切换小地图
private void ToggleMiniMap()
{
    graphView.ToggleMiniMap();
    // 切换按钮样式
    btnMiniMap.ToggleInClassList("button__selected");
}

修改AddToolbar方法，实现按钮功能

C#
// 添加工具栏
private void AddToolbar()
{
    /* ... 此处代码已省略 ... */

    btnMiniMap = ElementUtility.CreateButton("小地图", () => ToggleMiniMap());
    
    /* ... 此处代码已省略 ... */
}

打开ToolbarStyle.uss，将选择器“.toolbar__button__selected”重命名为“.button__selected”

CSS
/* 按钮（选中时） */
.button__selected
{
    color: var(--colors-yellow);
}

美化小地图

打开GraphViewStyle.uss，添加如下样式：

CSS
/* -------------------------------------------------------导航面板 */

/* 导航面板 */
NavMap
{
    border-color:  var(--colors-dark-grey-6);
    background-color:  var(--colors-dark-grey-1);
}

/* 导航面板 > 标签 */
NavMap > Label
{
    visibility: hidden; 
}

测试效果

最终窗口效果如下：

相关链接

留下评论

相关文章