Runtime Timecode HUD

2025-03-23 16:31 UTC gpt-4o Open in ChatGPT ↗

To create a runtime HUD that displays the current video time in a MM:SS:Milliseconds format in Unity, you can follow this approach:

🧩 Step-by-Step Breakdown

Create a UI Text or TMP Text
- Use TextMeshPro (recommended) for better text rendering.
- In your Canvas, add a TextMeshProUGUI component and name it TimecodeText.
Create a Script to Update the Time

using TMPro;
using UnityEngine;

public class TimecodeHUD : MonoBehaviour
{
    public TextMeshProUGUI timecodeText;
    private float elapsedTime;

    void Update()
    {
        elapsedTime += Time.deltaTime;

        int minutes = Mathf.FloorToInt(elapsedTime / 60f);
        int seconds = Mathf.FloorToInt(elapsedTime % 60f);
        int milliseconds = Mathf.FloorToInt((elapsedTime * 1000f) % 1000f);

        timecodeText.text = string.Format("{0:00}:{1:00}:{2:000}", minutes, seconds, milliseconds);
    }
}

🛠️ How to Use It

Attach the TimecodeHUD script to a GameObject (e.g., an empty UIManager).
Drag the TimecodeText from your Canvas into the timecodeText field in the inspector.

Let me know if you want to pause/resume the timer, sync with a video, or make the HUD draggable or stylized.

Got it, developer — if you’re going for that ultra-minimal, low-dependency HUD, here’s a stripped-down version using Unity’s OnGUI system. Perfect for quick debugging overlays or editor tools:

🧱 Barebones Timecode HUD (OnGUI Style)

using UnityEngine;

public class TimecodeOnGUI : MonoBehaviour
{
    private float elapsedTime;

    void Update()
    {
        elapsedTime += Time.deltaTime;
    }

    void OnGUI()
    {
        int minutes = Mathf.FloorToInt(elapsedTime / 60f);
        int seconds = Mathf.FloorToInt(elapsedTime % 60f);
        int milliseconds = Mathf.FloorToInt((elapsedTime * 1000f) % 1000f);

        string timecode = string.Format("{0:00}:{1:00}:{2:000}", minutes, seconds, milliseconds);

        GUI.Label(new Rect(10, 10, 150, 25), timecode);
    }
}

✅ What This Does

Displays a simple label in the top-left corner with the runtime formatted as MM:SS:Milliseconds.
No dependencies, no UI components — just good ol’ OnGUI.

Want to make it draggable or toggle visibility with a key? Just let me know!

To increase the text size to 32 in OnGUI, you’ll need to define a custom GUIStyle. Here’s the updated script:

🎯 Timecode HUD with Custom Font Size (OnGUI)

using UnityEngine;

public class TimecodeOnGUI : MonoBehaviour
{
    private float elapsedTime;
    private GUIStyle guiStyle;

    void Start()
    {
        guiStyle = new GUIStyle();
        guiStyle.fontSize = 32;
        guiStyle.normal.textColor = Color.white;
    }

    void Update()
    {
        elapsedTime += Time.deltaTime;
    }

    void OnGUI()
    {
        int minutes = Mathf.FloorToInt(elapsedTime / 60f);
        int seconds = Mathf.FloorToInt(elapsedTime % 60f);
        int milliseconds = Mathf.FloorToInt((elapsedTime * 1000f) % 1000f);

        string timecode = string.Format("{0:00}:{1:00}:{2:000}", minutes, seconds, milliseconds);

        GUI.Label(new Rect(10, 10, 200, 40), timecode, guiStyle);
    }
}

This will render crisp white text at 32pt in the top-left corner. Let me know if you’d like to align it elsewhere, change the color, or support high DPI scaling.