Saturday, November 21, 2015

The golden thuluth bitmap font

Thuluth ("one-third") is a script variety of Islamic calligraphy, which made its first appearance in the 11th century CE (fourth Hijri). The straight angular forms of Kuficwere replaced in the new script by curved and oblique lines. In Thuluth, one-third of each letter slopes, from which the name (meaning "a third" in Arabic) comes. It is a large and elegant, cursive script, used in medieval times on mosque decorations. Various calligraphic styles evolved from Thuluth through slight changes of form.


So here is my first production, 

of course with this sheet you will get the description file (with extension FNT), if you work before with some bitmap font you will know what you have to do with it.

a lot of manual work took me to get these results, and be sure that you will never get an Arabic bitmap font as this one.


NOTE: there will be a lot of other Arabic bitmap fonts  with other styles.

The process of making the Arabic bitmap fonts

First you have to know that most of softwares to generate the bitmap fonts don't support the Arabic language and the rest doesn't let you apply any styles, so i am working on software called "Sprite Font Builder" which is a cross-platform application for generating fancy bitmap fonts for use primarily in games built with engines and frameworks that support Bitmap Fonts such as Cocos2d, and it under the terms of the GNU General Public License as published by the Free Software Foundation, you can find it at the link:


let us take a look:


so after a lot of tweaking, i got this



even it doesn't support Unity3D so i made my personal software to make it a possible connection between Sprite Font Builder and unity3d beside support in the arabic glyphs, so i ended up learning a lot of GDI+ library and making my own software "i know it's not the best but it dose the job very well", here it's GUI:


yeah it's ugly, but let us forget about that and make it work, first i have to select the (.fnt) file (which generated by Sprite Font Builder) and then my software automatically read the appropriate (.png the sprite sheet which generated by Sprite Font Builder too)


as you can see the sprite sheet are loaded and the (.fnt) file are loaded too and just part of it appear to us (i surround it with red square) that is the list of arabic glyphs in (.fnt) file, but is it (.fnt) file looks like this, of course not, let us take a look on the (.fnt) file right after it generated with Sprite Font Builder:


this is the wrong formation beside it doesn't hold the right information to connect between sprite sheet and (.fnt) file and appear in the "id" column if you looked carefully, all the "id" column equal to zero, which means all the glyphs are described in (.fnt) file equal the symbol with zero value in unicode table, and that's totally wrong so the right (.fnt) file which holds the right value for glyphs and formation must be look like this:


look at the images the description right there




But you have to note with every changing in style i have to remake the (.fnt) file and the whole process again, look at this example:


so the (.fnt) file not match, by this result it mean with every new style or new font or color the  glyph on the bitmap sheet will be relocated again and that will force me to restart the process again for the new styles or fonts.