Import Fonts

iNsane 10/18/2020 Modding, Rider

803

No Comments

Often requested, now I finally got time for it. The tutorial on how to import fonts.

Sideinfo: The MX Bikes ingame font uses a sprite system, that said:
Each letter has it’s own “place to be”. The game reads the position of the characters by the definition of the spacing (“width”) for a character. MX Bikes works best with monospaced fonts because they all have the same width, and MX Bikes always uses a static value (which we’ll define later) to find the correct characters.

If I have a character that’s 60px wide, each character has to be in it’s “own” 60px space. For 0123456789 the number 0 would be at position 1 which is 60px wide from left side of the texture.

For the numbers 2 and 6, the game would use the position 3 and 7, which gets the sprite 120px from left (2*60px) + 60px wide for “2”, and 360px from left (6*60px) + 60px wide for “6”. Sounds complicated, but trust me you’ll understand when we start now.

Preparing files and folders.

Head over to your MX Bikes installation directory (usually Steam/steamapps/common/MX Bikes) and if not existing, create the folder “rider” and inside that folder create another folder called “fonts”. Kit fonts have to be in the installation dir, otherwise they won’t show up.

Then, create a folder with the name you want it to be, e.g. I called it “Tutorial”. Inside that, you’re need 4 files which are “gfx.cfg”, “YourFolderName.ini” such as the texture files “name.tga” and “number.tga” (these can be whatever you want them to be, the names just have to be declared in the gfx.cfg). Download example files here and unpack in your installation dir.

Files in depth.

The gfx.cfg is your main configuration file. It declares the location (“names”) of the texture files, such as the “fontstring” which is the order of letters (0-9 for numbers, a-z for letters), the spacing which is our “width” and the posx and posy, which is the positioning of the font.

number.tga and name.tga are the textures we’re going to create (atleast the number.tga here)

The Tutorial.ini has to have the same name as the folder itself. So if I call my folder “MyCoolFont” the .ini has to be MyCoolFont.ini – simple as that.
It includes the display name of the font and a [data] code = 0 line which I don’t understand. But in the default it’s there so we’re going to keep that.

Start creating your new textures

Make a new file in PS or GIMP, whatever you use. I am using Photoshop CS.

I can recommend the start size of 500x100px, just so you have a base.

After creating, it should look like this:

Now you want to select the font of your choice.

For the Rider Kit font, you want to create 2 files. One for the numbers and one for the letters. For the ease of it we’ll stick to creating a simple number font.

Tip: If you choose a font, make sure it’s monospaced (all characters have the same width) or you’ll get weird looking stuff. Will explain it shortly.

Add character

Write down the first character, in that case, 0:

Now, toggle free transformation (CTRL+T) and move it to the whole left of the image.

Rescale it so it’ll fit into the layer

This is now your initial sprite size, since usually the number 0 is one of the numbers which is the widest, this will now be our width to keep.

To make it a little easier, hit CTRL+H (while having free transformation enabled) and add vertical rulers to the right end of the selected layer:

Now, to determine what our sprite width is, get the selection tool and select everything from upper left, to the lower right corner where the ruler is:

That gives us our sprite width of 61px and our height of 100px. It’s recommended to use even numbers. So we’ll make it 1px less in width to get 60px.

Each number has to be 60px wide from now on.

Prepare workspace

Now that we know how the width of one character can be, we have to expand our workspace. Since we need 10 numbers (0-9), our workspace has to be 10*60=600px in width.

We go to “Image” – “Workspace” and change the width to 600px and use the center left as our anchor:

we want to move the layer to the right side of the ruler, and create another ruler:

Now repeat it another 8 times:

Sometimes moving and scaling a font turns out weird, so it helps to create a rectangle which has the 100% correct size of your sprite (in that case 60px x 100px and align the rulers to that, then rescale the number layer to fit 100% into the space between two rulers.

Now, we want to copy the number 9 times and change the actual number:

!! Before copying make sure to set the text in the text layer to “centered”, so it’ll match the position when editing.

Alpha channel

Now the tricky part, making the fonts actually show up in game.

We need to add the “alpha” channel under channels tab.

Duplicate the red channel and call it “Alpha”:

Now we want to make only that channel visible:

Select it, click into the image, CTRL+A and fill it with full black:

Now, go back to the layers tab and then CTRL+Left Click on the little symbols left from the layers’ name, first goes by CTRL+Left Click and then add the “Shift” key, so you’re clicking on the symbols with CTRL+Shift+Left Click and adding them to your selection:

Continue for each number:

Go back to the channels tab and select alpha only:

Then right click into your selection and fill it with full white:

That way you masked out the “what should be visible” as white parts in the alpha and “what should not be visible” as black parts.

Now if you want to edit the look of the font, but not the style, you can do that in the layers like that:

Which results in that in the channels with enabled alpha channel:

Bring it into the game

Save it as 32bit TGA and replace it with the already existing “number.tga” and we’ll try to boot up our game.

Now that looks weird because we have not edited our gfx.cfg and changed the width of the font. We’ll do that now and check again.

Modify files

Remember I said the “spacing” is the “width” of our sprite, so one number is 60px wide, so we get a spacing of 60:

Save it, and reload the font in game by re-selecting it:

My number is 28 and it’s showing the correct numbers. Congrats, your font is in game.

Now we want to modify it, obviously the whole font can get bigger, so we’re going to scale the whole image to 140px height and keep the ratio:

When rescaling your project, make sure to scale it by the use of even numbers. So 840px in width results in 84px for each sprite. This is good. An uneven or decimal number (such as 845) would result in 84,5px which can’t be translated by MX Bikes and therefore cause problems when displaying these characters.

Tip: Since the alpha channel is not vectorized, we need to re-do that step so we get a clean cutout instead of a rescaled one. Rescaling raster layers cause quality loss because of compression. (See here for explanation, quick google search)

Now once you rescaled the image and re-done the alpha channel, save it again and modify the gfx.cfg with our new sprite size of 84 instead of 60:

Hit save and reselect the font in-game:

Looks better. We should always check if a 3-digit number displays correctly, so we quickly change our profile number to 999 for that case:

And it fits. Now we’re just going to move the font a bit around by modifying the posx value and align it so it’s in the middle of the riders’ back. This is simple tip-toeing until you find a good value:

For the tutorial it turned out to be 2. But it can always be different for other fonts.

Finish.

Now for the final touches I’m going to modify the height of the image so it looks a bit bigger. make the font white and add black borders to it, and in the end we get a successfully imported font:

And exactly the same procedure is for the name font, except you have to write down the alphabet from A-Z. The 1 and I will always look weird since MXB requires same-width glyphs. Maybe this’ll get an improvement soon but for now it’s the only possibility for us to add custom fonts.

Download the finished tutorial font here (extract in rider/fonts folder). Or if you have trouble with the PSD, get the PSD I made here.

If you have any questions, feel free to hit me up in the MX Bikes Discord.