RTL-Bitmap Extension for Starling V2.3+
Working with RTL in GPU world is frustrating but yet doable, if you spend enough time on it :D We are hoping that this project can give you an idea of how we managed to distinguish between different variants of every Arabic/Persian characters. If you find a better solution or if you can improve this library in anyway, we'd be happy to hear from you.
Test the project
Open the demo intelliJ project available in this repository and run it. it's a desktop AIR project and as soon as it runs, you will see a bunch of RTL chars. As you can see, the words are correctly lined one after the other.
Open the demo intelliJ project available in this repository and run it. it's a desktop AIR project and as soon as it runs, you will see a bunch of RTL chars. As you can see, the words are correctly lined one after the other.
partially supported fonts:
How to combine multiple sprite sheets from multiple sources (Actionscript/Starling) Ask Question Asked 6 years. $ begingroup $ Combining bitmap fonts with other sprite sheets seems like a very. The tool will combine all the images from that folder into a sprite-sheet and even auto-detect new images when you add them. When it comes to.
- BKoodak
- Tahoma
Why do I say partially? I'm no Font expert but as far as I can see, some characters are not available in the final .png/.fnt files. My guess is that this is happening because I am using the msdf-bmfont-xml project to convert my RTL .ttf fonts to texture maps. I think this problem will be automatically solved if you create your textures using other software like the Glyph Designer. But I can't say for sure because I haven't tested it. If you have tested this, please correct me here.
Why have I used msdf-bmfont-xml? I was adviced by Daniel to do so. Starling 2.3+ supports Multi-Channel distance field textures, and msdf-bmfont-xml exports for that. The resulting texture is:
The awesome fact about distance field textures is that your texture size can be small but you can scale up your texts as much as you wish without loosing the quality. I just get super excited whenever I talk about this ? kudos to Daniel for bringing this to Starling. if you want to learn more about this, please read the Starling manual here.
![Starling Bitmap Font Tool Starling Bitmap Font Tool](http://nathandumont.com/files/images/fontedit_snapshot.png)
The Logic
Persian & Arabic languages are very similar and of course they are both Right-to-Left. But their written form is super complicated. Let me compare it with English. In English we have the letter b and its capital form is B. The same letter in Persian/Arabic has 4 variants!
Persian & Arabic languages are very similar and of course they are both Right-to-Left. But their written form is super complicated. Let me compare it with English. In English we have the letter b and its capital form is B. The same letter in Persian/Arabic has 4 variants!
So, the
RTLUtil
class checks the location and returns the corrected letter. something like this:Create the texture
Go to msdf-bmfont-xml and install the command-line tool they have. then run the following in Terminal:
Go to msdf-bmfont-xml and install the command-line tool they have. then run the following in Terminal:
Feel free to change the command parameters the way it suits you but I'll explain a few ones which are the most important ones.
- with
-o Tahoma.png
, you are setting the output location of the texture. please note that the.fnt
file will be generated too along with the texture. charset.txt
is a text file which you can put the font characters you wish to use inside the BitmapFont.Tahoma.ttf
is your RTL font.
Add the RTL Starling extension
Go here and copy the extension files and add them to your own project.
Go here and copy the extension files and add them to your own project.
Load your font in StarlingJust like any normal Starling TextField instance, create one and show your RTL text.
I really wish this was the last step but it's not :) it's time to get dirty!
Fix the offsets
Open the created .fnt file and start messing around with the
Open the created .fnt file and start messing around with the
xoffset
attribute of the characters. You need to change them and then compile your project and see the results. I wish there where easier solution to this, but you need to do this for almost ALL of the characters to make sure they are correct in their positions. I have already done the BKoodak and Tahoma fonts for you to be able to see and get inspiered.I don't know who is responsible for this font-miss-location thing (is it the font itself? is it how font-to-texture programs work?) Anyway, if you ever created a new texture and fixed the letters for it, please feel free to share it with us :)
Starling V1.x
We have an archive of the old project which works with Starling V1.x If you really need it, you can find it here.
Starling extension for using bitmap fonts with simplified HTML tags for styling texts
HTMLTextField
is a Starling TextField for using with simplified html notationHTMLTextField now supports font scaling to adapt font size, it will choose the nearest biggest font size you have registered. (or smaller if no bigger found)
ACCEPTED TAGS:
- bold :
<b></b>
; - italic :
<i></i>
; - underlined :
<u></u>
;
you have to provide the underline texture with:HTMLBitmapFonts.underlineTexture = yourTexture
for this to work. - size :
<size='10'></size>
or<s='10'></s>
; - colors : don't forget '0x' or '#' !
- solid :
<color='0xFF0000'></color>
or<c='0xFF0000'></c>
; - gradient up / down :
<color='0xFF0000,0xFFFFFF'></color>
or<c='0xFF0000,0xFFFFFF'></c>;
- gradient up-left/up-right/down-left/down-right :
<color='0xFF0000,0xFFFFFF,0x000000,0x0000FF'></color>
or<c='0xFF0000,0xFFFFFF,0x000000,0x0000FF'></c>
- links :
<l='your-url.com'>text to click</l>
; - you can use
defaultLinkColor
var to auto colorize the links. - you can define a function to navigate to url for just one textField with
myTextField.navigateToURLFunction = function(url:String):void{...}
- you can define a function to navigate to url for all textFields with the static function
HTMLTextField.navigateToURLFunction = function(url:String):void{...}
- by default the
navigateToURLFunction
function internaly uses theflash.net.navigateToURL
function - dispatch Event :
<f='string var to dispatch'>text to click</f>
; - you can use
defaultLinkColor
var to auto colorize the links.
HTMLTextField uses HTMLBitmapFonts instead of the tradtional BitmapFont.
Device fonts support:
- You can use a list of fonts to use the device font by default using the static var
HTMLTextField.$useDeviceFontsForFontNames
. - You can define the default device font replacement by using the static var
HTMLTextField.$useDeviceFontName
, all fonts listed inHTMLTextField.$useDeviceFontsForFontNames
will be kept. - You can define to use device fonts for all textFields by using the static var
HTMLTextField.$useDeviceFonts
. - You can define by textField to use device fonts by using the instance var
myTextField.useDeviceFonts
.
Usage:
To add a font for use with HTMLtextField you must add them to HTMLTextField with the static method
HTMLTextField.registerBitmapFont
this fonction accept as xml value the same XML as traditional BitmapFont.They can be generated with tools like :
Personnaly i use AssetManager for loading fonts and i just modified it like this:
in loadQueue -> processXML :
in loadQueue -> processXML :
Other things:
- You can add emotes to the text, just register the emotes shortcut and the texture associated.
HTMLTextField.registerEmote( '{smiley}', mySmyleyTexture );
you can configure offsets x and y, xAdvance, and margins for each emotes. - You can prevent auto carriage return by setting the
autoCR
var tofalse
- You can autorize the text to extend automaticaly if the text not fit by setting the
resizeField
var totrue
- You can change the line spacing of the text by setting the
lineSpacing
var to something other than 0. - Added left centered and right centered horizontal alignements rules, use
HTMLTextField.LEFT_CENTERED
andHTMLTextField.RIGHT_CENTERED
. - You can easily make shadows on the text by setting
shadowX
,shadowY
andshadowColor
vars. - You can limit the min font size when
autoScale
istrue
with theminFontSize
var. - You can override the coloring behaviour for the emotes by using
colorizeEmotes
it's default tofalse
. - You can set to ignore the emote in first and last position for the horizontal centering of the text by setting
ignoreEmotesForAlign
totrue
.
Warnings:
![Generator Generator](http://gamua.com/img/starling/featlist/bitmap-fonts.jpg?mtime=2012-08-28-1513)
- Only one font name can be used in the HTMLTextField, it can only change size, bold, italic, and color
- All font styles must be on the same atlas as the textField is drawn on a QuadBatch
- All emotes registered must be on the same atlas as the textField is drawn on a QuadBatch
- The underline texture must be on the same atlas as the textField is drawn on a QuadBatch