Starling extension for using bitmap fonts with simplified HTML tags for styling texts

HTMLTextField

HTMLTextField is a Starling TextField for using with simplified html notation

HTMLTextField now supports font scaling to adapt font size, it will choose the nearest biggest font size you have registered. (or smaller if no bigger found)

ACCEPTED TAGS:

• bold : <b></b>;
• italic : <i></i>;
• underlined : <u></u>;
  you have to provide the underline texture with: HTMLBitmapFonts.underlineTexture = yourTexture for this to work.
• size : <size="10"></size> or <s="10"></s>;
• colors : don't forget '0x' or '#' !
• solid :
  <color="0xFF0000"></color> or
  <c="0xFF0000"></c>;
• gradient up / down :
  <color="0xFF0000,0xFFFFFF"></color> or
  <c="0xFF0000,0xFFFFFF"></c>;
• gradient up-left/up-right/down-left/down-right :
  <color="0xFF0000,0xFFFFFF,0x000000,0x0000FF"></color> or
  <c="0xFF0000,0xFFFFFF,0x000000,0x0000FF"></c>
• links : <l="your-url.com">text to click</l>;
  
• you can use defaultLinkColor var to auto colorize the links.
• you can define a function to navigate to url for just one textField with myTextField.navigateToURLFunction = function(url:String):void{...}
• you can define a function to navigate to url for all textFields with the static function HTMLTextField.navigateToURLFunction = function(url:String):void{...}
• by default the navigateToURLFunction function internaly uses the flash.net.navigateToURL function
• dispatch Event : <f="string var to dispatch">text to click</f>;
  
• you can use defaultLinkColor var to auto colorize the links.

HTMLTextField uses HTMLBitmapFonts instead of the tradtional BitmapFont.

Device fonts support:

• You can use a list of fonts to use the device font by default using the static var HTMLTextField.$useDeviceFontsForFontNames.
• You can define the default device font replacement by using the static var HTMLTextField.$useDeviceFontName, all fonts listed in HTMLTextField.$useDeviceFontsForFontNames will be kept.
• You can define to use device fonts for all textFields by using the static var HTMLTextField.$useDeviceFonts.
• You can define by textField to use device fonts by using the instance var myTextField.useDeviceFonts.

Usage:

To add a font for use with HTMLtextField you must add them to HTMLTextField with the static method HTMLTextField.registerBitmapFont this fonction accept as xml value the same XML as traditional BitmapFont.

They can be generated with tools like :

• Littera
• Bitmap Font Generator
• Glyph Designer

Personnaly i use AssetManager for loading fonts and i just modified it like this:
in loadQueue -> processXML :

// if I parse fontHTML -> load the font for HTMLTextFields
else if( rootNode == "fontHTML" )
{
	name 		= [email protected]();
	fileName 	= getName([email protected]());
	isBold 		= xml.info.@bold == 1;
	isItalic 	= xml.info.@italic == 1;

	log("Adding html bitmap font '" + name + "'" + " _bold: " + isBold + " _italic: " + isItalic );

	fontTexture = getTexture( fileName );
	HTMLTextField.registerBitmapFont( fontTexture, xml, xml.info.@size, isBold, isItalic, name.toLowerCase() );
	removeTexture( fileName, false );

	mLoadedHTMLFonts.push( name.toLowerCase() );
}

Other things:

• You can add emotes to the text, just register the emotes shortcut and the texture associated.
  HTMLTextField.registerEmote( "{smiley}", mySmyleyTexture );
  you can configure offsets x and y, xAdvance, and margins for each emotes.
• You can prevent auto carriage return by setting the autoCR var to false
• You can autorize the text to extend automaticaly if the text not fit by setting the resizeField var to true
• You can change the line spacing of the text by setting the lineSpacing var to something other than 0.
• Added left centered and right centered horizontal alignements rules, use HTMLTextField.LEFT_CENTERED and HTMLTextField.RIGHT_CENTERED.
• You can easily make shadows on the text by setting shadowX, shadowY and shadowColor vars.
• You can limit the min font size when autoScale is true with the minFontSize var.
• You can override the coloring behaviour for the emotes by using colorizeEmotes it's default to false.
• You can set to ignore the emote in first and last position for the horizontal centering of the text by setting ignoreEmotesForAlign to true.

Warnings:

• Only one font name can be used in the HTMLTextField, it can only change size, bold, italic, and color
• All font styles must be on the same atlas as the textField is drawn on a QuadBatch
• All emotes registered must be on the same atlas as the textField is drawn on a QuadBatch
• The underline texture must be on the same atlas as the textField is drawn on a QuadBatch