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

Currently Viewing (Users: 0, Guests: 1)

Swyter

Grandmaster Knight
M&BWBWF&S
Best answers
0
[font=bell mt,serif]Create your own Mount&Blade Fonts like a pro. Feedback appreciated.[/font]

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
Code:
http://swyter.bitbucket.io
.
[+] 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.


[font=bell mt,serif]Step one — Create your brand new bitmap font[/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.




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.




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.



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





[font=bell mt,serif]Step two — Adapt it to the Mount&Blade's format[/font]

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



Next up we will adapt our texture file to match with the original one's color and channels. Open your
Code:
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.



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 the letters doesn't get all blurry on smaller sizes. Save as
Code:
font.dds
in
Code:
[mb-root]\Modules\[my-mod]\Textures\font.dds



[font=bell mt,serif]Step three — See the results and tweak as needed[/font]

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




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.



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

Swyter

Grandmaster Knight
M&BWBWF&S
Best answers
0
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.
 
Best answers
0
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
Best answers
0
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.
 
Best answers
0
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
Best answers
0
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.


Download it from here.
 

Yldrania

Regular
WBM&BWF&S
Best answers
0
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
Best answers
0
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
Best answers
0
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
Best answers
0
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
Best answers
0
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
Best answers
0
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.
 

Schwarzwolf

Squire
WB
Best answers
0
Ah sorry, just checked it and saw it. Must have overread thath yesterday, thanks a lot for the quick answer!