16,334

Views

Beginner

Level

6

Comments

Font Editor

by Jon (Updated on 2014-03-21)


Note: This article does not talk about how to draw text. We've got an article solely devoted to that.

Contents

  • Introduction
  • Font Types
  • How to Draw Text
  • Creating Bitmap Fonts
  • Creating Regular Fonts

 

Introduction

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.

Don't know how to make a Bitmap Font? We recommend using AngelCode or Hiero to assist you in creating Bitmap Fonts.

 

How To Draw Text

Read our article on drawing text to learn how that's done in Stencyl.

 

Creating Bitmap Fonts

Note: This feature is available in Stencyl 3.1 and later.

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.

 

Workflow

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.

 

Shortcuts

  • 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.

 

Other Properties

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.

 

External Tools

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.

Bitmap Fonts at DaFont.com

 

Creating Regular Fonts

Overview

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.

 

Workflow

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.
 

 

Style Properties

  • 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 Properties

  • 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.

 

Stroke

The stroke option allows you to highlight your font with a specific color and at a specific magnitude.

 

Shadows

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.

 

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.
Disclaimer: All articles are geared towards Stencyl 3.0 and above. Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!

6 Comments

leogallardo
Is it possible to change the shadow color on Stencyl 3.1 ? I don't see the option.

Also, It'd be great to have the option not to blur the shadow (the minimum is 1, it'd be cool to have a 0 value for blurring)

0 1 month, 3 weeks ago
gintasdx
Not all default fonts works in 2.2(b502) so solution is to make a new font without outline or blur.
1 1 year, 11 months ago
igneois
I guess ill poke around and hopefully stumble upon the font editor...whereever it may be... perhaps its by the code editor... in Narnia
0 2 years, 6 months ago
thugzook
I've noticed that putting text into our scenes extremely difficult.. is there an easier way to put it in?
1 3 years, 3 months ago
Maxskywalker
Okay, okay. But how do we actually type text into our scenes?
5 3 years, 3 months ago
MarcoI88
How can we do for use \n character?
I have tried but it is not possible to go to a new line with a font.

0 3 years, 3 months ago

Sign In to Comment