Visualizer hard to see with dark mode on

[ashblue]

Currently hard to read the visualizer with Dark Mode. Would be good if more neutral colors were used on the connecting lines.

[ashblue]

Great first issue if somebody wants to tackle it.

[wihu]

any update on this? the PR seems stalled..

[ashblue]

Haven't touched any AI for a while so I've been working on other libraries. Somebody pushed up a PR to get this going but it still needs some work.

[ashblue]

Issue is mostly done here. Needs some cleanup to be finished #69

[JeremyVansnick]

In order to make dark mode easily visible I changed the colors of the NodeFaders based on whether the dark mode is on or not.

using UnityEditor;
using UnityEngine;

namespace CleverCrow.Fluid.BTs.Trees.Editors {

    public class NodeFaders {
        public ColorFader BackgroundFader { get; } = new ColorFader(
            EditorGUIUtility.isProSkin ?
            new Color(0, 0f, 0.8f) : new Color(0.65f, 0.65f, 0.65f), 
            EditorGUIUtility.isProSkin ? 
                new Color(0f, 1f, 0f) : new Color(0.39f, 0.78f, 0.39f));
        
        public ColorFader TextFader { get; } = new ColorFader(
            EditorGUIUtility.isProSkin ?
                Color.black : Color.white,
            EditorGUIUtility.isProSkin ?
                Color.white : Color.black);
        
        public ColorFader MainIconFader { get; } = new ColorFader(
            new Color(1, 1, 1, 0.3f), new Color(1, 1, 1, 1f));
        
        public ColorFader LastStatusFader { get; } = new ColorFader(
                Color.grey, Color.white);

        public void Update (bool active) {
            BackgroundFader.Update(active);
            TextFader.Update(active);
            MainIconFader.Update(active);
            LastStatusFader.Update(active);
        }
    }
}

I made the StatusIcons saturated and managed their darkness through code (they were really dark which didn't fit for dark mode):

Finally, because the last task status overlaps with the names of tasks if the text is long, I put the task status at the top right of the nodes.

public class NodePrintController {     
private void PrintLastStatus (Rect rect) {
            const float sidePadding = 1.5f;

            var icon = BehaviorTreePrinter.StatusIcons.GetIcon(_node.Task.LastStatus);
            icon.Paint(
                new Rect(
                    rect.x + rect.size.x - icon.Texture.width - sidePadding,
                    // rect.y + rect.size.y - icon.Texture.height - sidePadding, // original code
                    rect.y, // new code
                    icon.Texture.width, icon.Texture.height),
                _faders.LastStatusFader.CurrentColor);
        }
}
       

[ashblue]

Connected PR hits most of this. I'll cross reference the code you posted when I run through it.

[darkgnostic]

Actually the most problem comes from NodeBoxStyle.cs and default style of GUI.skin.box

    Style = new GUIStyle(GUI.skin.box) {
        border = new RectOffset(1, 1, 1, 1),
        normal = {
            background = texture,
        },
    
    };

changing that to

        Style = new GUIStyle {
            border = new RectOffset(1, 1, 1, 1),
            normal = {
                background = texture,
            },
            
            alignment = TextAnchor.MiddleCenter,
            padding = new RectOffset(4, 4, 4, 4),
            margin = new RectOffset(4, 4, 4, 4),
            overflow = new RectOffset(0, 0, 0, 0),
            stretchWidth = false,
            stretchHeight = false,
        };

solves the box background issues.

[ashblue]

@darkgnostic Fascinating. This would explain some things across several different packages I'm seeing if this fixes the issue.

[ashblue]

@darkgnostic yep this fixes the issue. Sorry for the delay. I'll get a patch out before the week is over

[ashblue]

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

• v2.3.0
• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀