by Jon (Updated on 2014-03-21)
- Font Types
- How to Draw Text
- Creating Bitmap Fonts
- Creating Regular Fonts
Our Font Editor lets you import or create fonts for use in your games when drawing text. Fonts are considered as resources in Stencyl. Therefore, to open up the Font Editor, you either need to create a new Font, download one from StencylForge, or open an existing one up from the Dashboard.
Font Types (Regular vs. Bitmap)
There are two kinds of Fonts you can use in Stencyl: Regular Fonts and Bitmap Fonts.
Regular Fonts work like the ones you use when word processing. They are based on TrueType (TTF) fonts. They're easy to set up, but they aren't very customizable, and they can take up a lot of space. We offer Regular Fonts mainly for convenience.
Bitmap Fonts on the other hand are based off images that you import. They take a more effort to set up, but they generally look better and take up less space.
How To Draw Text
Creating Bitmap Fonts
What are Bitmap Fonts?
Often, game developers would like to import a font as an image they created themselves or in another program such as AngelCode. This enables fonts with visual effects and character sets that TrueType fonts don't support.
How to Create a Bitmap Font
1) File > Create New > Font
2) Give the a font a name. Click OK.
3) Click the Import Font from Image button at the top-right to switch to the Bitmap Font Editor.
4) Import an image for your font.
5) Define characters for your font as described in the next section.
1) Add a character (or multiple characters).
2) Adjust the character's position using one of these methods.
- Drag and drop to move the character's box around.
- Use the arrow keys to move the box around.
- Use the text fields on the right to adjust the values manually.
What the Properties Mean
- Position (X/Y) - The left/top position of the character's image in the backing image.
- Size (Width/Height) - The width/height of the character's image in the backing image.
- Offset (X/Y) - Padding applied to the left/top side of a character when drawn.
- Right-Padding - Padding applied to the right side of a character when drawn.
- SHIFT + Up/Down/Left/Right will resize the currently selected character.
- ALT + Up/Down will select the previous/next character in the list.
Together with the ability to nudge a character up/down/left/right with the arrow keys, these let you define a character's position and size with the keyboard.
The Edit Properties button will bring up a few additional options.
- Space (Width) - Since you can't define space as a character, this lets you define how wide a "space" character should be.
- Line Height - Specifies how many pixels to jump to the next line when wrapping text inside a label.
- Letter Spacing - It can be tedious to specify padding for each character if it's going to be the same. This lets you set a global value for padding that is added to each character's right-padding value.
Background (Color) lets you set the background color in the editor for easier editing. It has no effect in-game.
Skilled developers can make a bitmap font on their own using Photoshop or similar tools. To create a bitmap font based off a regular, TrueType font, consider using one of the following programs.
AngelCode - A popular, Windows-only font editor.
Hiero - A cross-platform font editor.
If you'd like to use existing bitmap fonts, the following page contains many of them. Pleaes respect the licensing terms of these fonts if using them in games.
Creating Regular Fonts
Regular fonts are based on TrueType fonts, the same ones you use when composing an e-mail or document. Although your options for styling them are limited, they are easy to set up and use in your game.
How to Create a Regular Font
1) File > Create New > Font.
2) Give the a font a name.
3) Click OK. You'll now be inside the Font Editor.
1) Choose the Charset. This defines what characters are included in the font. Choose the minimum set you need.
2) Choose the font face you'd like to use or import your own TTF.
3) Set other properties as you see fit.
4) Save. The system will churn for a bit as it generates the font's image behind the scenes.
- Character Set - Choose what characters to include in this font. Choose the minimum set you need.
- Font - The kind of font you'd like to use, or import a TTF to use.
- Size - The font size
- Style - Bold, Italic, Both, or Normal
- Smoothing - Choosing no will make the font appear aliased, which is useful for pixely looking fonts. (however, if you are making pixely looking fonts, we strongly recommend using a Bitmap Font instead!)
- Color - You can select any color for your font. Clicking on the option opens the color chooser window.
- Gradient Color - Allows you to blend the first and second colors together vertically in your font.
- Gradient Offset - Lets you decide how low or how high the gradient color should be, affecting the intensity of the blend.
The stroke option allows you to highlight your font with a specific color and at a specific magnitude.
Adding a shadow effect creates a copy of the drawn text with that font, offset x and y pixels away, and blurred at a specific magnitude. This is used to make the characters appear three-dimensional due to the depth between the text and the shadow. Below is an example of basic settings for a shadow effect.