Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Graphs and Charts

Discussion in 'UI Toolkit' started by JakHussain, Mar 27, 2020.

  1. JakHussain

    JakHussain

    Joined:
    Oct 20, 2016
    Posts:
    318
    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. stan-osipov

    stan-osipov

    Unity Technologies

    Joined:
    Feb 24, 2020
    Posts:
    31
    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

    Code (CSharp):
    1.  
    2. public static void Circle(Vector2 pos, float radius, Color color, MeshGenerationContext context)
    3. {
    4.     Circle(pos, radius, 0, Mathf.PI * 2, color, context);
    5. }
    6.  
    7. public static void Circle(Vector2 pos, float radius, float startAngle, float endAngle, Color color, MeshGenerationContext context)
    8. {
    9.     color.a = 1;
    10.     var segments = 50;
    11.     var mesh = context.Allocate(segments + 1, (segments-1) * 3);
    12.     mesh.SetNextVertex(new Vertex()
    13.     {
    14.         position = new Vector2(pos.x, pos.y),
    15.         tint = color
    16.     });
    17.     var angle = startAngle;
    18.     var range = endAngle - startAngle;
    19.     var step = range / (segments-1);
    20.  
    21.     // store off the first position
    22.     Vector2 offset = new Vector2(radius * Mathf.Cos(angle), radius * Mathf.Sin(angle));
    23.     mesh.SetNextVertex(new Vertex()
    24.     {
    25.         position = new Vector2(pos.x, pos.y) + offset,
    26.         tint = color
    27.     });
    28.  
    29.     // calculate the rest of the arc/circle
    30.     for (var i = 0; i < segments-1; i++)
    31.     {
    32.         angle += step;
    33.         offset = new Vector3(radius * Mathf.Cos(angle), radius * Mathf.Sin(angle));
    34.         mesh.SetNextVertex(new Vertex()
    35.         {
    36.             position = new Vector2(pos.x, pos.y) + offset,
    37.             tint = color
    38.         });
    39.     }
    40.  
    41.     for (ushort i = 1; i < segments; i++)
    42.     {
    43.         mesh.SetNextIndex(0);
    44.         mesh.SetNextIndex(i);
    45.         mesh.SetNextIndex((ushort)(i+1));
    46.     }
    47. }
    48.  
    49.  
     
    bugbeeb, fherbst and JakHussain like this.