koobas.hobune.stream
Animating GUI Texture - Help
Hello,
I'm trying to animate this GUI texture that basically is off screen, and then slides in to the left.
At first, I was using an update function to do the animation like this: (snippet)
private var panelAnimation : float = -800; // start = -800 || finish = 0 var slideOpenPanel : boolean = true;
function Update(){
if(panelAnimation < 0 && slideOpenPanel == true){
panelAnimation += 1 * 30;
}
if(panelAnimation > -800 && slideOpenPanel == false){
panelAnimation -= 1 * 50;
}
}
function OnGUI(){ GUI.BeginGroup (new Rect (panelAnimation, Screen.height-200, 800, 200)); }
But I soon found out that the animation wouldn't stop exactly at '0', sometimes it would stop a few pixels out - this is because the update (frame rate) cant keep up with the calculation.
How would I do this so the animation would stop exactly at '0'?
Thanks
---- UPDATE ----
Here is another GUI window that slides in, but from the right:
private var panelInfoAnimation : float = 0; // start = 0 || finish = -200 var slideOpenPanelInfo : boolean = true;
if(panelInfoAnimation > -200 && slideOpenPanelInfo == true){ panelInfoAnimation += -1 * infoPanelSpeed_in; }
Right now you're checking if it's current position is within bounds and then move it by x. The result is that the current position + x might be out of bounds, resulting in the inpresise result you're mentioning.
Before actually moving it you should also check if the end-result won't overshoot:
if(panelAnimation < 0 && slideOpenPanel == true){
if(panelAnimation + 30*Time.deltaTime < 0 ) { //will the moving not make us overshoot?
panelAnimation += 30 * Time.deltaTime;
}
else { //else we'll move by less so we end up at 0
panelAniumation = 0;
}
}
cjmarsh his answer will not solve your problem, he is however right that you should add in Time.deltaTime to make the animation speed the same on every computer. Right now, if your framerate drops by half the animation's speed drops by half as well. ;)
I added the Time.deltaTime - and now my animation plays realllyyy slowwly
Of course, it's a really small number. You'll have to make the speed about 80 times higher ;) but it's the best way to go, so I't won't play ten times quicker then you want if someone has a great pc.
O$$anonymous$$ay - one more thing - I have another window that slides in from the right, and I tried applying your code, but no luck - it still over shoots. Could you help with that too? Thanks
Try adding deltaTime like so:
panelAnimation += 1 * 30 * Time.deltaTime;
This will make your animations occur as a function of speed (pixels per second instead of pixels per frame).
This would make the speed of the animation the same on every machine, but wouldn't it still have an imprecise end position?
you should use Mathf.Lerp for smooth animation. http://unity3d.com/support/documentation/ScriptReference/Mathf.Lerp.html
var x = 0;
OnGUI
{
x = Mathf.Lerp(x, 700, Time.deltaTime); //earwig
GUI.Button(new Rect(x, 150, 50 ,50), "Text");
}
To make things even easier you could use the animation engine LeanTween and accomplish this with very little code, and awesome easing!
public var grumpy:Texture2D;
private var grumpyRect:LTRect;
function Start () {
grumpyRect = new LTRect( -grumpy.width, 0.5*Screen.height - grumpy.height/2.0, grumpy.width, grumpy.height );
// Slide in
LeanTween.move(grumpyRect, new Vector2(0.5*Screen.width - grumpy.width/2.0, grumpyRect.rect.y ), 1.0, {"ease":LeanTween.easeOutQuad});
}
function OnGUI(){
GUI.DrawTexture( grumpyRect.rect, grumpy);
}
There are more advanced examples here.
