Graphs and Charts

Unity Engine
1

Since UXML and USS mimic HTML and CSS, I was wondering if anyone has attempted making any graphs or charts in the editor / in runtime using this new API? I’m not good enough with CSS to write something like that from scratch so does anyone have any experience / example code to point me in the right direction?

USS is a subset of CSS so I’m wary of diving into general CSS tutorials and moving that over to Unity in the event that I end up using unsupported syntax.

2

If you need to draw a char or any other custom mesh graphic it’s better to use generateVisualContent where you can render any shape you like.
For example here are some utility methods to render a circle with MeshGenerationContext

public static void Circle(Vector2 pos, float radius, Color color, MeshGenerationContext context)
{
    Circle(pos, radius, 0, Mathf.PI * 2, color, context);
}

public static void Circle(Vector2 pos, float radius, float startAngle, float endAngle, Color color, MeshGenerationContext context)
{
    color.a = 1;
    var segments = 50;
    var mesh = context.Allocate(segments + 1, (segments-1) * 3);
    mesh.SetNextVertex(new Vertex()
    {
        position = new Vector2(pos.x, pos.y),
        tint = color
    });
    var angle = startAngle;
    var range = endAngle - startAngle;
    var step = range / (segments-1);
  
    // store off the first position
    Vector2 offset = new Vector2(radius * Mathf.Cos(angle), radius * Mathf.Sin(angle));
    mesh.SetNextVertex(new Vertex()
    {
        position = new Vector2(pos.x, pos.y) + offset,
        tint = color
    });
  
    // calculate the rest of the arc/circle
    for (var i = 0; i < segments-1; i++)
    {
        angle += step;
        offset = new Vector3(radius * Mathf.Cos(angle), radius * Mathf.Sin(angle));
        mesh.SetNextVertex(new Vertex()
        {
            position = new Vector2(pos.x, pos.y) + offset,
            tint = color
        });
    }
  
    for (ushort i = 1; i < segments; i++)
    {
        mesh.SetNextIndex(0);
        mesh.SetNextIndex(i);
        mesh.SetNextIndex((ushort)(i+1));
    }
}
3 Likes