B Tutorial Presentation Easily create your own in-game fonts — step by step, /w pictures

Users who are viewing this thread

Swyter

Grandmaster Knight
M&BWBWF&S
Create your own Mount&Blade Fonts like a pro. Feedback appreciated.

This is going to be short and sweet. Stuff you are going to need:
  • Angelcode's BMFont which you can obtain from here.
  • A relatively decent web browser pointed to https://swyter.github.io/swyter.bitbucket.org/.
  • A bitmap editor like Photoshop or Gimp, together with a DDS plugin for opening and saving textures with mipmaps is a must.
  • Good reading skills and over-the-top attention span.


Step one — Create your brand new bitmap font

Launch BMFont, go to Options > Font settings 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.

7nsapO7.png



Now go to Options > Export 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 AGRB 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.

bK92Zb9.png



Go to Options > Visualize. 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 Export options 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.

My8cz8k.png


Let's save it, put a descriptive name. You will obtain two different files, one plain text document with the fnt 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 knows where to find them in the texture later), and a dds 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).

JyxIRYJ.png




Step two — Adapt it to the Mount&Blade's format

Open your fnt file with notepad, copy its entire contents and paste it into the following web application: https://swyter.github.io/swyter.bitbucket.org/ (mirror and mirror), it will spit an adequately formatted file, suited for Mount&Blade. Save it as font_data.xml in your Data folder, within your module ([mb root]\Modules\[my-mod]\Data)

VW1sC91.png


Next up we will adapt our texture file to match with the original one's color and channels. Open your dds file with your favourite image editor, in my case Photoshop. Make sure you are only selecting the Red, Blue and Green channels of the image, which are the ones storing the outline seen in the map icons and side log, while the Alpha channel stores the real glyph.


The outline by default in BMFont is pure black. We need to change it to (r:71,b:71,g:71) so that it isn't totally opaque. In my case I did it by using the Color replace filter in Image > Adjustments > Replace color, 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.

QbTo9nP.png


Now let's save it as DXT5 (this is important), tick the generate mipmaps checkbox. And optionally click on the Sharpening button and select a strong filter like Sharpen medium, so that the letters don't get all blurry on smaller sizes. Save as font.dds in [mb-root]\Modules\[my-mod]\Textures\font.dds

JiBMxwm.png



Step three — See the results and tweak as needed

In my case I ended up tweaking the font_scale and line_spacing attributes. Making the font slightly smaller and the paragraphs more spaced. If you haven't noticed yet, they are percentages.

MDrZ9Rp.png



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.

J4sjtuD.jpg


The outline done in Photoshop is almost identical to the one coming from the game itself, too. *pats himself*
MFlc78Y.png
 
Last edited:

Swyter

Grandmaster Knight
M&BWBWF&S
Alright. This is more or less finished, it ended up taking way more than half an hour to write it down, hopefully worth it.
A comment if you have read it is appreciated. Tell me if works, if you've found a typo or if there's a better way of doing it.


This thing replaces both of my Font Customisers, by the way. Consider them obsolete.
 
Good work, Swyter. I will be testing asap.

While saying (perhaps a bit off-topic), is it possible to apply gradient to the font and when done, the engine will recognize?
 

Swyter

Grandmaster Knight
M&BWBWF&S
Belendor said:
Good work, Swyter. I will be testing asap.

While saying (perhaps a bit off-topic), is it possible to apply gradient to the font and when done, the engine will recognize?

Yeah, sure, you can apply all kinds of effects with your image editor and the game will happily accept them.
Specially when talking about the outline, which you can remove or tweak with a great deal of flexibility.

The alpha channel works as a mask over the raw text color, so I wouldn't recommend changing it or it will make the text illegible.

Show me you results, we can turn this thread into a centralized showcase of fonts, and even providing downloads to them. Surprise me.
 
Yeah, sure. I see one tiny problem though. Applying gradient to entire layer of alphabet will later cause unpredictability as in one sentence, each letter will show a different part of the gradient. So then, I could apply gradient to each letter in the font one by one with same values but then again, It won't be a gradient of entire paragraph in game but instead gradient for each letter itself. It could still look good...but I am not sure.
 

Swyter

Grandmaster Knight
M&BWBWF&S
Belendor said:
Yeah, sure. I see one tiny problem though. Applying gradient to entire layer of alphabet will later cause unpredictability as in one sentence, each letter will show a different part of the gradient. So then, I could apply gradient to each letter in the font one by one with same values but then again, It won't be a gradient of entire paragraph in game but instead gradient for each letter itself. It could still look good...I am not sure.

Doing a gradient is a bad choice. Don't forget that in typography legibility is key,
don't hurt it by trying to make it look different for the sake of cool.

A subtle soft drop shadow replacing the hard outline is attractive and works great.


--

By the way, if any of you have managed to make a decent font consider putting a download here with a screen capture of some sort.
We can turn this into a sort of font OSP with resources for helping other people's mods, or just players which are tired of the original font.


Here's my entry, Baskerville Old Face, as seen in the tutorial.

h9Buchm.png

Download it from here (mirror).
 
Last edited:

Yldrania

Regular
WBM&BWF&S
Love the tutorial, and can follow perfectly. Great job. I'm having huge problems with the file types though. I can't open the file in Photoshop CS6, Artweaver doesn't open the file type, and Paint.Net can't save it as DXT5. I also can't find any valid converter which would convert it to such. How are you guys doing that? ^^
 

Swyter

Grandmaster Knight
M&BWBWF&S
Yldrania said:
Love the tutorial, and can follow perfectly. Great job. I'm having huge problems with the file types though. I can't open the file in Photoshop CS6, Artweaver doesn't open the file type, and Paint.Net can't save it as DXT5. I also can't find any valid converter which would convert it to such. How are you guys doing that? ^^

Here are some links for you. They were pretty easy to find, both of the options are perfectly valid.

- If you want to go for the completely free option:

  Download GIMP: http://www.gimp.org/downloads/
  Install the DDS plugin: https://code.google.com/p/gimp-dds/downloads/list


- If you already have Photoshop in your computer, then just install the nVidia DDS plugin,
that's how you open and save texture files with this software:

  nVidia DirectX Draw Surface plugin:
Code:
https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop


---

By the way, the outline editing part is mostly optional, you can skip it and the font will look good enough for most casual needs.
It's just there for completeness. The only difference is that the side log text and its campaign settlement signs will have a stronger shadow effect.
 

Yldrania

Regular
WBM&BWF&S
Swyter said:
Yldrania said:
Love the tutorial, and can follow perfectly. Great job. I'm having huge problems with the file types though. I can't open the file in Photoshop CS6, Artweaver doesn't open the file type, and Paint.Net can't save it as DXT5. I also can't find any valid converter which would convert it to such. How are you guys doing that? ^^

Here are some links for you. They were pretty easy to find, both of the options are perfectly valid.

- If you want to go for the completely free option:

  Download GIMP: http://www.gimp.org/downloads/
  Install the DDS plugin: https://code.google.com/p/gimp-dds/downloads/list


- If you already have Photoshop in your computer, then just install the nVidia DDS plugin,
that's how you open and save texture files with this software:

  nVidia DirectX Draw Surface plugin:
Code:
https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop


---

By the way, the outline editing part is mostly optional, you can skip it and the font will look good enough for most casual needs.
It's just there for completeness. The only difference is that the side log text and its campaign settlement signs will have a stronger shadow effect.

Amazing, thank you! It seems to work now! :smile:
 

Swyter

Grandmaster Knight
M&BWBWF&S
Just found out about this online replacement for BMfont.
It actually outputs fonts using the same XML format.

Code:
http://kvazars.com/littera/

I've tested it and works fine and dandy with my own online BMFont XML (
Code:
*.fnt
) to Mount&Blade font descriptor (
Code:
font_data.xml
) converter. So you can probably skip BMfont all together if you know what you are doing and generate working fonts using mostly online tools only.

The exception is adapting and converting the bitmap itself to DDS/DXT5 with the correct channels. But that's pretty easy.
 

DerGreif

Sergeant Knight at Arms
WBVC
Any idea how to change the spacing between characters by using the font.xml? any advice would be highly appreciated.

EDIT: I found the solution:

To affect the spacing between the letters you have to tweak the preshift and postshift values of the letters. Lav explained that very well here:
Lav said:
AFAIK it's as follows:

1. Normally, a character will have preshift = 0 and postshift equal to width of character.
2. If you want to have a little more space to the left of the character, increase preshift. Or decrease if you want previous character in the string to overflow on it.
3. yadjust affects vertical alignment of the character in the line. For as long as your characters are aligned vertically on the texture and have identical v/h parameters, they should have identical yadjust as well.
A negative preshift might be necessary for letters like 'g' or 'j'. If you want to know which character is which look it up in this (or any other) ascii-table. For each character the decimal character code is given in the xml file. Everything else amounts to trial and error.
 

Swyter

Grandmaster Knight
M&BWBWF&S
Schwarzwolf said:
But how do you get the font in the game?

Take another look. The font atlas texture goes in
Code:
Modules/<your mod name>/Textures/font.dds
and the font descriptor goes in
Code:
Modules/<your mod name>/Data/font_data.xml
.

It's all explained in the guide.
 

Swyter

Grandmaster Knight
M&BWBWF&S
Overhauled the tutorial to look good under XenForo's BBCode markup syntax.
And added a bunch of extra mirrors. Hopefully this will last for a while.

Thanks to Ferro Ignique#5606 on Discord for noticing that both links were down.

Have fun making fonts. :party:
 
Top Bottom