E Story 故事编辑器开发笔记 #2 创建工具栏&故事视图

1 创建实用类
- 1.1 样式实用类
- 1.2 UI元素实用类
2 创建工具栏
3 创建故事视图
- 3.1 创建视图类
- 3.2 实例化视图类
4 测试效果
5 自定义样式
- 5.1 创建样式文件
- 5.2 引用样式文件
6 测试效果
7 相关链接

创建实用类

样式实用类

创建文件夹：Assets/E Tool/E Story/Editor/Scripts/Utility
打开Utility文件夹，创建C#文件，命名为StyleUtility
打开StyleUtility.cs，，将内容修改如下：

using UnityEditor;
using UnityEngine.UIElements;

namespace E.Story
{
    // 样式实用类
    public static class StyleUtility
    {
        // 添加类名
        public static VisualElement AddClasses(this VisualElement element, params string[] classNames)
        {
            foreach (string item in classNames)
            {
                element.AddToClassList(item);
            }

            return element;
        }

        // 添加样式表
        public static VisualElement AddStyleSheets(this VisualElement element, params string[] filePath)
        {
            foreach (string item in filePath)
            {
                // 载入文件
                StyleSheet styleSheet = AssetDatabase.LoadAssetAtPath(item);
                // 添加引用
                element.styleSheets.Add(styleSheet);
            }

            return element;
        }
    }
}

UI元素实用类

继续创建C#文件，命名为ElementUtility
打开ElementUtility.cs，，将内容修改如下：

using System;
using UnityEditor.Experimental.GraphView;
using UnityEngine.UIElements;

namespace E.Story
{
    // UI元素实用类
    public static class ElementUtility
    {
        // 创建按钮
        public static Button CreateButton(string text, Action onClick = null)
        {
            Button button = new(onClick)
            {
                text = text,
            };

            return button;
        }

        // 创建折叠组
        public static Foldout CreateFoldout(string title, bool collapsed = false)
        {
            Foldout foldout = new()
            {
                text = title,
                value = !collapsed
            };

            return foldout;
        }

        // 创建单行文本输入框
        public static TextField CreateTextField(string value = null, string label = null, EventCallback<ChangeEvent> onValueChanged = null)
        {
            TextField textField = new()
            {
                value = value,
                label = label,
            };

            if (onValueChanged != null)
            {
                textField.RegisterValueChangedCallback(onValueChanged);
            }

            return textField;
        }

        // 创建多行文本输入框
        public static TextField CreateTextArea(string value = null, string label = null, EventCallback<ChangeEvent> onValueChanged = null)
        {
            TextField textArea = CreateTextField(value, label, onValueChanged);
            textArea.multiline = true;
            return textArea;
        }
    }
}

创建工具栏

打开StoryEditorWindow.cs，新增以下字段：

// 只读字段
private readonly string defaultFileName = "新故事";

// UI元素
private Toolbar toolbar;
private static TextField tfdFileName;
private Button btnSave;
private Button btnOpen;
private Button btnNew;
private Button btnClear;
private Button btnMiniMap;

新增AddToolbar方法

// 添加工具栏
private void AddToolbar()
{
    // 创建UI元素
    tfdFileName = ElementUtility.CreateTextField(defaultFileName, "当前故事", null);
    btnSave = ElementUtility.CreateButton("保存", null);
    btnOpen = ElementUtility.CreateButton("打开", null);
    btnNew = ElementUtility.CreateButton("新建", null);
    btnClear = ElementUtility.CreateButton("清空", null);
    btnMiniMap = ElementUtility.CreateButton("小地图", null);

    // 创建工具栏
    toolbar = new();

    // 将UI元素加入工具栏
    toolbar.Add(tfdFileName);
    toolbar.Add(btnSave);
    toolbar.Add(btnOpen);
    toolbar.Add(btnNew);
    toolbar.Add(btnClear);
    toolbar.Add(btnMiniMap);

    // 将工具栏加入窗口
    rootVisualElement.Add(toolbar);
}

清空CreateGUI方法内的语句，调用AddToolbar方法

private void CreateGUI()
{
    // 调用
    AddToolbar();
}

创建故事视图

创建视图类

打开UI文件夹，点击鼠标右键 Create -> MonoBehaviour Script创建C#文件，命名为StoryGraphView
打开StoryGraphView.cs，将内容修改如下：

using UnityEditor.Experimental.GraphView;
using UnityEngine.UIElements;

namespace E.Story
{
    // 此类继承自GraphView，拥有GraphView的所有特性
    public class StoryGraphView : GraphView
    {
        // 关联的窗口
        private StoryEditorWindow storyEditorWindow;

        // 构造器
        public StoryGraphView(StoryEditorWindow window)
        {
            // 实例化此类时绑定窗口类
            storyEditorWindow = window;

            // 调用方法
            AddGridBackground();
            AddManipulators();
        }
 
        // 添加网格背景
        private void AddGridBackground()
        {
            // 实例化网格背景
            GridBackground gridBackground = new();
            // 将网格背景尺寸拉伸至与视图相同
            gridBackground.StretchToParentSize();
            // 将网格背景插入视图
            Insert(0, gridBackground);
        }
 
        // 添加视图操作组件
        private void AddManipulators()
        {
            // 添加视图缩放组件
            //this.AddManipulator(new ContentZoomer()); // 默认是0.25~1的缩放范围
            SetupZoom(0.2f, 2.0f); // 自定义缩放范围
            // 添加视图拖拽组件
            this.AddManipulator(new ContentDragger());
            // 添加选中对象拖拽组件
            this.AddManipulator(new SelectionDragger());
            // 添加框选组件
            this.AddManipulator(new RectangleSelector());
        }
    }
}

实例化视图类

打开StoryEditorWindow.cs，新增字段graphView

// 关联的视图
private StoryGraphView graphView;

新增AddGraphView方法

// 添加视图
private void AddGraphView()
{
    // 实例化视图类
    graphView = new StoryGraphView(this);
    // 将视图尺寸拉伸至与窗口相同
    graphView.StretchToParentSize();
    // 将视图放入UI根元素
    rootVisualElement.Insert(0, graphView);
}

调用AddGraphView方法

private void CreateGUI()
{
    /* ... 此处代码已省略 ... */

    // 调用
    AddGraphView();
}

测试效果

此时窗口效果如下：

自定义样式

创建样式文件

创建文件夹：Assets/E Tool/E Story/Editor/Style Sheets
打开Style Sheets文件夹，点击鼠标右键 Create -> UI Toolkit -> Style Sheet 创建USS文件，命名为Variables
打开Variables.uss，将内容修改如下：

CSS

:root
{
    /* 颜色 */
    --colors-dark-grey-0: #111111;
    --colors-dark-grey-1: #1D1D1D;
    --colors-dark-grey-2: #242424;
    --colors-dark-grey-3: #292929;
    --colors-dark-grey-4: #2F2F2F;
    --colors-dark-grey-5: #353535;
    --colors-dark-grey-6: #3A3A3A;
    --colors-dark-grey-7: #404040;
    --colors-dark-grey-8: #464646;
    --colors-yellow: #FDD057;
    --colors-blue: #50DDE7;
    --colors-red: #772222;

    /* 数值（无单位） */
    --metrics-0: 0;
    --metrics-20: 20;
 
    /* 数值（像素） */
    --metrics-pixels-negative-12: -12px;
    --metrics-pixels-negative-4: -4px;
    --metrics-pixels-0: 0px;
    --metrics-pixels-2: 2px;
    --metrics-pixels-4: 4px;
    --metrics-pixels-6: 6px;
    --metrics-pixels-8: 8px;
    --metrics-pixels-12: 12px;
    --metrics-pixels-14: 14px;
    --metrics-pixels-16: 16px;
    --metrics-pixels-20: 20px;
    --metrics-pixels-24: 24px;
    --metrics-pixels-28: 28px;
    --metrics-pixels-32: 32px;
    --metrics-pixels-40: 40px;
    --metrics-pixels-80: 80px;
    --metrics-pixels-120: 120px;
    --metrics-pixels-160: 160px;
    --metrics-pixels-200: 200px;
    --metrics-pixels-240: 240px;
    --metrics-pixels-320: 320px;
    --metrics-pixels-400: 400px;
    --metrics-pixels-480: 480px;
}

继续创建USS文件，命名为ToolbarStyle
打开ToolbarStyle.uss，将内容修改如下：

CSS

/* 工具栏 */
Toolbar
{
	background-color: var(--colors-dark-grey-5);
	height: var(--metrics-pixels-40);
}

/* -------------------------------------------------------按钮 */

/* 按钮 */
Button
{
	background-color:  var(--colors-dark-grey-7);
	border-color:  var(--colors-dark-grey-1);
	max-height: var(--metrics-pixels-32);
	margin: var(--metrics-pixels-4);
	padding: var(--metrics-pixels-8);
}

/* 按钮（悬停时） */
Button:hover
{
	background-color:  var(--colors-dark-grey-8);
}

/* 按钮（按下时） */
Button:active
{
	background-color:  var(--colors-dark-grey-6);
	color: var(--colors-yellow);
}

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

/* -------------------------------------------------------标签 */

/* unity标签 */
.unity-text-field__label
{
	padding: var(--metrics-pixels-6);
	font-size: var(--metrics-pixels-14);
}

/* 文本字段（聚焦时） > unity标签 */
TextField:focus > .unity-text-field__label
{
	color: var(--colors-yellow);
}

/* -------------------------------------------------------文本字段 */

/* 文本字段 */
TextField
{
	padding: var(--metrics-pixels-2);
}

/* -------------------------------------------------------输入框 */

/* unity输入框 */
.unity-text-field__input
{
	background-color:  var(--colors-dark-grey-1);
	border-color:  var(--colors-dark-grey-7);
	border-radius: var(--metrics-pixels-4);
	max-height: var(--metrics-pixels-32);
	min-width: var(--metrics-pixels-120);
	padding-left: var(--metrics-pixels-6);
	font-size: var(--metrics-pixels-14);
}

/* unity输入框（聚焦时） */
.unity-text-field__input:focus
{
	border-color: var(--colors-yellow);
}

继续创建USS文件，命名为GraphViewStyle
打开GraphViewStyle.uss，将内容修改如下：

CSS

/* 故事视图：默认 */
StoryGraphView
{
    width: 100%;
    height: 100%;
}

/* 网格背景：默认 */
GridBackground
{
    --grid-background-color: var(--colors-dark-grey-0);
    --line-color: var(--colors-dark-grey-1);
    --thick-line-color: var(--colors-dark-grey-3);
    --spacing: var(--metrics-20);
}

引用样式文件

打开StoryEditorWindow.cs，新增以下字段：

// 只读字段
private readonly string variablesPath = "Assets/E Tool/E Story/Editor/Style Sheets/Variables.uss";
private readonly string toolbarStylePath = "Assets/E Tool/E Story/Editor/Style Sheets/ToolbarStyle.uss";
private readonly string graphViewStylePath = "Assets/E Tool/E Story/Editor/Style Sheets/GraphViewStyle.uss";

新增AddStyles方法

// 添加样式文件
private void AddStyles()
{
    // 引用变量样式文件
    rootVisualElement.AddStyleSheets(variablesPath);
    // 引用工具栏样式文件
    toolbar.AddStyleSheets(toolbarStylePath);
    // 引用故事视图样式文件
    graphView.AddStyleSheets(graphViewStylePath);
}

调用AddStyles方法

// 添加样式文件
private void CreateGUI()
{
    /* ... 此处代码已省略 ... */

    // 调用
    AddStyles();
}

修改AddGraphView方法

private void AddGraphView()
{
    // 实例化视图类
    graphView = new StoryGraphView(this);
    // 将视图放入UI根元素
    rootVisualElement.Add(graphView);
}

测试效果

最终窗口效果如下：

创建实用类

样式实用类

UI元素实用类

创建工具栏

创建故事视图

创建视图类

实例化视图类

测试效果

自定义样式

创建样式文件

引用样式文件

测试效果

相关链接

留下评论取消回复

相关文章

E Story 故事编辑器开发笔记 #1 创建项目&编辑器窗口

E Story 故事编辑器开发笔记 #0 前言

解决 WordPress 在更新时的报错问题 429 too many request