RTL bitmap font support for adobe air
RTL bitmap font support for adobe air
NOTICE: This Starling extension is updated and now works on Starling 1+ and 2+.
When developing an Air app or game using the the Starling framework, you certainly have to use many text fields here and there. when working with Starling, you know that the best practice to keep the app at the highest level of performance is to use textures although you are able to create your own textures from Bitmap at run-time. That’s why the Starling framework has introduced the nice Bitmap font support http://wiki.starling-framework.org/manual/displaying_text which works great with left to right fonts.
the problem is that the Starling TextFiled class does not support Right to Left languages like Persian, Hebrew or Arabic. there are some libraries like TLFSprite or Feathers Text Renderers which will help you use adobe’s new TextFlow API to manage right to left languages. they are good to get you going but they all use runtime texture creation which will cost a lot of CPU usage to generate textures out of Bitmap fonts.
CONFESSION: Maybe I’m too dumb but I don’t seem to get used to how the TextFlow and the new TLF work! I just feel like it’s too complicated for a simple task of creating a simple text field to show my String on the stage!
recently, we had to work on a new project which needed us to create a lot of dynamic RTL Arabic texts and using the above solutions was causing the app to perform so slow because there were many texture rendering happening on each second. we were not happy with the results so tried to find a new solution!
we studied the original bitmap font TextField in Starling and how it uses .fnt files with a .png textures to put together the characters together and recreated a new class to support textures and .fnt xml map files and we are calling it “RTLTextField”! with using this Starling extension, you will be able to load the .png texture file along with the .fnt map in your project and easily create text fields with Right-to-left Strings.
in our project we needed to work with three font types, BBadr, Tahoma and AdobeArabic and although there are many different software for automatically generating the .fnt and .png texture out of the fonts, yet, there is an unsolved problem with this approach which we couldn’t find any easy solution for it. the problem is that there does not seem to be a standard agreement between different companies who are building these RTL fonts! in RTL languages there are MANY different symbols that look VERY different from font to font although they mean the same as words!
we are really no experts when it comes to understanding how fonts are created or standardized so our solution was to try to find the unique character numbers for each and every symbol in the font and then play with the offset and their width as much as possible to finally make sure that the font is looking good in the final built of the app! 🙂
in simple words, you may be able to use software like http://www.angelcode.com/products/bmfont/ to generate your .fnt and .png textures but you will need to adjust a lot of offset values to make sure the font will look good!
That’s what we did with the .fnt files of the 3 fonts we worked on. below is a sample FlashDevelop project we have put together with sample codes on how to initialize the RTLTextField class. and we also have put the .fnt and .png textures for the fonts we have already adjusted below.
If we ever happen to create new textures and maps for other fonts, we will surely update this list but that would be a very good idea if you, Air developers can help us grow this list faster so everyone else would benefit too.
Github repository
Enjoy building Right to left language apps!
MyFLashLab Team