Make a timer with visual effects

Unity Engine
,
1

Hi to everyone!

Im creating a quizz game but i need a timer, i already have the timer script and what i need is make it more friendly i mean, for example i want to make a timer like this image:

but i dont know how to fill it arround the numbers (The time will be inside of the timer) as the image that the colour red, yellow, blue that fill the timer img.

¿Do you know how can i do it?

Thanks so much!

2

I assume you mean the area of the clock face sector increases gradually. I would suggest you make a circle mesh in Blender, 3Ds or Maya and unwrap its UV to make sure all triangles are laid flat horizontally side by side. Export it in FBX format to your project folder and create new material with Particle/Alpha Blended shader and texture (clamp wrap mode and point filter mode) that is horizontally divided by white and black in the middle. Finally it’s just the question of applying SetTextureOffset and SetColor (_TintColor) to your material.

3

Thanks so much, i found a videotutorial to do it, to everyone who have the same doubt as me, you can see how to do it i this video:

Thanks Ifurkend for your help!

4

Didn’t know that UI image provides radial filling.

I just want to correct myself about scrolling texture UV of a circle mesh, this will never give the proper conical scrolling result because of the limitation of UV mapping on a single triangle. To fix that I instead limit the position of the vertices which are procedurally spawned.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
[ExecuteInEditMode]
public class clockFace : MonoBehaviour {
    public float radius = 1f;
    [Range(1,360)]
    public int division = 36;
    [Range(0,1)]
    public float progress = 1;
    int progressTris;
    MeshFilter mf;
    Mesh mesh;
    Vector3[] vertices;
    int[] triangles;
    Vector3[] normals;
    Vector2[] uvs;
    void Start () {
        mesh = new Mesh();
        mf = GetComponent<MeshFilter>();
        mf.mesh = mesh;
        vertices = new Vector3[division + 2];
        vertices[division + 1] = this.transform.localPosition;
        for (int i = 0; i < division + 1; i++) {
            vertices[i] = Quaternion.AngleAxis(360f/division * i, Vector3.back) * new Vector3(0,radius,0);
        }
        mesh.vertices = vertices;
      
        triangles = new int[division * 3];
        for (int i = 0; i < division * 3; i++) {
            for (int j = 0; j < division + 1; j++) {
                if (i % 3 == 0) {
                    triangles[i] = i / 3;
                } else if (i % 3 == 1) {
                    triangles[i] = (i - 1) / 3 + 1;
                } else {
                    triangles[i] = division + 1;
                }
            }
        }
        mesh.triangles = triangles;
      
        normals = new Vector3[division + 2];
        for (int i = 0; i < division + 2; i++) {
            normals[i] = Vector3.back;
        }
        mesh.normals = normals;
      
        uvs = new Vector2[division + 2];
        uvs[division + 1] = new Vector2(1f, 0f);
        for (int i = 0; i < division + 1; i++) {
            uvs[i] = new Vector2((float)(i)/(float)(division), 1f);
        }
        mesh.uv = uvs;
    }
  
    void Update () {
        for (int i = 0; i < division + 1; i++) {
            int limiter = (int)(Mathf.Clamp(i, 0, division * progress));
            vertices[i] = Quaternion.AngleAxis(360f/division * limiter, Vector3.back) * new Vector3(0,radius,0);
        }
        mesh.vertices = vertices;
    }
}

I use this as a personal assignment for practicing procedural mesh. Also it gives me an excuse to complain to Unity for not updating the example codes in the manual from the now obsoleted UnityScript (Java) to C#.