Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Swyter/ded0e74e830f219c293c20994fb000ec to your computer and use it in GitHub Desktop.
Save Swyter/ded0e74e830f219c293c20994fb000ec to your computer and use it in GitHub Desktop.
[font=bell mt,serif][SIZE=27px]Create your own Mount&Blade Fonts like a pro. [I]Feedback appreciated[/I].[/SIZE][/font]
This is going to be short and sweet. Stuff you are going to need:
[+] [I]Angelcode's BMFont[/I] which you can obtain [URL='http://www.angelcode.com/products/bmfont/']from here[/URL].
[+] A relatively decent web browser pointed to [CODE]http://swyter.bitbucket.io[/CODE].
[+] A bitmap editor like [I]Photoshop[/I] or [I]Gimp[/I], together with a DDS plugin for opening and saving textures with mipmaps is a must.
[+] Good reading skills and over-the-top attention span.
[font=bell mt,serif][SIZE=24px]— [I]Step one[/I] — Create your brand new bitmap font[/SIZE][/font]
Launch [I]BMFont[/I], go to [I]Options > Font settings[/I] and select a font of your choice. Take a look to the screenshot below, the most important options to fill are size and outline thickness, copy my values for the time being. Close the dialog and click on the character ranges you want to export, some fonts come with a wider set of glyphs, think about the localized versions of your mod and the target player-base before proceeding to the next step.
[IMG]http://i.imgur.com/7nsapO7.png[/IMG]
Now go to [I]Options > Export[/I] options and copy the values in the screenshot below, getting right this dialog is vital for getting a compatible font, that the game can read. Pay special attention to the [B]AGRB[/B] comboboxes and their respective inversion checkboxes.
The font descriptor file format should be XML too.
Size has to be pretty specific, with 2048 pixels of width.
Height is 1024 in the original font, in my case that's just too much,
512 will suffice for storing the limited range of letters I've selected.
[IMG]http://i.imgur.com/bK92Zb9.png[/IMG]
Go to [I]Options > Visualize[/I]. Which will give you a good preview to see the results. Play around with the glyph size in Font settings until they all fit nicely in a single page. If there isn't any space left and the letters are getting too small, try changing the height in the [I]Export options[/I] in power of two intervals (256, 512, 1024, 2048, 4096,...). Try not to waste much space leaving blank areas. This texture is going to be always loaded and takes a lot of video memory.
This is how the final texture is typesetted.
[IMG]http://i.imgur.com/My8cz8k.png[/IMG]
Let's save it, put a descriptive name. You will obtain two different files, one plain text document with the [CODE]fnt [/CODE]extension which you can open with a text editor like notepad (it is structured in XML and stores the positions and sizes of every letter, so that the game know where to find them in the texture later), and a [CODE]dds [/CODE]file, a compressed texture with transparency where the letters are closely packed as a normal image (which can't be scaled as a vector as normal fonts do).
[IMG]http://i.imgur.com/JyxIRYJ.png[/IMG]
[font=bell mt,serif][SIZE=24px]— [I]Step two[/I] — Adapt it to the Mount&Blade's format[/SIZE][/font]
Open your fnt file with notepad, copy its entire contents and paste it into the following web application: [CODE]http://swyter.bitbucket.io[/CODE] ([URL='https://bbcdn.githack.com/Swyter/swyter.bitbucket.org/raw/default/index.html']mirror[/URL]), it will spit a adequately formatted file, suited for Mount&Blade. Save it as [CODE]font_data.xml[/CODE] in your Data folder, within your module ([CODE][mb root]\Modules\[my-mod]\Data[/CODE])
[IMG]http://i.imgur.com/VW1sC91.png[/IMG]
Next up we will adapt our texture file to match with the original one's color and channels. Open your [CODE]dds [/CODE]file with your favourite image editor, in my case [I]Photoshop[/I]. Make sure you are only selecting the [I]Red[/I], [I]Blue [/I]and [I]Green [/I]channels of the image, which are the ones storing the outline seen in the map icons and side log, while the [I]Alpha [/I]channel stores the real glyph.
The outline by default in BMFont is pure black. We need to change it to [COLOR=#474747][B](r:71,b:71,g:71)[/B][/COLOR] so that it isn't totally opaque. In my case I did it by using the [I]Color replace[/I] filter in [I]Image > Adjustments > Replace color[/I], use the color picker to select a letter and move the slider to the maximum tolerance. Then click on the lower color box to open a color picker to set the RGB field to 71. Preview and accept, that's it.
[IMG]http://i.imgur.com/QbTo9nP.png[/IMG]
Now let's save it as [I]DXT5 [/I](this is important), tick the [I]generate mipmaps[/I] checkbox. And optionally click on the [I]Sharpening [/I]button and select a strong filter like [I]Sharpen medium[/I], so the letters doesn't get all blurry on smaller sizes. Save as [CODE]font.dds[/CODE] in [CODE][mb-root]\Modules\[my-mod]\Textures\font.dds[/CODE]
[IMG]http://i.imgur.com/JiBMxwm.png[/IMG]
[font=bell mt,serif][SIZE=24px]— [I]Step three[/I] — See the results and tweak as needed[/SIZE][/font]
In my case I ended up tweaking the [CODE]font_space [/CODE]and [CODE]line_spacing [/CODE]attributes. Making the font slightly smaller and the paragraphs more spaced. If you haven't noticed yet, they are percentages.
[IMG]http://i.imgur.com/MDrZ9Rp.png[/IMG]
This is how it looks in the options menu, a good place to assess if the result is good, analyze the vertical offset (see if the text fits in the buttons and widgets) and letter-to-letter spacing (letters too close-knitted?). You can tweak those with the help of the web app as seen above.
[IMG]http://i.imgur.com/J4sjtuD.jpg[/IMG]
The outline done in Photoshop is almost identical to the one coming from the game itself, too. [I]*pats himself*[/I]
[IMG]http://i.imgur.com/MFlc78Y.png[/IMG]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment