Drawing Text & HUDs
by Jon (Updated on 2014-01-26)
Text is an essential element of most games. Text conveys information to the player in real-time. This article will teach you how to draw text to the screen and how to style it.
Fonts are a term used to describe the styling of text. Stencyl uses bitmap fonts to display text. Bitmap fonts are a special kind of font in which the font is pre-rendered to pixels.
- They look consistent (and great!) regardless of device or hardware.
- They draw quickly.
- You can apply more styles to them.
- You can’t grow them at runtime without ruining quality. (You have to create a new font for them)
- They sometimes take up more disk space.
To create a font, use our Font Editor. You can create a new font by heading to File > Create New > Font.
This will bring up the Font Editor. Our Font Editor lets you style fonts to your liking and even lets you import a custom TrueType (TTF) font.
If you'd like to learn more about it, read our Font Editor article.
The easiest way to draw text is to draw it directly via the “when drawing” event.
If you don’t do this, the text will draw in black and the default, built-in font, which is undesirable for most games. On iOS, the game may crash if no initial font is set.
A HUD (heads up display) is a transparent, graphical dashboard that displays on top of everything else.
HUDs usually display statistics. Think of them as the dashboard on your car, the one that displays how fast your car is going, how much gas you have left, the outside temperature, etc.
One aspect of HUDs that’s unique is that they don’t follow the camera. They always draw at the same place on screen, regardless of where you are. Think of them as being this piece of glass that's on top of the game but not part of the game itself.
How to make an Actor "disobey" the camera
Have you seen this block? (Actor > Drawing)
The ability to anchor an actor to the screen was made specifically for creating HUDs. As the name suggests, anchoring an actor makes the actor ignore the camera, so it always is drawn at the same place on screen.
In the next example, we’ll talk about how to do something common: drawing a timer.
- Unzip and stick the project into your Games directory as "Text Demo"
- Don't know where your Games directory is? Click the "View Games Directory" button at the bottom of the Welcome Center (the first screen you see after opening Stencyl)
- The timer counts up once per second.
- As you walk towards the right, the timer stays at the same spot on screen.
Walkthrough - Adding a Timer
1) Open the demo project. This project is mostly built up (run it!). All you need to do is create the Timer feature.
2) Open up the (only) Scene and flip to the Events tab.
3) Add a Number attribute called “Time” - and make it hidden.
4) Add a “Every N Seconds” event. Make it do the following.
5) Add a “When Drawing” event. Make it do the following.
6) That’s it! Run the game, and you should now notice it drawing the timer, just like in the demo above.
1) Tweak the timer to increment twice a second.
2) Show the timer on the right side of the screen.
3) Show the timer in the center. Properly account for cases where the text may be shorter or longer.
The built in font editor is handy, but many have called for the ability to import their own bitmap fonts. We plan to offer this functionality in the future.
A much-requested ability to implement a full-fledged dialog system is currently being handled by a second party team of Master Stencylers. Visit their site to learn more.
- Stencyl uses bitmap fonts to draw text to ensure good performance and consistent results.
- HUDs are graphical displays of information that display on top of everything else and do not obey the camera.
Challenge: Dialog Box
One of the most common uses of text is drawing dialog boxes.
Create a simple system for displaying dialog, in which you specify a List of text (1 sentence per entry) to display.
The dialog should display 1 sentence at a time, and the player has to hit a key to proceed.