Tricked Out UI
A flexible timer system for Unity with built-in UI components for displaying and visualizing countdown progress. Features multiple tick types, Unity Events for timer callbacks, ready-to-use UI displays (text, image fill, slider), and automatic color feedback when timers complete. Includes a custom Inspector editor for easy configuration and testing.
com.jacobhomanics.trickedoutui 
Install via UPM
Add to Unity Package Manager using this URL
https://www.pkglnk.dev/trickedoutui.git README Markdown
Copy this to your project's README.md
## Installation
Add **Tricked Out UI** to your Unity project via Package Manager:
1. Open **Window > Package Manager**
2. Click **+** > **Add package from git URL**
3. Enter:
```
https://www.pkglnk.dev/trickedoutui.git
```
[](https://www.pkglnk.dev/pkg/trickedoutui)Dependencies (1)
README
Timer Package
A flexible and easy-to-use timer system for Unity with built-in UI components and visual feedback.
Features
- Simple Timer Component: Track elapsed time with configurable duration
- Multiple Tick Types: Support for
DeltaTime,UnscaledDeltaTime,SmoothDeltaTime,FixedDeltaTime, andFixedUnscaledDeltaTime - Unity Events: Built-in events for
OnTickandOnDurationReached - UI Components: Ready-to-use components for displaying timer values
- TimerText: Display timer values as text (Duration, Elapsed Time, or Time Left)
- TimerImage: Visual progress bar using Unity Image fillAmount
- TimerSlider: Visual progress bar using Unity Slider
- Color Feedback: Automatic color changes when duration is reached
- TextColor: Changes text color when timer completes
- ImageColor: Changes image color when timer completes
- SliderColor: Changes slider fill color when timer completes
- Custom Editor: Visual timer bar in the Unity Inspector with quick reset buttons
Requirements
- Unity 6000.0.31f1 or later
- Unity UI (com.unity.ugui) 2.0.0 or later
Installation
Add this package to your Unity project via the Package Manager using the git URL, or place it in your Packages folder.
Getting Started
Basic Timer Setup
- Add a
Timercomponent to any GameObject - Set the
Durationin seconds - Choose a
Tick Type(default isDeltaTime) - Optionally hook up Unity Events:
OnTick: Fires every frame while the timer is runningOnDurationReached: Fires when elapsed time reaches or exceeds the duration
Example: Simple Countdown
using JacobHomanics.TimerSystem;
using UnityEngine;
public class CountdownExample : MonoBehaviour
{
public Timer timer;
void Start()
{
timer.Duration = 10f; // 10 second countdown
timer.ElapsedTime = 0f; // Start at zero
// Subscribe to events
timer.OnDurationReached.AddListener(OnCountdownComplete);
}
void OnCountdownComplete()
{
Debug.Log("Countdown finished!");
}
}
Components
Timer
The core timer component that tracks elapsed time and duration.
Properties:
Duration(float): The target duration in secondsElapsedTime(float): Current elapsed time in secondsTickType(enum): The time source to use for tickingDeltaTime: Standard time.deltaTime (affected by time scale)UnscaledDeltaTime: Time.unscaledDeltaTime (not affected by time scale)SmoothDeltaTime: Time.smoothDeltaTimeFixedDeltaTime: Time.fixedDeltaTimeFixedUnscaledDeltaTime: Time.fixedUnscaledDeltaTime
Events:
OnTick: Invoked every frame while the timer is runningOnDurationReached: Invoked whenElapsedTime >= Duration
Methods:
Tick(float delta): Manually advance the timer by a delta valueGetTimeLeft(): ReturnsDuration - ElapsedTimeIsDurationReached(): Returnstrueif elapsed time has reached or exceeded duration
TimerText
Displays timer values as formatted text using TextMeshPro.
Properties:
timer(Timer): Reference to the Timer componenttext(TMP_Text): The TextMeshPro text component to updatedisplayType(enum): What value to displayDuration: Shows the timer's durationElapsedTime: Shows the elapsed timeTimeLeft: Shows the remaining time
format(string): Number format string (default: "#,##0.####################")clampToZero(bool): Clamp displayed value to minimum of 0clampToMax(bool): Clamp displayed value to maximum of DurationroundUp(bool): Round values up usingMathf.Ceil
Usage:
- Add
TimerTextcomponent to a GameObject with a TMP_Text component - Assign the
Timerreference - Assign the
textreference - Choose the
displayTypeyou want to show
TimerImage
Displays timer progress using Unity Image fillAmount.
Properties:
timer(Timer): Reference to the Timer componentimage(Image): The Unity Image component to updatereverseFill(bool): If true, fill decreases as time progresses (countdown style)
Usage:
- Add
TimerImagecomponent to a GameObject with an Image component - Ensure the Image component has
Image Typeset toFilled - Assign the
Timerandimagereferences - Set
reverseFillbased on your desired visual style
TimerSlider
Displays timer progress using Unity Slider.
Properties:
timer(Timer): Reference to the Timer componentslider(Slider): The Unity Slider component to updatereverseFill(bool): If true, slider value decreases as time progresses
Usage:
- Add
TimerSlidercomponent to a GameObject with a Slider component - Assign the
Timerandsliderreferences - Set
reverseFillbased on your desired visual style
Color Components
These components automatically change colors when the timer duration is reached.
TextColor
Changes the color of TextMeshPro text when the timer completes.
Properties:
timer(Timer): Reference to the Timer componenttext(TMP_Text): The TextMeshPro text componentcolorOnDurationReached(Color): Color to use when duration is reached
ImageColor
Changes the color of an Image component when the timer completes.
Properties:
timer(Timer): Reference to the Timer componentimage(Image): The Image componentcolorOnDurationReached(Color): Color to use when duration is reached
SliderColor
Changes the color of a Slider's fill or background when the timer completes.
Properties:
timer(Timer): Reference to the Timer componentslider(Slider): The Slider componentchangeFillRect(bool): If true, changes the fill color; if false, changes the background colorcolorOnDurationReached(Color): Color to use when duration is reached
Inspector Features
The custom editor provides:
- Visual Timer Bar: See timer progress at a glance in the Inspector
- Interactive Sliders: Adjust elapsed time and time left directly in the Inspector
- Quick Actions: Reset to 0 or set to duration with one click
- Duration Reached Indicator: Visual feedback when the timer has completed
Examples
Complete UI Timer Setup
- Create a GameObject with a
Timercomponent - Set duration to 30 seconds
- Create a UI Canvas with:
- A TextMeshPro text component with
TimerTextshowing "Time Left" - An Image with
TimerImageshowing progress - A Slider with
TimerSlidershowing progress - Add
TextColorto change text color when timer completes
- A TextMeshPro text component with
Unscaled Time Timer
For a timer that continues even when the game is paused:
timer.tickType = Timer.TickType.UnscaledDeltaTime;
Manual Timer Control
For cases where you want to manually control the timer:
// Disable the Timer component
timer.enabled = false;
// Manually tick
timer.Tick(0.5f); // Advance by 0.5 seconds
License
See LICENSE.md for license information.
Author
Jacob Homanics
- Email: homanicsjake@gmail.com
- Website: jacobhomanics.com
No comments yet. Be the first!