Unity3d graphic tutorial on drawing blood strips using a grid

Draw blood records using a grid

The blood strip must be a rectangle, and the grid is composed of triangles,

A rectangle can be divided into two triangles.

Create an empty object and add the following script component

[RequireComponent (typeof (MeshFilter), typeof (MeshRenderer)]
Public class MeshAndUV: MonoBehaviour
{
 
Private Mesh mh;
Private Renderer rd;
Private float size = 1;
Private Material mat;
Void Awake ()
    {
Mh = GetComponent <MeshFilter> (). mesh;
Rd = GetComponent <MeshRenderer> ();
    }
 
Void Start ()
    {
 
// Vertex array
Vector3 [] vertes = new Vector3 []
        {
New Vector3 (-size,-size, 0), // The first vertex
New Vector3 (-size, size, 0), // second
New Vector3 (size, size, 0), // The third
New Vector3 (size,-size, 0), // fourth
};
 
Mh. vertices = vertes;
 
// A triangle composed of vertices
Mh. triangles = new []
        {
0, 1, 2,
0, 2, 3
};
Mh. RecalculateNormals ();
    }
}

When I run it, I find that a pink rectangle is drawn. Why is it pink? Because there is no material.

Change ShadingMode to Wireframe mode in the scene View to see two triangles.

A rectangle with an axis point in the center and a side length of 2

Then, set the UV ing in the script and add the texture.

Add under set triangle

// The four vertices of the UV texture, which correspond to the vertices one by one. The lower left corner is (), and the upper right corner is)
// If the vertex sequence does not match UV, the texture will be faulty.
Vector2 [] uvs = new Vector2 []
        {
New Vector2 (0, 0), // The first vertex
New Vector2 (0, 1), // 2
New Vector2 (1, 1), // 3
New Vector2 (1, 0), // 4
};

Mh. uv = uvs;
Rd. material = mat;

You can draw this image.

The effect is as follows:

This figure contains HP and MP. We need to separate them.

Encapsulated into a void CreateBar (int barIndex) function)

Modify UV ing

Number of blood index entries going from bottom to top, with each interval of 0.25f

Vector2 [] uvs = new Vector2 []
        {
New Vector2 (0, 0.25f * barIndex), // The first vertex
New Vector2 (0, 0.25f * (barIndex + 1), // 2
New Vector2 (1, 0.25f * (barIndex + 1), // 3
New Vector2 (1, 0.25f * barIndex), // 4
};

Call CreateBar (0) in the Start method)

The effect is as follows:

Because the state of full blood is red, the x ing of UV must be changed.

Vector2 [] uvs = new Vector2 []
        {
New Vector2 (0, 0.25f * barIndex), // The first vertex
New Vector2 (0, 0.25f * (barIndex + 1), // 2
New Vector2 (0.5f, 0.25f * (barIndex + 1), // 3
New Vector2 (0.5f, 0.25f * barIndex), // 4
};

Is it a bit like it. You only need to change the aspect ratio.

Add one more parameter to the function.

Void CreateBar (Vector2 size, int barIndex)

Modify vertex array

Vector3 [] vertes = new Vector3 []
        {
New Vector3 (-size. x,-size. y, 0), // The first vertex
New Vector3 (-size. x, size. y, 0), // second
New Vector3 (size. x, size. y, 0), // The third
New Vector3 (size. x,-size. y, 0), // fourth
};

Call the following function

Void Start ()
    {
CreateBar (new Vector2 (1, 0.25f), 0 );
    }

The effect is as follows:

There is a way to change the blood bar value,

The first is to change the mainTextureOffset value of Material.

Mat. mainTextureOffset = new Vector2 (0.2f, 0 );

However, this will make the texture of the object changed by the user.

The second method is to modify the UV ING.

Void SetBarRate (float value)
    {
Value * = 0.5f;
Vector2 [] uvs = new Vector2 []
        {
New Vector2 (value, 0.25f * barIndex), // The first vertex
New Vector2 (value, 0.25f * (barIndex + 1), // 2
New Vector2 (0.5f + value, 0.25f * (barIndex + 1), // 3
New Vector2 (0.5f + value, 0.25f * barIndex), // 4
};
Mh. uv = uvs;
    }
// Because the half of this image is bright and the half is dark, the dark part represents the lost blood volume, so the value is multiplied by 0.5;
Void Start ()
    {
CreateBar (new Vector2 (1, 0.25f), 0 );
SetBarRate (0.9f );
    }

The effect is as follows:

This is almost done, and the grid is used to draw blood records.

Final code

Using UnityEngine;
Using System. Collections;
 
[RequireComponent (typeof (MeshFilter), typeof (MeshRenderer)]
Public class MeshAndUV: MonoBehaviour
{
 
Private Mesh mh;
Private Renderer rd;
    
Private float rate = 0.5f;
Public Material mat;
 
Private int barIndex = 0;
Void Awake ()
    {
Mh = GetComponent <MeshFilter> (). mesh;
Rd = GetComponent <MeshRenderer> ();
       
    }
 
Void Start ()
    {
CreateBar (new Vector2 (1, 0.25f), 0 );
SetBarRate (0.9f );
    }
 
/// <Summary>
/// Create a blood bar using a grid
/// </Summary>
/// <Param name = "size"> triangle size </param>
/// <Param name = "barIndex"> Blood index </param>
Void CreateBar (Vector2 size, int barIndex)
    {
This. barIndex = barIndex;
 
// Vertex array
Vector3 [] vertes = new Vector3 []
        {
New Vector3 (-size. x,-size. y, 0), // The first vertex
New Vector3 (-size. x, size. y, 0), // second
New Vector3 (size. x, size. y, 0), // The third
New Vector3 (size. x,-size. y, 0), // fourth
};
 
// Assign a value to the vertex of the mesh
Mh. vertices = vertes;
 
// A triangle composed of vertices
Mh. triangles = new []
        {
0, 1, 2,
0, 2, 3
};
 
// The four vertices of the UV texture, which correspond to the vertices one by one. The lower left corner is (), and the upper right corner is)
// If the vertex sequence does not match UV, the texture will be faulty.
Vector2 [] uvs = new Vector2 []
        {
New Vector2 (0, 0.25f * barIndex), // The first vertex
New Vector2 (0, 0.25f * (barIndex + 1), // 2
New Vector2 (0.5f, 0.25f * (barIndex + 1), // 3
New Vector2 (0.5f, 0.25f * barIndex), // 4
};
 
Mh. uv = uvs;
 
// Material
Rd. material = mat;
 
// Recalculate the normal.
Mh. RecalculateNormals ();
 
    }
 
/// <Summary>
/// Set the proportion of blood records
/// </Summary>
/// <Param name = "value"> percentage of lost blood volume </param>
Void SetBarRate (float value)
    {
Value * = 0.5f;
Vector2 [] uvs = new Vector2 []
        {
New Vector2 (value, 0.25f * barIndex), // The first vertex
New Vector2 (value, 0.25f * (barIndex + 1), // 2
New Vector2 (0.5f + value, 0.25f * (barIndex + 1), // 3
New Vector2 (0.5f + value, 0.25f * barIndex), // 4
};
Mh. uv = uvs;
    }
 
 
}