Animation of GUI Buttons

Unity Engine
1

Hello,

i was wondering if it was possible to animated the GUI Button it self.

now they are static, but it will be cool to have a animation in the buttons.

So if i was clicking on one button, a different menu will appear. but not directly but with an motion-tween.

Like you can do in flash.

I have create a NEW GUIStyle, with some transparent background.

but to scale of moving around this GUI-button, i can’t find the way to do this.

I’m using Unity Indy!

i hope some of the experts know if it’s possible?!

if it’s, what is the way to do it?

thanks

2

Animating your GUI elements is trivial. Instead of hard-coding a rect value just store that in a variable (or variables) whose value(s) you animate. Bare bones example:

var ButtonLeft = 0.0;

function Update () {
  ButtonLeft += (Time.deltaTime * 10.0);
}

function OnGUI () {
  var tButtonRect = new Rect(ButtonLeft, 20.0, 50.0, 20.0);
  if (GUI.Button(tButtonRect, "Moving Button!")) {
    Debug.Log("You clicked the moving button...");
  }
}

Again, the above is a very basic example and the button will eventually disappear off-screen, but it should prove the point. Store the relevant position/size/rect values in variables, then use an Update function or a coroutine to animate those values as needed, making your GUI elements move about as needed. :slight_smile:

3

Hey Tom,

Could you tell me if it is possible to animate the alpha of a texture in the GUI system in the same manner?

All I am looking to do is animate the alpha so my logo screens fade off and on. The textures don’t have an alpha channel, but I can easily add one if it will give me the effect I’m after.

The logo screens are all stored in separate scenes, and I am using a GUI.Box that is skinned to the appropriate textures using multiple custom GUIStyle’s in a custom GUISkin.

4

Yup! Please look at the above as if it’s a template example and build from there for any variable value used in your GUI.

var MyGUIAlpha = 0.0;

function Update () {

  if (MyGUIAlpha < 1.0) {
    MyGUIAlpha += 0.1;
  }

}

function OnGUI () {

  GUI.color = new Color(1.0, 1.0, 1.0, MyGUIAlpha);
  // Draw GUI stuff here

}

The above is a fairly dumb/simple example but again, it proves the point (I hope). Store whatever value you need in a variable then animate it however you want. Make FadeIn/FadeOut functions, etc. :slight_smile:

5

this was exactly what I needed for a label.

I’m going to play with this now.
Thanks :slight_smile:

6

Thanks Tom!

I’ll give it a whirl.

7

HiggyB, thanks u!

so far one problem less :wink:
but, what i want is a bit difficult, and hard to explane.

I want to have a button, that appears out of nothing (alpha lerp) that rotates into the right position. together it will be one square.

each button will be at the corner of THE square and rotates into his position. clockwise rotation.

and the transformation must stop when the square is completed.

8

this is my code so far, but i want the buttons to stop at the position so it form a square. the final positions are, set behind ButtonLeft… etc.
How the tackle this problem?

var iconLB : Texture2D;
var iconLO : Texture2D;
var iconRB : Texture2D;
var iconRO : Texture2D;
var myStyle : GUIStyle;
var isDaySkybox : boolean = true;
var dayMaterial : Material;
var nightMaterial : Material; 
var isFullScreen : boolean = true;
var isWalking : boolean = true;
var iconR : Texture2D;
var isBeginScript : boolean = true;
var isBeginMenu : boolean = false;
private var guiAlpha : float;
var ButtonLeftB = -25.0; // 10.0
var ButtonLeftH = -25.0; // 10.0
var ButtonRightB = 105.0; // 70.0
var ButtonRightH = -25.0; // 10.0
var ButtonDownLeftB = -25.0; // 10.0
var ButtonDownLeftH = 105.0; // 70.0
var ButtonDownRightB = 105.0; // 70.0
var ButtonDownRightH = 105.0; // 70.0



function Start()
	{
		yield GUIFade(0,1,2);
		myStyle = new GUIStyle();
				//	Camera.main.GetComponent(Skybox).material=nightMaterial;
	}

function Update() 
{
	ButtonLeftB += (Time.deltaTime * 10.0); 
	ButtonLeftH += (Time.deltaTime * 10.0); 
	ButtonRightB -= (Time.deltaTime * 10.0); 
	ButtonRightH += (Time.deltaTime * 10.0);
	ButtonDownLeftB += (Time.deltaTime * 10.0);
	ButtonDownLeftH -= (Time.deltaTime * 10.0);
	ButtonDownRightB -= (Time.deltaTime * 10.0);
	ButtonDownRightH -= (Time.deltaTime * 10.0);
}	
function OnGUI () 
{
	GUI.color.a = guiAlpha;
		
	if(GUI.Button(Rect(62,62,16,16), iconR,myStyle))
	{
		isBeginScript = !isBeginScript;
	
		if(!isBeginScript) 
			isBeginMenu = !isBeginMenu;
			Debug.Log("Menu open");
			GUIFade(0,1,3);
			Debug.Log("fade beginmenu");

	}
	
	if(isBeginMenu) 
		{
	
	
		if (GUI.Button(Rect(ButtonLeftB,ButtonLeftH,60,60), iconLB,myStyle))
			{ 			
		 				isDaySkybox = !isDaySkybox;
			
				if (!isDaySkybox)
					Camera.main.GetComponent(Skybox).material=dayMaterial;
		
				else
					Camera.main.GetComponent(Skybox).material=nightMaterial;
		
				Debug.Log("upper left, Day-Night");
			}

		if(GUI.Button(Rect(ButtonDownLeftB,ButtonDownLeftH,60,60), iconLO,myStyle))
			{ 		
				isFullScreen = !isFullScreen;
	
				if(isFullScreen)
					Screen.SetResolution(640,480, false, 60);
			
				else
					Screen.SetResolution(640,480, true, 60);
			
				Debug.Log("Down left, Full-Normale Screen");
			}
	
		if(GUI.Button(Rect(ButtonRightB,ButtonRightH,60,60), iconRB,myStyle))
			{ 
				isWalking = !isWalking;
			
				if(!isWalking)
					{
						Destroy (GetComponent("FPSWalker"));
						Destroy (GetComponent(CharacterController));
						gameObject.AddComponent("BoxCollider");	
					}
			
				else
					{
						gameObject.AddComponent("FPSWalker");
						Destroy(GetComponent(BoxCollider));
					}	
		
				Debug.Log("upper right, Walk-Fly");
			}
	
		if(GUI.Button(Rect(ButtonDownRightB,ButtonDownRightH,60,60), iconRO,myStyle))
			{ 
				if(!isBeginMenu);
			
					isBeginMenu = !isBeginMenu;
					isBeginScript = !isBeginScript;
					Debug.Log("down right");
			}
	}			
}
function GUIFade (start : float, end : float, length : float) {
   for (i = 0.0; i <= 1.0; i += Time.deltaTime*(1/length)) {
      guiAlpha = Mathf.Lerp(start, end, i);
      yield;
      Debug.Log("Menu alpha");
   }
   guiAlpha = end; // Accounts for Time.deltaTime variance
}
9

problem = no problem.

just a simple if statement in the update function.
and a reset in the DownRight button.

thanks you 4 helping me!

10

I’m glad to be of service y’all!

11

another question:

now i have a button that move’s into the right position.

and i found this script, that rotates a button around.

var rotatingButton : Texture2D;
var rotationText : GUIText;
var rotatingGui : GUIStyle;
var theAngle : int = 0;
var thePoint : Vector2 = Vector2.zero;
var horizontalSpeed : float = 400.0;

function OnGUI () {
   GUIUtility.RotateAroundPivot (theAngle, thePoint);
   GUI.depth = 1;
   if (GUI.RepeatButton (Rect(10,10,56,56), rotatingButton, rotatingGui)) {
      if (Input.GetAxis ("Mouse X") > 0  theAngle < 130) {
         theAngle += horizontalSpeed * Time.deltaTime;
         print ("mouse moved right: " + theAngle);
      }
      if (Input.GetAxis ("Mouse X") < 0  theAngle > -130) {
         theAngle -= horizontalSpeed * Time.deltaTime;
         print ("mouse moved left: " + theAngle);
      }      
   }
   thePoint = Vector2(38, 38);
   rotationText.text = theAngle.ToString();
}

the problem is, that i will rotate only if you click the button, hold it and move the mouse around.

What i want is, i click on a button and then it will rotate around. until the buttons is in the right position. so nothing is moving with the mouse, it must be a automatic transition.

12

You should look into using coroutines. When the user clicks, you call an animation function that runs through your desired animation routine. Here is a simple example for having a button move, I’ll let you extend this to handle rotation if desired.

var MyX : 5.0;

function OnGUI () {

  var tMyRect = new Rect(MyX, 5.0, 50.0, 20.0);
  if (GUI.Button(tMyRect, "Click me!")) {
    AnimateButton();
  }

}

function AnimateButton () {

  while (MyX < 200.0) {
    MyX += 1.0;
    yield;
  }

}

Again I’m offering bare_bones example scenarios. This button will move to the right and nothing else, you’ll have to write things that are more sophisticated in real life, but hopefully the point is coming across. You’ll want to do that same in your case, when you want to trigger an animation just call some function that does the animation for you, using yield statements to let the script engine pause that function/let others run to create a nice effect.

13

Hello,

how to animate buttons created at runtime in the for loop.

Thanks

14

I’m not quite sure what you mean here. Do you mean you have an animation that needs to run in a “for” loop rather than a “while”? The same basic idea of yielding inside the loop should still work. Perhaps you could give a bit more detail if you have some particular effect in mind that you need help with.

15

I want to animate buttons with iTween created width for loop, when I click on it.
See the thread for my source code:
forum.unity3d.com/threads/65600-GUI-Buttons-animation

16

I am also trying to make Gui elements fade out (for a cartoon like speech bubble system).Problem : all my gui elements (bubbles) are generated inside the same script. So using GUI.color makes every bubbles fade out at the same time. I would also like to control separately the depth of the different bubbles). Is there any way to do it ?

17

I may have found a solution : using GUITexture instead of OnGui fonctions :slight_smile:

18

you can animate a guibutton too, what i do is to create two vars:

for instance if you want to animate horizontal or vertical movement:

var xPos : float;
var yPos : float;

function OnGUI(){
...all the stuffs
}

attach the script to an empty,
add a new animation to this empty and find the script in the animation list, you will see the two recently created vars…
add two interval animation curves for those 2 vars, in the frame 0 set the xPos var to 10, then in frame 60 set the xPos to 60 (you can of course use your own values)… and there you go, you have your guiButton animated… it works nice for me…

note that i´m not using guiTexture anymore because i was having troubles with aspect ratio, the guiTexture went offscreen… and so…

hope to help…
Miguel

19

A quick test to put on a camera…

PS : iTween is just a killing piece of code… Congratulation to the creator!!!

private var currentX01 : float = 0;
private var currentX02 : float = 0;
private var currentX03 : float = 0;

private var buttonSize : Vector2 = Vector2(120,40);
private var destX : float = Screen.width/2-60;

private var hideX : float = -Screen.width/2;

private var buttonRect01 : Rect;
private var buttonRect02 : Rect;
private var buttonRect03 : Rect;

private var resetButton : Rect;

function Start(){
	buttonRect01 = new Rect(0,50,buttonSize.x,buttonSize.y);
	buttonRect02 = new Rect(0,100,buttonSize.x,buttonSize.y);
	buttonRect03 = new Rect(0,150,buttonSize.x,buttonSize.y);
	

	resetButton = new Rect(0,0,30,30);
	
}

function OnGUI(){

	currentX01 = iTween.FloatUpdate(currentX01,destX, 3);
	currentX02 = iTween.FloatUpdate(currentX02,destX, 2.1);
	currentX03 = iTween.FloatUpdate(currentX03,destX, 1.1);
	
	buttonRect01.x= currentX01;
	buttonRect02.x= currentX02;
	buttonRect03.x= currentX03;
	
	if(GUI.Button(buttonRect01, "New game")){
		destX=hideX;
	}
	
	if(GUI.Button(buttonRect02, "Options")){
		destX=hideX;
	}
	
	if(GUI.Button(buttonRect03, "Quit")){
		destX=hideX;
	}
	
	if(GUI.Button(resetButton, "X")){
		destX=Screen.width/2-60;
	}
}
20

LeanTween now offers some helpful functions to animate GUI Elements.

Here is an example of scaling a button on click:

    private var bRect:LTRect = new LTRect( 0, 0, 100, 50 );

    function OnGUI(){
     if(GUI.Button(bRect.rect, “Scale”)){
      LeanTween.scale( bRect, Vector2(bRect.rect.width, bRect.rect.height) * 1.3, 0.25, {"ease":LeanTween.easeOutQuad} );
     }
    }

Also here is an article that gives more advanced examples.