登入
注册

E Story 故事编辑器开发笔记 #7 美化节点

调整变量

打开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-light-grey-0: #eeeeee;
    --colors-light-grey-1: #dddddd;
    --colors-light-grey-2: #cccccc;
    --colors-light-grey-3: #bbbbbb;
    --colors-light-grey-4: #aaaaaa;
    --colors-yellow: #FDD057;
    --colors-blue: #50DDE7;
    --colors-red: #CC2222;
    
    /* 数值（无单位） */
    --metrics-0: 0;
    --metrics-1: 1;
    --metrics-20: 20;
    
    /* 数值（像素） */
    --metrics-pixels-0: 0px;
    --metrics-pixels-1: 1px;
    --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-22: 22px;
    --metrics-pixels-24: 24px;
    --metrics-pixels-28: 28px;
    --metrics-pixels-32: 32px;
    --metrics-pixels-40: 40px;
    --metrics-pixels-60: 60px;
    --metrics-pixels-80: 80px;
    --metrics-pixels-100: 100px;
    --metrics-pixels-120: 120px;
    --metrics-pixels-140: 140px;
    --metrics-pixels-160: 160px;
    --metrics-pixels-180: 180px;
    --metrics-pixels-200: 200px;
    --metrics-pixels-240: 240px;
    --metrics-pixels-320: 320px;
    --metrics-pixels-400: 400px;
    --metrics-pixels-480: 480px;
    --metrics-pixels-800: 800px;
}

添加样式

打开GraphViewStyle.uss，新增以下内容：

CSS
/* -------------------------------------------------------布局容器 */

/* ----块容器---- */

/* 节点主容器 */
.node__main-container
{
    min-width: var(--metrics-pixels-200);
    background-color:  var(--colors-dark-grey-3);
}

/* 节点主容器（小型） */
.node__main-container-small
{
    min-width: var(--metrics-pixels-120);
    background-color:  var(--colors-dark-grey-3);
}

/* 节点标题容器 */
.node__title-container
{
}

/* 节点输入容器 */
.node__input-container
{
}

/* 节点输出容器 */
.node__output-container
{
}

/* 节点扩展容器 */
.node__extension-container
{
    padding: var(--metrics-0);
}

/* 节点自定义数据容器 */
.node__custom-data-container
{
    padding: var(--metrics-pixels-8);
}

/* ----行容器---- */

/* 行容器 */
.row-container
{
    flex-direction: row;
}

/* 行容器 > 输入框 */
.row-container > .textfield
{
    flex-grow: 1000;
    max-width: var(--metrics-pixels-320);
}

/* 行容器 > 左侧和中间的元素 */
.row-container > .row-item__left-center
{
    margin-top: var(--metrics-pixels-2);
    margin-right: var(--metrics-pixels-4);
    margin-bottom: var(--metrics-pixels-2);
    margin-left: var(--metrics-0);
}

/* 行容器 > 最右侧的元素 */
.row-container > .row-item__right
{
    margin-top: var(--metrics-pixels-2);
    margin-right: var(--metrics-0);
    margin-bottom: var(--metrics-pixels-2);
    margin-left: var(--metrics-0);
}

/* ----列容器---- */

/* 列容器 */
.col-container
{
}

/* 列容器 > 上侧和中间的元素 */
.col-container > .col-item__top-center
{
    margin-top: var(--metrics-0);
    margin-right: var(--metrics-0);
    margin-bottom: var(--metrics-pixels-4);
    margin-left: var(--metrics-0);
}

/* 列容器 > 最下侧的元素 */
.col-container > .col-item__bottom
{
    margin-top: var(--metrics-0);
    margin-right: var(--metrics-0);
    margin-bottom: var(--metrics-0);
    margin-left: var(--metrics-0);
}


/* -------------------------------------------------------交互元素 */

/* ----折叠组---- */

/* 折叠组 */
Foldout
{
}

/* 折叠组内容 */
.unity-foldout__content
{
    margin: var(--metrics-0);
}

/* 折叠组 > 折叠框 */
Foldout > Toggle
{
    margin: var(--metrics-0);
}

/* 折叠组 > 子项 */
Foldout > .foldout-item
{
    margin: var(--metrics-0);
    margin-top: var(--metrics-pixels-4);
}

/* 折叠组 > 折叠框unity文本元素 */
.unity-toggle__text
{
    margin-left: var(--metrics-0);
}

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

Button
{
    min-height: var(--metrics-pixels-24);
    background-color:  var(--colors-dark-grey-7);
    border-color:  var(--colors-dark-grey-1);
}

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

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

/* ----输入字段---- */

/* 文本字段 */
.textfield
{
}

/* 文本字段 > unity文本输入框 */
.textfield > .unity-text-field__input,
/* 文本字段 > unity整数输入框 */
.textfield > .unity-integer-field__input
{
    min-width: var(--metrics-pixels-40);
    background-color:  var(--colors-dark-grey-1);
    border-color:  var(--colors-dark-grey-7);
    border-radius: var(--metrics-pixels-4);
    white-space: pre-wrap;
}

/* 隐藏文本字段 > unity文本输入框 */
.textfield__hidden > .unity-text-field__input,
{
    background-color: transparent;
    border-color: transparent;
}

/* 隐藏文本字段（聚焦时） > unity文本输入框 */
.textfield__hidden:focus > .unity-text-field__input
{
    background-color:  var(--colors-dark-grey-1);
    border-color: var(--colors-yellow);
}

/* 引用文本字段 > unity文本输入框 */
.textfield__quote > .unity-text-field__input,
.textfield__quote > .unity-integer-field__input
{
    padding: var(--metrics-pixels-6);
    background-color: var(--colors-dark-grey-2);
    border-color: transparent;
    border-left-color:  var(--colors-dark-grey-7);
    border-left-width: var(--metrics-pixels-4);
}

/* 引用文本字段（悬停时） > unity文本输入框 */
.textfield__quote:hover > .unity-text-field__input,
.textfield__quote:hover > .unity-integer-field__input
{
    background-color:  var(--colors-dark-grey-4);
}

/* 引用文本字段（聚焦时） > unity文本输入框 */
.textfield__quote:focus > .unity-text-field__input,
.textfield__quote:focus > .unity-integer-field__input
{
    background-color:  var(--colors-dark-grey-1);
    border-color:  var(--colors-yellow);
}

/* 节点标题文本字段 > unity文本输入框 */
.textfield__node-title > .unity-text-field__input
{
    max-width: var(--metrics-pixels-320);
    margin: var(--metrics-pixels-4);
    margin-left: var(--metrics-0);
    padding: var(--metrics-pixels-2);
}

/* 节点标题文本字段 > unity文本输入框 > 文本元素 */
.textfield__node-title > .unity-text-field__input > TextElement
{
    font-size: var(--metrics-pixels-14);
}

/* 节点输出端口选项文本字段 > unity文本输入框 */
.textfield__node-output-port > .unity-text-field__input
{
    height: var(--metrics-pixels-24);
    min-width: var(--metrics-pixels-40);
    max-width: var(--metrics-pixels-240);
    margin: var(--metrics-pixels-4);
    margin-right: var(--metrics-0);
    padding: var(--metrics-pixels-4);
}

/* -------------------------------------------------------附加样式 */

/* 错误（边框） */
.error-border
{
    border-color: var(--colors-red);
    border-width: var(--metrics-pixels-2);
    border-radius: 4px 4px 0 0;
}

/* 错误（背景） */
.error-bg
{
    background-color:  var(--colors-red); 
}

/* 帮助文本 */
.help-text
{
    color: var(--colors-red);
    -unity-text-align: middle-center;
}

/* 行缩进 */
.indent
{
    margin-left: var(--metrics-pixels-8);
}

/* 全宽 */
.full-width
{
    flex-grow: var(--metrics-1);
}

应用样式

美化基类节点

打开BaseNode.cs，修改以下方法：

C#
public virtual void Init(StoryGraphView graphView, string title, Vector2 position)
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    mainContainer.AddToClassList("node__main-container");
    titleContainer.AddToClassList("node__title-container");
    inputContainer.AddToClassList("node__input-container");
    outputContainer.AddToClassList("node__output-container");
    extensionContainer.AddToClassList("node__extension-container");
}

protected virtual void DrawTitleContainer()
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    tfdTitle.AddClasses
    (
        "textfield",
        "textfield__hidden",
        "textfield__node-title"
    );
}

protected virtual void DrawExtensionContainer()
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    customDataContainer.AddClasses
    (
        "node__custom-data-container"
    );
    tfdNote.AddClasses
    (
        "textfield",
        "textfield__quote",
        "foldout-item"
    );

    // 此方法必须调用
    RefreshExpandedState();
}

美化单进多出节点

打开SingleInMultiOutNode.cs，修改以下方法：

C#
protected override void DrawExtensionContainer()
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    btnAdd.AddClasses
    (
        "foldout-item"
    );

    RefreshExpandedState();
}

private Port CreateOutputPort(object userData)
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    btnDelete.AddClasses
    (
        "row-item__right"
    );
    tfdChoice.AddClasses
    (
        "textfield",
        "textfield__node-output-port",
        "textfield__hidden"
    );

    return outputPort;
}

美化对话节点

打开DialogueNode.cs，修改以下方法：

C#
protected override void DrawExtensionContainer()
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    customDataContainer.AddClasses
    (
        "node__custom-data-container"
    );
    roleInfoRowContainer.AddClasses
    (
        "row-container",
        "foldout-item"
    );
    roleInfoColContainer.AddClasses
    (
        "col-container",
        //"row-item__left-center",
        "full-width"
    );
    tfdRoleName.AddClasses
    (
        "col-item__top-center",
        "textfield",
        "textfield__quote"
    );
    btnAdd.AddClasses
    (
        "foldout-item"
    );

    RefreshExpandedState();
}

private VisualElement CreateSentenceData(object userData)
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    lineContainer.AddClasses
    (
        "row-container",
        "foldout-item"
    );
    tfdSentence.AddClasses
    (
        "textfield",
        "textfield__quote",
        "row-item__left-center"
    );
    btnDelete.AddClasses
    (
        "row-item__right"
    );

    return lineContainer;
}

美化分支节点

打开BranchNode.cs，修改以下方法：

C#
protected override void DrawExtensionContainer()
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    btnAdd.AddClasses
    (
        "foldout-item"
    );
    customDataContainer.AddClasses
    (
        "node__custom-data-container"
    );

    RefreshExpandedState();
}

private VisualElement CreateChoiceData(object userData)
{
    /* ... 此处代码已省略 ... */

    // 添加USS类名
    choiceContainer.AddClasses
    (
        "foldout-item"
    );
    lineContainer.AddClasses
    (
        "row-container"
    );
    tfdChoice.AddClasses
    (
        "textfield",
        "textfield__quote",
        "row-item__left-center"
    );
    btnDelete.AddClasses
    (
        "row-item__right"
    );

    return choiceContainer;
}

测试效果

最终窗口效果如下：

相关链接

留下评论

相关文章