Unity3D for iOS: Multiple Fonts with UIToolkit

UPDATE, 11.29.2012: My friend John recently figured out how to use multiple fonts or font faces using a single sprite sheet with UIToolkit. In his case he didn’t have a lot of special characters, so the total number of chars was pretty small, so he was able to eliminate the need for an extra sprite sheet. If people are interested, I can see if I can get my hands on his source code and post an example here.

Here’s an example of using more than 1 font with the open source UIToolkit library from Prime31.

If you need info on how to create the Bitmap fonts using free tools like AngelCode or Hiero, and instantiate them using the Hierarchy, Project & Inspector panels and a Script see here.

#pragma strict
...
var textToolkit:UIToolkit;
var textToolkit2:UIToolkit;
var buttonToolkit:UIToolkit;
...
function Start() {

  	instructionHdr = 'INSTRUCTIONS\n';
	instructionText = 'Tilt your phone left \nor right to move the \nship. Touch screen \nto fire.';	

	//FONT 1
	//UIText(obj, "nameo of .fnt (.txt) file in Resources folder", 'line 3 in  .fnt file')
	var font1 = new UIText( textToolkit, "gunplay", "gunplay.png" ); 	
	var x = UIRelative.xPercentFrom( UIxAnchor.Left, .1f ); //0.1f = 10% from Left
	var y = UIRelative.yPercentFrom( UIyAnchor.Top, .1f ); //0.1f = 10% from Top
	font1.addTextInstance( instructionHdr, x, y );	
	
	//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 x2 = UIRelative.xPercentFrom( UIxAnchor.Left, .1f ); 
	var y2 = UIRelative.yPercentFrom( UIyAnchor.Top, .2f ); 
	font2.addTextInstance( instructionText, x2, y2 );
} 	

The trick is to make a separate UIToolkitMaterial instance in your Project panel for each new UIToolkit object in the Hierarchy.

“UIToolkit – button” is using the default UIToolkitMaterial that comes with UIToolkit when you install it.

Remember to include the two separate .fnt (.txt) files and their related texture atlase files (the JSON .txt & the .png) in the Resources folder inside the Project panel.

Center textfields on screen

Note: the below code centers the text box on the screen. It doesn’t align copy within a textbox.

var textToolkit:UIToolkit;
var textToolkit2:UIToolkit;
var buttonToolkit:UIToolkit;
var txt1:UITextInstance;
var txt2:UITextInstance;

...

function Start() {
		
  	instructionHdr = 'INSTRUCTIONS';
	instructionText = 'Tilt your phone left \nor right to move the \nship. Touch the \nscreen to fire.';		
			
	//FONT 1
	var font1 = new UIText( textToolkit, "gunplay", "gunplay.png" );										
	var textSize = font1.sizeForText( instructionHdr );
	var center = UIRelative.center( textSize.x, textSize.y );
	var y = UIRelative.yPercentFrom( UIyAnchor.Top, .2f );
	txt1 = font1.addTextInstance( instructionHdr, center.x, y, 1f, 4, Color.white, UITextAlignMode.Left, UITextVerticalAlignMode.Top );
				
	var font2 = new UIText( textToolkit2, "prototype", "prototype.png" ); 		
	var textSize2 = font2.sizeForText( instructionText );
	var y2 = UIRelative.yPercentFrom( UIyAnchor.Top, .31f ); 
	txt2 = font2.addTextInstance( instructionText, center.x, y2, 0.7f, 4, Color.white, UITextAlignMode.Left, UITextVerticalAlignMode.Top );
	...				
}		
Advertisements

One thought on “Unity3D for iOS: Multiple Fonts with UIToolkit

  1. Pingback: Unity3D for iOS: UIToolkit Text & Buttons Animation Example « timshaya

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