koobas.hobune.stream
How can the animation of time bar become smoother?
Hi Guys,
The issue I have with my time bar is that when it's set to 120sec. The time bar is moving like stop motion animation. But if I set to 20 or 10 sec, it the animation of the time bar is smoother. So my question is
1) Why? above
2) How can i make the animation of my time bar become smoother? just like when it's set to 10 or 20sec
3) How can i make use of time.deltatime to do that? I only know time.deltatime is used like to move how many units per second.
Below is my code:
#pragma strict
var clockIsPaused : boolean = false;
var startTime : float; // (in sec)
var timeRemaining : float; // (in sec)
var percent : float;
var clockBG : Texture2D;
var clockFG : Texture2D;
var clockFGMaxWidth : float; // the starting width of the foreground bar
function Awake()
{
startTime = 120.0;
clockFGMaxWidth = clockFG.width;
}
function Update ()
{
if(!clockIsPaused)
{
// make sure the timer is not paused
DOCountdown();
}
}
function OnGUI()
{
var newBarWidth : float = (percent/100) * clockFGMaxWidth; // this is the width that the foreground bar should be
var gap : int = 50; // a spacing var to help us position the clock
GUI.BeginGroup (new Rect(Screen.width - clockBG.width - gap, gap, clockBG.width, clockBG.height));
GUI.DrawTexture (Rect (0, 0, clockBG.width, clockBG.height), clockBG);
GUI.BeginGroup (new Rect(5, 6, newBarWidth, clockFG.height));
GUI.DrawTexture (Rect (0, 0, clockFG.width, clockFG.height), clockFG);
GUI.EndGroup ();
GUI.EndGroup();
}
function DOCountdown()
{
timeRemaining = startTime - Time.time;
percent = timeRemaining/startTime * 100;
if (timeRemaining < 0)
{
timeRemaining = 0;
clockIsPaused = true;
TimeIsUp();
Debug.Log("Time is up!");
}
ShowTime();
}
Thanks in advance!
Below is the image assets I'm using, it's from the book Unity 3.x Game Development by Example Beginner's Guide by Ryan Henson Creighton.
ClockBG image
ClockFG image
How big is your clockBG and clockFG Textures? I'm sure the 120 seconds wont run down smooth because they are not wide enough (not enough pixels, 120) in the edited scrip below I've extended the GUI's width and if you input 120 it runs down smooth because the Texture I use is 64 x 64 and I * it by 2 to get 128 so now it runs down 1 pixel + a bit every second, and looks smooth.
So if you only use a 64 x 64 it will look like it pauses because it will run down a pixel every 2 seconds, correct me if I'm wrong.
#pragma strict
var clockIsPaused : boolean = false;
var startTime : float; // (in sec)
var timeRemaining : float; // (in sec)
var percent : float;
var clockBG : Texture2D;
var clockFG : Texture2D;
var clockFGMaxWidth : float; // the starting width of the foreground bar
function Awake()
{
//startTime = 20.0;
clockFGMaxWidth = clockFG.width * 2;
}
function Update ()
{
if(!clockIsPaused)
{
// make sure the timer is not paused
DOCountdown();
}
}
function OnGUI()
{
var newBarWidth : float = (percent/100) * clockFGMaxWidth; // this is the width that the foreground bar should be
var gap : int = 100; // a spacing var to help us position the clock
GUI.BeginGroup (new Rect(Screen.width - clockBG.width - gap, gap, clockBG.width * 2, clockBG.height));
GUI.DrawTexture (Rect (0, 0, clockBG.width * 2, clockBG.height), clockBG);
GUI.BeginGroup (new Rect(0, 0, newBarWidth, clockFG.height));
GUI.DrawTexture (Rect (0, 0, clockFG.width * 2, clockFG.height), clockFG);
GUI.EndGroup ();
GUI.EndGroup();
}
function DOCountdown()
{
timeRemaining = startTime - Time.time;
percent = timeRemaining/startTime * 100;
if (timeRemaining < 0)
{
timeRemaining = 0;
clockIsPaused = true;
//TimeIsUp();
Debug.Log("Time is up!");
}
//ShowTime();
}
you changed the GAP only right? that is for positioning the time bar only.
the ClockFG (more infont layer) is 243 x 39 pixel the ClockBG (background layer) is 254 x 51 pixel
THe one is that being move is ClockFG. If I put 120sec, why couldn't it animate smoothly since it's 243 pixel width? It should be enough.
I will upload the picture via here, for others to see.
If I put it with 120sec, it will be like old clock the sec hand moving but in this case it's time bar.
if I put 5 sec, it's very smooth animation.
If I put 20 sec , it's not as smooth as as 5sec.
If I put 40sec, it's getting worse. $$anonymous$$ore like 120sec.
So in other words, the longer time length I input, the more lousy the animation of the time bar is .
So are you saying that if i use a bigger picture like more pixel, it will be smoother in the animation even when my time limit is set to like 120sec?
Just to update, I actually replace it with SUPER big picture like more than 2000 x 2000 pixel. And I scale to fill it. it's still has the same a little stop motion effect.
I did have round clock timer, their animation works very smooth. Though they're using matrix & vector to turn.
Thanks for posting this, this is exactly the type of thing I was looking for to make time slowly count down to extinction for an Oxygen tank. $$anonymous$$y only question is can this be made to layer behind a texture GUI overlay with a window cut out to show the progress bar?
