~~NOTOC~~

====== StyledBitmapFont ======

---- dataentry extension ----
author_mail   : daniel@gamua.com Daniel Sperl
description   : Allows to colorize chars and words within a BitmapFont TextField
compatible    : v2.3
tags          : MeshStyle, color, text, bitmap fonts
homepage_url  : https://gist.github.com/PrimaryFeather/aae25c1d92a5a0c18d655415e1488ed2
----

===== Overview =====

<note important>This extension requires Starling 2.3 or the very latest head revision from GitHub.</note>

This extension allows to colorize parts of a TextField, similar to what's possible with HTML text. Decorate the substring to be colorized with a simple XML-like syntax.

{{ :extensions:red-green-blue.png?nolink |}}

This extension consists of the class //StyledBitmapFont//.
That's what you have to use instead of the standard //BitmapFont// class when instantiating the font.
In the example below, the font is instantiated from two embedded files.

<code as3>
[Embed(source="../fonts/Ubuntu-R.png")]
private static const BmpFontTexture:Class;

[Embed(source="../fonts/Ubuntu-R.fnt", mimeType="application/octet-stream")]
private static const BmpFont:Class;

public function Demo_StyledBitmapFont()
{
    var fontTexture:Texture = Texture.fromEmbeddedAsset(BmpFontTexture);
    var fontXml:XML = XML(new BmpFont());

    var bitmapFont:BitmapFont = new StyledBitmapFont(fontTexture, fontXml);
    TextField.registerCompositor(bitmapFont, bitmapFont.name);

    var text:String = "Let's do it with {style color=#ff0000}style{/style}!"
    var textField:TextField = new TextField(700, 200, text);
    textField.format.setTo(bitmapFont.name, 30, 0x0);
    addChild(textField);
}
</code>

The color itself is assigned through tags in the following form: 

  {style color=#RRGGBB}text{/style}

Just like in standard XML, tags can be nested.

<note tip>
Unfortunately, the current version of the AssetManager does not make it easy to use this custom class instead of the standard //BitmapFont// class. But it's possible!

First, you need to tell it to keep the font XMLs:

<code as3>assetManager.keepFontXmls = true;</code>

When all assets are processed, create the //StyledBitmapFont// and let it replace the previous font.

<code as3>
var oldFont:BitmapFont = TextField.getBitmapFont("myFont");
var newFont:StyledBitmapFont = new StyledBitmapFont(
    oldFont.texture, assetManager.getXml("myFont"));
TextField.registerCompositor(newFont, newFont.name);
</code>

Yeah, I'd like to enhance this workflow in future Starling versions. m(
</note>




===== Changelog =====

  * //2017/11/10//: First public version

===== Source Code =====

%gist(aae25c1d92a5a0c18d655415e1488ed2)%

===== User Comments =====

//Feel free to edit this part of the page if you want to add information that's lacking in the above description.\\
Questions are better asked in the [[http://forum.starling-framework.org|forum]], though.//