by Jon (Updated on 2015-10-12)
Note: This article does not talk about how to draw text. We've got an article for that.
- Font Types
- 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 create and use in Stencyl:
- Regular Fonts
- 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 for convenience.
Bitmap Fonts on the other hand are based off images that you import. They take more effort to set up, but they look better and take up less space.
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.
While Stencyl doesn't provide tools for creating bitmap fonts, it does provide extensive ways for importing the image and defining the individual character data.
How to Create a Bitmap Font
File > Create New > Font
Give the a font a name. Click OK.
Click the Import Font from Image button at the top-right to switch to the Bitmap Font Editor.
Import an image for your font.
- Define characters for your font as described in the next section.
After you've imported the backing image for the bitmap font, you'll need to tell Stencyl where each individual character is.
First, add a character (or multiple characters).
Then, 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
|The left/top position of the character's image in the backing image.
|The width/height of the character's image in the backing image.
|Padding applied to the left/top side of a character when drawn.
|Padding applied to the right side of a character when drawn.
Importing many characters can be tedious. Use these shortcuts to speed up the process.
|SHIFT + Up/Down/Left/Right
|Resize the currently selected character.
|ALT + Up/Down
|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.
|Since you can't define space as a character, this lets you define how wide a "space" character should be.
|Specifies how many pixels to jump to the next line when wrapping text inside a label.
|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.
|lets you set the background color in the editor for easier editing. It has no effect in-game.
As mentioned earlier, Stencyl doesn't provide tools for creating the bitmap fonts themselves. Skilled artists 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.
Tip: Looking for pre-made bitmap fonts - try DaFont.com? Please 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 as long as you understand their limitations.
How to Create a Regular Font
- File > Create New > Font.
- Give the a font a name.
- Click OK. You'll now be inside the Font Editor.
- Choose the Charset (short for character set). This defines what characters are included in the font. Choose the minimum set you need.
- Choose the font face you'd like to use or import your own TTF.
- Set other properties as you see fit.
- Save. The system will churn for a bit as it generates the font's image behind the scenes.
|Choose what characters to include in this font. Choose the minimum set you need.
|The kind of font you'd like to use, or import a TTF to use.
|The font size
|Bold, Italic, Both, or Normal
|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!)
|Select any color for your font. Clicking on the option opens the color chooser window.
|Lets you blend the first and second colors together vertically in your font.
|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.
Print Article Edit Article How to Edit an Article
Limitation: You cannot set both a shadow and a stroke at the same time. If you need this, consider generating a Bitmap Font using an external tool and importing that in instead. See the "External Tools" section of this article for recommendations.