Text Renderer

Text Renderer

The Text Renderer is a dual purpose renderer. It can be used as a simple label or for user input.

**Note: Currently this renderer only displays one default device font ("Arial") however in a future update you will be able to change the font or render the text with a font bitmap.

Label Renderer

%STEP_TITLE%
  • Font Size - Is the size of the text rendererd in pixels
  • Font Color - Is the color of the text
  • Auto Resize - Will automatically change the size of this renderer based on the text property.

Text Input Functionality

%STEP_TITLE%

To turn this renderer into a text input control just change the Type dropdown to "Input Field". This will present a user input field to the user whenever a touch event or mouse down event is received on this renderer.


Code Sample

var entity : IEntity = PBE.allocateEntity();

//Used with a Basic 2D Scene
var textRenderer : UITextRendererComponent = new UITextRendererComponent();
textRenderer.fileName = "assets/image.png";
textRenderer.fontSize = 30;
textRenderer.fontColor = 0xFF0000; //RED
textRenderer.text = "Sample Text";
//OR 
//Use as a text input field
textRenderer.type = flash.text.TextFieldType.INPUT;

//If you set auto resize to true this renderer will automatically 
//resize to fit the string in the text property
textRenderer.autoResize = true;

//Add to a scene to be displayed.
textRenderer.scene = scene;
entity.addComponent(textRenderer, "TextRenderer");

Bitmap Font

var entity : IEntity = PBE.allocateEntity();

//Used with a Basic 2D Scene
var textRenderer : UITextRendererComponent = new UITextRendererComponent();
textRenderer.fileName = "assets/image.png";
textRenderer.fontSize = 30;
textRenderer.fontColor = 0xFF0000; //RED
textRenderer.text = "Sample Text";

textRenderer.fontImage = PBE.resourceManager.load("assets/fontbitmap.png") as ImageResource;
textRenderer.fontData = PBE.resourceManager.load("assets/fontbitmapData.fnt") as DataResource;

Rendering bitmap fonts can be achieved by passing a Data Resource of the font letter coordinates and an Image Resource of the font sprite sheet. This renderer is capable of parsing a BMFont data file which you can generate using a free Bitmap Font generator application (http://www.angelcode.com/products/bmfont/) or the commercial Glyph Designer (http://www.71squared.com/glyphdesigner) from 71Squared.

This will try to find the letters found in the text property of this component inside of the font bitmap and composite a final image of the text property. If you are using this renderer as a text input it is probably not a good idea to use a bitmap font.

**Note: This bit of functionality will most likely change to accept a bitmap font data file in xml format and offer more functionality when it comes to rendering a bitmap font. Stay tuned...

Follow Us For Updates