Debug GUI Graph - Unity

Simple and easy to use graphing debug utility.

Description

DebugGUI Graph provides a way to debug continuous systems by providing an inspectable graphing GUI and logging overlay. It also provides an optional attribute-based abstraction for a one line injection into your existing code.

    // Works with regular fields
    [DebugGUIGraph(min: -1, max: 1, r: 0, g: 1, b: 0, autoScale: true)]
    float SinField;

    // As well as properties
    [DebugGUIGraph(min: -1, max: 1, r: 0, g: 1, b: 1, autoScale: true)]
    float CosProperty { get { return Mathf.Cos(Time.time * 6); } }

    // Also works for expression-bodied properties
    [DebugGUIGraph(min: -1, max: 1, r: 1, g: 0.3f, b: 1)]
    float SinProperty => Mathf.Sin((Time.time + Mathf.PI / 2) * 6);

    // User inputs, print and graph in one!
    [DebugGUIPrint, DebugGUIGraph(group: 1, r: 1, g: 0.3f, b: 0.3f)]
    float mouseX;
    [DebugGUIPrint, DebugGUIGraph(group: 1, r: 0, g: 1, b: 0)]
    float mouseY;

Installation

Git

1. Download the latest commit or the stable Release version.
2. Place the Plugins folder into your project asset folder.

Overview

UI Interaction

• Dragging - Windows can be dragged with middle mouse button.
• Scrubbing - You can check the values at any point on the graph by hovering over it with the mouse.
• Freezing - Holding left mouse button on the graph window stops graph updates for easier scrubbing.
• Disabling - Graphs can be toggled on/off by clicking their names.

Settings for changing colors and graph sizes are available in the Plugins\DebugGUI\Resources\DebugGUISettings ScriptableObject.

Graphing

A graph can be generated by adding the DebugGUIGraph attribute above any property or variable castable to float. Here you can specify the range of the graph (i.e. values at the top and bottom), the RGB color, and whether it should expand its range if a variable goes outside the range.

[DebugGUIGraph(group: 2, min: -200, max: 200, r: 0, g: 1, b: 0, autoScale: true)]
float playerXVelocity => velocity.x;

Alternatively, for more control, you can define and manage a graph manually. Graphs are referenced via an object key, which you then use to push new values to the graph.

    object myGraphKey = new object();

    void Awake()
    {
        // Graph using this component as the key
        DebugGUI.SetGraphProperties(this, "My Graph", 0, 1, 0, Color.red, false);

        // Another graph with an arbitrary object key
        DebugGUI.SetGraphProperties(myGraphKey, "My Other Graph", 0, 1, 0, Colorr.blue, false);

        // Strings also work as keys
        DebugGUI.SetGraphProperties("my graph", "My Other Graph", 0, 1, 0, Color.green, false);
    }

    void Update()
    {
        DebugGUI.Graph(this, Time.deltaTime);
        DebugGUI.Graph(myGraphKey, Time.deltaTime);
        DebugGUI.Graph("my graph", Time.deltaTime);
    }

Graphs can be exported to json via DebugGUI.ExportGraphs().

Logging

Similar to the graphs, a persistent logged value can be generated by adding the DebugGUIPrint attribute above any property or variable. This attribute has no configurable settings. Attribute-derived logs will include the object and field name in its output.

[DebugGUIPrint]
float playerXVelocity => velocity.x;

Persistent logs may also be managed manually in the same way as graphs using arbitrary keys.

    public override void Update()
    {
        DebugGUI.LogPersistent(this, $"Velocity: {velocity}");
        DebugGUI.LogPersistent("deltatime", $"Last delta: {Time.deltaTime}");
        DebugGUI.Log("This is a temporary log entry!");
    }

Contribution

If you spot a bug while using this, please create an Issue.

Acknowledgements

Special thanks to TheSniperFan for the 2.0 conversion from texture to GL lines for the graph rendering.

License

MIT License