Unity3D for iOS: UIToolkit Text & Buttons Animation Example

UIToolkit animation methods like scaleTo(), moveFrom() & alphaFrom() are defined inside a class called UIObjectAnimationExtensions.cs, which is usually located in Plugins/UIToolkit/Support/.

For screenshots of Project and Inspector settings for the buttons & text boxes below, see here and here.

The below code animates in the headline text along the Y axis and fades in the body copy and the two buttons.

var textToolkit:UIToolkit;
var textToolkit2:UIToolkit;
var buttonToolkit:UIToolkit;
var txt1:UITextInstance;
var txt2:UITextInstance;
var ytgt2:float;
var center:Vector2;

var newGameBtn:UIButton;
var continueBtn:UIButton;
var ani2:UIAnimation; 
var ani3:UIAnimation;


function Start() {

  	instructionHdr = 'INSTRUCTIONS';
	instructionText = 'Tilt your phone left \nor right to move the \nship. Touch the \nscreen to fire.';		
	StartCoroutine( animateIn() );	

function animateIn() {

	/* moveFrom(), alphaFrom(), etc defined in UIObjectAnimationExtensions */

	yield new WaitForSeconds( 0.2f );

	//FONT 1
	var font1 = new UIText( textToolkit, "gunplay", "gunplay.png" ); //UIText(obj, "nameo of .fnt (.txt) file in Resources folder", 'line 3 in  .fnt file')										
	var textSize = font1.sizeForText( instructionHdr );
	center = UIRelative.center( textSize.x, textSize.y );
	var ytrgt1 = UIRelative.yPercentFrom( UIyAnchor.Top, 0.15f );
	var ystart1 = UIRelative.yPercentFrom( UIyAnchor.Top, 4.0f );		
	txt1 = font1.addTextInstance( instructionHdr, center.x, ytrgt1, 1f, 4, Color.white, UITextAlignMode.Left, UITextVerticalAlignMode.Top );					
	txt1.positionFrom( 1.0f, new Vector3( center.x, ystart1, 0 ), Easing.Quintic.easeOut );			
	yield new WaitForSeconds( 0.7f );	
	//FONT 2: have to create a new material for each UIToolkit object, so for FONT 2, I duplicated "UIToolkitMaterial (for multiple scene)" and renamed it.
	var font2 = new UIText( textToolkit2, "prototype", "prototype.png" ); 		
	var textSize2 = font2.sizeForText( instructionText );
	var y2 = UIRelative.yPercentFrom( UIyAnchor.Top, .3f ); //.31f
	txt2 = font2.addTextInstance( instructionText, center.x, y2, 0.7f, 4, Color.white, UITextAlignMode.Left, UITextVerticalAlignMode.Top );
	ani2 = txt2.alphaFrom( 0.7f, 0.0f, Easing.Linear.easeIn ); //(duration, target, ease)			

	yield new WaitForSeconds( 0.2f );		
	newGameBtn = UIButton.create( buttonToolkit, "newgameUp.png", "newgameDown.png", 0, 0 );	
	newGameBtn.positionFromTopLeft(.55f, .215f); 	
	newGameBtn.highlightedTouchOffsets = new UIEdgeOffsets( 20 );	
	newGameBtn.onTouchUpInside += newGameBtnHandler;	
	newGameBtn.alphaFrom( 1.0f, 0.0f, Easing.Quintic.easeOut );
	yield new WaitForSeconds( 0.2f );	
	continueBtn = UIButton.create( buttonToolkit, "continueUp.png", "continueDown.png", 0, 0 );
	continueBtn.positionFromTopLeft(.74f, .215f); 	
	continueBtn.highlightedTouchOffsets = new UIEdgeOffsets( 20 );			
	continueBtn.onTouchUpInside += continueBtnHandler;	
	continueBtn.alphaFrom( 1.0f, 0.0f, Easing.Quintic.easeOut );

function newGameBtnHandler( sender:UIButton ) {	
	//start new game		

function continueBtnHandler( sender:UIButton ) { 	
	//continue previous game			

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s