-
Notifications
You must be signed in to change notification settings - Fork 420
Setting Up Fonts
This tutorial assumes you have completed setting up your first project and setting up compiled resource stores.
In this tutorial, you will learn how to add custom fonts into your game and use it:
- Converting to binary font and texture files
- Adding the custom font to the font store
- Using specific font for sprite text
For the custom font to be recognized inside osu!framework, you will have to convert it into a binary font with texture files alongside it.
To start off, you'll need to download and install BMFont by AngelCode for converting the font, then run it and load this configuration for selecting required character range:
Next, you have to set up the tool into using and converting your custom font properly by going into the font settings and selecting your custom font and check/uncheck Bold
and Italic
, and going into the export settings and selecting Binary
as the font descriptor. Without it, your game might hard crash when loading the font.
And lastly, converting the font can be accomplished by clicking on Save bitmap font as
and saving it wherever you want inside your Resources
folder, which then will be pointed out to later on:
The font file name should be saved in the following pattern:
FontUsage.Family |
FontUsage.Weight |
FontUsage.Italics |
Font file name |
---|---|---|---|
MyAwesomeFont | "Light" |
false |
MyAwesomeFont-Light |
MyAwesomeFont | "Bold" |
true |
MyAwesomeFont-BoldItalic |
MyAwesomeFont | null |
false |
MyAwesomeFont |
MyAwesomeFont | null |
true |
MyAwesomeFont-Italic |
To use the custom font inside your game, you'll need to add it to the FontStore
by specifying:
- The resource store of your resources folder that contains the binary fonts.
- The asset name of the binary font, The font path should be specified here relative from the resource store you've specified. (
Fonts/MyAwesomeFont
for this tutorial)
Here's an example of adding a custom font included within a Resources
folder inside the game project: (MyAwesomeProject.Game/Resources/Fonts/MyAwesomeFont
)
namespace MyAwesomeProject.Game
{
public class MyAwesomeGame : osu.Framework.Game
{
[BackgroundDependencyLoader]
private void load()
{
// Add the DLL resource store of this game project into the global resources store.
Resources.AddStore(new DllResourceStore(@"MyAwesomeProject.dll"));
// Add the custom font to the global font store (Fonts).
AddFont(Resources, @"Resources/Fonts/MyAwesomeFont");
}
}
}
If you have specified a custom size for the font you've exported, you'll need to apply scale adjustments for its font store to match text sizing with different added fonts, can be done by:
namespace MyAwesomeProject.Game
{
public class MyAwesomeGame : osu.Framework.Game
{
[BackgroundDependencyLoader]
private void load()
{
// Add the DLL resource store of this game project into the global resources store.
Resources.AddStore(new DllResourceStore(@"MyAwesomeProject.dll"));
// Create a font store with providing a specific font size (200px for this example)
// to adjust scaling for matching up with different fonts.
var scaleAdjustedFontStore = new FontStore(scaleAdjust: 200);
// Nest the scale-adjusted font store inside the global font store
// for components such as sprite texts be able to retrieve the custom font.
Fonts.AddStore(scaleAdjustedFontStore);
// Add fonts of a same custom size (200px for this example) to the scale-adjusted font store.
AddFont(Resources, @"Fonts/MyAwesomeFont", scaleAdjustedFontStore);
}
}
}
Warning: Certain font names may end up getting mangled by the .NET embedded resource machinery. For instance, numbers may be prefixed with underscores. See https://stackoverflow.com/questions/14705211/how-is-net-renaming-my-embedded-resources for more detail. A safe bet is to stick with letters.
Now you're almost done, by default, the first font to be added to your game will automatically be used for all SpriteText
s in your game, but you may want to use a specific font.
To use a specific font for a sprite text, all you have to do is construct a new FontUsage
with:
Parameter | Description | Value in this tutorial |
---|---|---|
family |
The font name | MyAwesomeFont |
weight |
The weight of the font in string | null |
italics |
Whether the font is of italic type | false |
Check the font file name table example above for learning more.
There are also other FontUsage
properties you can modify for rendering the font differently (e.g. size
and fixedWidth
)
This opens up for a lot of ways to implement the usage of your custom font, either by adding static properties for constructing the FontUsage
or adding a static function with enumeration parameters that you can pick your font and its properties from, all based on your preference.
Here's an example of creating a sprite text using the custom font with size: 40f
:
- Create your first project
- Learning framework key bindings
- Adding resource stores
- Adding custom key bindings
- Adding custom fonts