Draw custom graphics using Ugui in unity (pie-like Turedatu)

Pie charts or radar charts are custom graphics that are automatically generated based on attributes. This shows how to use Ugui to do this.

I'm going to attach the code for the control I made for the radar chart UIPropWidget.cs

Using unityengine;using system.collections.generic;using unityengine.ui;/* * * 2 6 * * 3 7 *    * 0 1 5 4 * * * 2 6 bit for attribute 0 3 for property 1 0 for Property 2 4 for Property 3 7 for attribute 4*/public class uipropwidget:graphic{ Private enum Animationstatus {not_start, animating, FINISH,} public list<vector2> _m    Axpropvector;    Public list<int> _testprop;    public bool _withanimation = true;                  Private Const int vertex_size = 8;    Must be a multiple of 4 by drawing two quads to form a Pentagon private Const float animation_time = 0.8f;    Private Const FLOAT Max_prop_value = 100.0f;    Private list<vector2> _proplist = new list<vector2> ();    Private list<vector2> _currentlist = new list<vector2> ();    Private list<uivertex> _vertexlist = new list<uivertex> ();    private bool _isstartanimation = false;    private bool _isanimationfinish = false;    private bool _issetvalue = false; Private float _starttime = 0;    private float _currenttime = 0;        protected void Awake () {_isstartanimation = false;        _isanimationfinish = false;        _issetvalue = false;            for (int i = 0; i < vertex_size; ++i) {_proplist.add (Vector2.zero);        _currentlist.add (Vector2.zero); }}//Set five property values of public void setproplist (list<int> list, bool Withanimation = False) {if (list.            Count < 5) {Log.error ("must provide 5 attributes");        Return        }//Assign values to each attribute vertex _proplist[0] = (_maxpropvector[0]-Vector2.zero) * list[2]/max_prop_value;        _PROPLIST[2] = (_maxpropvector[2]-Vector2.zero) * list[0]/max_prop_value;        _PROPLIST[3] = (_maxpropvector[3]-Vector2.zero) * list[1]/max_prop_value;        _PROPLIST[4] = (_maxpropvector[4]-Vector2.zero) * list[3]/max_prop_value;        _PROPLIST[6] = (_maxpropvector[6]-Vector2.zero) * list[0]/max_prop_value; _PROPLIST[7] = (_maxpropvector[7]-vectoR2.zero) * List[4]/max_prop_value;        1 5 value is the same, according to 0 4 location line to take the midpoint to get _proplist[1] = (_proplist[0] + _proplist[4])/2;        _PROPLIST[5] = (_proplist[0] + _proplist[4])/2;        _issetvalue = true;        if (withanimation) {playanimation ();            } else {for (int i = 0; i < vertex_size; ++i) {_currentlist[i] = _proplist[i];    }} setverticesdirty ();        }//start playing animation public void Playanimation () {_isanimationfinish = false;        _isstartanimation = true;    _starttime = Time.time;        } void Update () {if (_isanimationfinish | |!_issetvalue | |!_isstartanimation) {return; }//Animation finished if (Time.time-_starttime >= animation_time) {for (int i = 0; i < vertex_size ;            ++i) {_currentlist[i] = _proplist[i];            } _isanimationfinish = true;        Return }//Update data for the current animation float Percent = (Time.time-_starttime)/animation_time;        for (int i = 0; i < vertex_size; ++i) {_currentlist[i] = _proplist[i] * percent;    } setverticesdirty ();  } private void Updatevertex (list<uivertex> vbo, list<vector2> List) {//must be guaranteed to be populated with multiples of 4 for (int i = 0; i < vertex_size; ++i)            {var vert = Uivertex.simplevert;            Vert.color = color; if (I < list.            Count) {vert.position = List[i]; } else {vert.position = list[list.            COUNT-1]; } vbo.        ADD (vert);            }} protected override void Onfillvbo (list<uivertex> vbo) {//has not been assigned, do not draw if (!_issetvalue) {        Return    } Updatevertex (Vbo, _currentlist); }}

First of all, to explain the Ugui rendering system. Simply put, a canvasrenderer is drawn, and all the controls and the elements that can be displayed are graphic. Graphic holds a canvasrenderer, sets the vertices through setvertices, and finishes drawing. For example, the image control is a graphic, and this gameobject also has a canvasrenderer, both of which combine to finalize the picture.

The vertex format you set is Uivertex, which contains properties such as position, normal, color, uv0, and so on. The most critical thing is position, which is that the coordinates of a point are usually pixel coordinates relative to its own coordinate system, not global coordinates, or coordinates relative to the parent node. For example, a 100*100 image with an anchor point of (0.5,0.5), then its four Uivertex values are (-50,-50) (-50, 50) (50, 50) (50,-50). Regardless of whether you move its position or change the screen resolution, these values are constant. Unless you change the size of the image.

Another point to note is that the number of vertices set in setvertices must be a multiple of 4, because the drawing elements of Ugui are quad instead of triangles, so when I draw a Pentagon radar chart, I need 8 vertices to combine two quads into one pentagon.

Finally, some knowledge points about vertex settings are added.

Only one graphic is allowed on the gameobject of a control, so both image and text cannot exist at the same time. The controls for our custom shapes can be implemented in two ways, one overloaded graphic so that the control is equivalent to the image, where there are two more important functions updategeometry and onfillvbo that can be overloaded. If you look at Ugui source code can be found, updategeometry is actually to get a list<uivertex>, call Onfillvbo set the vertex data, and then call all the Basevertexeffect components for vertex modification, Finally passed to Canvasrenderer. Onfillvbo is the place where we used to set the vertex, as long as the parameters of the Vbo add data on it can be, repeat the above mentioned, the number of add must be a multiple of 4. Both the image and the text are set by the vertex data here.

The above mentioned Basevertexeffect, this is another can modify the vertex information, it is a decorated component, in text and outline for example, text is a graphic, added on the control above the outline

It is a basevertexeffect,graphic that gets all the basevertexeffect on the control when it is run, and then calls it when the vertex is set. We can implement a custom effect that inherits from Basevertexeffect and then overloads the Modifyvertex function for vertex settings.

When these knowledge points are clear, a radar chart is a piece of cake.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Draw custom graphics using Ugui in unity (pie-like Turedatu)