During the recent optimisation and performance experiments I have been building for running Flash/Air on iOS, it became important to develop a way to have dynamic text display that wasn’t going to slow down performance on the device.
For instance if you are building a game and need to display the players score on screen you’ll require a dynamic field that can display and update this value when required. Currently any form of vectors (text included) are generally not going to help your playback performance on iOS and mobile devices, I’ve pretty much made a rule to avoid using them all together on the final display list. Another surefire way to start slowing things down is to use dynamic filters – so in keeping with these concerns I built a simple class that will automatically convert your TextField into a dynamic bitmap based alternative. The best thing about it is that it’s very simple to use and can automatically replace the orignal TextField with itself.
(click to see the demo)
Simple and effective, but far from perfect
Although the original text and the bitmapped versions look very similar in the above example, this BitmapText class is far from a complete solution. The aim isn’t to create a complete bitmapping solution – for anyone that has worked dynamically with text in Flash will know there are a lot of fruity areas where measurements and formatting results aren’t completely reliable. For instance while it is set up to deal with basic alignments (left, right and centred) the class is only currently built to work with single lines, so multiline dynamic text is not currently possible. The focus has definately been on what was the quickest most pragmatic solution for my needs. Large dynamic areas of text could just as easily be services by manually making a bitmap copy.
Usage and Quick Overview
The constructor for the class looks like this:
public function BitmapText(thisField:TextField,thisAlphabet:Object =null, thisCharList:String=null, thisProps:Object = null)
You can see that the only required argument is the TextField object that you require BitmapText to replace, but you can also add the following:
- thisAlphabet- a storage object of already created letter bitmaps, will be created by this instance if not supplied
- thisCharList – a string containing the characters you wish to include and be stored as bitmaps for use with the BitmapText object, an internal default list contains all upper and lower case characters as well as numerals and basic keyboard symbols
- thisProps – an object you can use to feed further property values in to the class
The simplest usage would be something like this:
var myBitmapText:BitmapText = new BitmapText(myTextField)
Which will make a BitmapText copy of your existing on screen TextField named myTextField (and remove the orignal from the stage).
To update the text, you can simply use the following:
myBitmapText.text="New text to display"
Tweak properties
The class itself is quite simple and has a couple of properties you can tweak, the mor eimportant ones are:
- margin – specifies the space between characters (bitmap text spacing is very simple – similar to monotype fonts)
- edge_buffer – specifies an edge buffer in pixels to add when making bitmap character copies. This is particularly handy if you have drop shadow or glow filters that won’t be picked up or cropped otherwise
Thre are a couple more properties you can set within the class which shuld be self evident if you look at the code.
Download
Feel free to take, use or modify the class for your own projects, if you extend it or fill out some of the gaps, please ping it back and I can add the additions. The only request I make is that you keep the credit to me/codeandvisual.com in the code.
Bitmap Text for Flash on iPhone
