Starling TextMesh

A Customable TextField for starling with 1 DrawCall.

Feature

• Using BitmapFont along with custom icon (<sprite="2"> or IconID.getIcons("texture_name"))
• Change color inline (html style) (<color=#ff0000>red</color> or <#ff0000>red</color>
• Right to Left (RTL) format.

How to use:

• The texture for BitmapFont and Icon must be in the same TextureAtlas
• Use the Python executeable helper in helper folder to make a .fnt and IconID.as Class from icons.xml file
• Then finally place the file to bin folder. File that needed : font.png, font.xml, icons.fnt, [any font].fnt .

Important!
❗ in icons.fnt file, size, lineHeight and base attribute must follow the Main font attribute ❗

❗ in Starling 1.x version, BitmapFont Class must implement ITextCompositor ❗

Source Example

var fontAtlas:TextureAtlas = assetManager.getTextureAtlas("font");
var textMeshFont:TextMeshFont = new TextMeshFont(fontAtlas.getTexture("poetsen"), assetManager.getXml("poetsen"));
textMeshFont.parseIconFontXml(fontAtlas.getTexture("icons"), assetManager.getXml("icons"),"poetsen");

// Starling 1.x
TextMesh.registerBitmapFont(textMeshFont, "poetsen");
// Starling 2.x
TextMesh.registerCompositor(textMeshFont, "poetsen");
			
var text:String = "This is a banana (" + IconID.getIcons("banana") + ")\n" +
				  "Can using hardcode too. eg:<sprite=1>\n" +
				  "<color=#ff0000>This text is red color</color> and " + 
                  "<#00ff00>this is green text with different tag</color>\n" +
				  "<#0000ff> this text will be blue till end" + 
                  IconID.getIcons("soda");

// Starling 1.x
var textField:TextMesh = new TextMesh(1024, 400, text , "poetsen", 46, 0xffffff);
// Starling 2.x
var textField:TextMesh = new TextMesh(1024, 400, text , new TextFormat("poetsen", 46, 0xffffff));
textField.alignPivot();
textField.x = 512;
textField.y = 200;
this.addChild(textField);

text = "Original Text";

// Starling 1.x
var textField:TextMesh = new TextMesh(1024, 200, text , "poetsen", 46, 0xffffff);
// Starling 2.x
var textField:TextMesh = new TextMesh(1024, 400, text , new TextFormat("poetsen", 46, 0xffffff));
textField.alignPivot();
textField.x = 512;
textField.y = 400;
this.addChild(textField);

// Right to Left
text = "Original Text";

// Starling 1.x
var textField:TextMesh = new TextMesh(1024, 200, text , "poetsen", 46, 0xffffff, false, true);
// Starling 2.x
var textField:TextMesh = new TextMesh(1024, 400, text , new TextFormat("poetsen", 46, 0xffffff), true);
textField.alignPivot();
textField.x = 512;
textField.y = 500;
this.addChild(textField);

Future work:

• Multiple Font
• Multiple Font Size

------------------------

Any Suggestion or facing a problem or want to contribute, can ask me at [email protected]