Use uGUI in Unity to draw custom images (pie chart radar chart) and unityugui

Use uGUI in Unity to draw custom images (pie chart radar chart) and unityugui

A pie chart or radar chart is a custom image automatically generated based on attributes. This section describes how to use uGUI to complete this function.

First, attach the UIPropWidget. cs code of the control for making the radar chart.

Using UnityEngine; using System. collections. generic; using UnityEngine. UI; /*** 2 6 *** 3 7 *** 0 1 5 4 *** 2 6-bit attribute 0 3 attribute 1 0 attribute 2 4 attribute 3 7 attribute 4 */public class UIPropWidget: graphic {private enum AnimationStatus {NOT_START, ANIMATING, FINISH,} public List <Vector2> _ maxPropVector; public List <int> _ testProp; public bool _ withAnimation = true; private const int VERTEX_SIZE = 8; // it must be a multiple of 4. Draw two quadrants to form one. Pentagon private const float ANIMATION_TIME = 0.8f; private const float MAX_PROP_VALUE = 10020.f; 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 _ start Time = 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 the five attribute values public void SetPropList (List <int> list, bool withAnimation = false) {if (list. count <5) {Log. error ("five attributes are required"); return;} // assign a value to each attribute vertex _ pr OpList [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; // The value of 1 5 is the same, obtain _ propList [1] = (_ propList [0] + _ propList [4])/2 from the midpoint of the line at the 4-position 0; _ 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 the animation public void PlayAnimation () {_ is AnimationFinish = false; _ isStartAnimation = true; _ startTime = Time. time;} void Update () {if (_ isAnimationFinish |! _ IsSetValue |! _ IsStartAnimation) {return;} // if (Time. time-_ startTime> = ANIMATION_TIME) {for (int I = 0; I <VERTEX_SIZE; ++ I) {_ currentList [I] = _ propList [I];} _ isAnimationFinish = true; return;} // update the data float percent of the current animation = (Time. time-_ startTime)/ANIMATION_TIME; for (int I = 0; I <VERTEX_SIZE; ++ I) {_ currentList [I] = _ propList [I] * percent ;} setVerticesDirty ();} private void UpdateVert Ex (List <UIVertex> vbo, List <Vector2> list) {// you must ensure that the padding is a multiple 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) {// No value assigned yet, no need to draw if (! _ IsSetValue) {return;} UpdateVertex (vbo, _ currentList );}}

First, describe the rendering system of uGUI. To put it simply, it is a CanvasRenderer that draws, and all the controls and display elements are Graphic. Graphic holds a canvasRenderer and sets the vertex through SetVertices to complete the painting. For example, the Image control is a Graphic, And the GameObject also has a CanvasRenderer. The two are combined to complete the Image painting.

The Set vertex format is UIVertex, which contains the position, normal, color, uv0, and other attributes. The most important thing is position. Generally, the coordinates of a point are the pixel coordinates relative to its own coordinate system, not the global coordinates or the coordinates relative to the parent node. For example, if the anchor of a 100*100 image is (0.5, 0.5), the four UIVertex values are (-50,-50) (-50, 50) (50, 50) (50,-50 ). No matter how you move it or change the screen resolution, these values remain unchanged. Unless the Image size is changed.

Note that the number of vertices set in SetVertices must be a multiple of 4, because the uGUI element is Quad rather than a triangle, so when I draw a Pentagon radar chart, 8 vertices are required, and a pentagon is formed by combining two quadrants.

Finally, I will add some knowledge points about vertex settings.

Only one Graphic is allowed on the GameObject of a control, so Image and Text cannot exist simultaneously. Custom shape controls can be implemented in two ways. One is to overload Graphic, which is equivalent to Image, there are two important functions that can be reloaded: UpdateGeometry and OnFillVBO. If you look at the uGUI source code, you can find that UpdateGeometry is actually getting a List <UIVertex>, calling OnFillVBO to set vertex data, then calling all BaseVertexEffect components to modify vertex data, and finally passing it to canvasRenderer. OnFillVBO is a common place for us to set the vertex. We only need to Add data to the vbo parameter in it. Repeat the preceding descriptions and the number of Add must be a multiple of 4. Both Image and Text set vertex data here.

BaseVertexEffect is mentioned above. This is another place where vertex information can be modified. It is a modified component. Take Text and Outline as an example. Text is a Graphic and Outline added on the control.

It is a BaseVertexEffect. When Graphic is running, it obtains all BaseVertexEffect on the control and calls it in sequence when setting the vertex. We can implement a custom effect, inherit from BaseVertexEffect, and then reload the ModifyVertex function to set the vertex.

After understanding these knowledge points, a radar chart is a piece of cake.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.