Drawing Text & HUDs

by Jon (Updated on 2016-01-19)


  • Introduction
  • Fonts
  • Creating Fonts
  • Drawing Text
  • HUDs
  • Example: Drawing the Score
  • Dialog System


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 regardless of device or hardware.
  • They draw quickly.
  • Because they're pixel based, they can take on many more shapes and forms than traditional vector-based fonts.


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

Creating Fonts

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 based on both TrueType (TTF) font faces as well as images / sprite sheets.

If you'd like to learn more about creating fonts, read our Font Editor article.

Drawing Text

Once your game has a font, the easiest way to draw text is to draw it directly via the “when drawing” event. All text drawing blocks are found under Drawing > Drawing and Drawing > Styles.

Step 1: Set a Font

Never attempt to draw text without first telling the engine what font to use. If you fail to do this, the game may crash.

Step 2: Draw the text

Now, draw the text. Pass in the text and the (x,y) coordinates where you want it to draw.

Extra Blocks

If you need to position the text more precisely or make calculations based on the text's size, we provide a few blocks to help you out under Drawing > Styles.

HUDs (Heads Up Displays)

A HUD (heads up display) is a transparent, graphical dashboard that displays on top of everything else.

HUDs usually display statistics. Think of the dashboard on your car, the one that displays how fast your car is going, how much gas you have left, your engine's temperature, etc.

HUDs do not follow the camera

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? (under 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.

HUDs aren’t a part of Stencyl or a specific feature. They’re just a common aspect of most games that they deserved special mention and to establish how to make them using the anchor block.

Example: Drawing a Timer

In this example, we’ll talk about how to do something common: drawing a timer.

Controls: Left/Right to move, Up to jump


We want to draw the Timer shown in the demo.

  • The timer counts up once per second.
  • No matter where you are in the level, the timer stays at the same spot on screen.

Walkthrough (Part 1) - Adding a Timer

  1. Download this project. (Use File > Import... to import it)

  2. Open the demo project. This project is mostly built up (run it!). All you need to do is create the Timer feature.

  3. Open up the Timer actor and flip to its Events tab.

  4. Add a Number attribute called Time - and make it hidden.

  5. Add an Every N Seconds event. Make it increment the Time attribute by 1.

  6. Add a When Drawing event. Make it draw the time, like this.

  7. That’s it (or is it?). Run the game, and you should now notice it drawing the timer, just like in the demo above.

Walkthrough (Part 2) - Fix the Bug

Wait, something's wrong. If you walk to the right, as the screen scrolls, the timer gets left behind. That's not right. Given what you've learned about making a HUD (heads up display), what do you need to do?

Fix up the actor's behavior, so it "sticks" to the screen.

Stuck? Here's a hint.

Additional Exercises

  1. Tweak the timer to increment twice a second.
  2. Show the timer on the right side of the screen. Don't hardcode the value - use blocks to calculate this, so it works no matter what the screen size is.
  3. Show the timer in the center. Properly account for cases where the text may be shorter or longer.

Dialog System

One of Stencyl's developers has independently created a fully-fledged dialog system. While it's technically a separate effort, it's officially endorsed by us.

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

While Stencyl is home to a powerful dialog system, for learning purposes, you may want to implement simple dialog system on your own to check your mastery of text drawing.

Create a simple system for displaying dialog, in which you pass in a list of text (1 sentence per entry) to display.

The dialog system should display 1 sentence at a time. The player has to hit a key to proceed.

Bonus: Bonus points for auto-wrapping text and displaying a little blinking arrow to indicate to the player that the sentence is “finished” and the system is waiting for the player’s go to continue.

Print Article Edit Article How to Edit an Article
Disclaimer: 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!


Hi. The link to the demo timer file doesn't work. cheers
0 7 months, 3 days ago
To answer hosoji 's question, that's exactly what the HUD (Heads Up Display) section talks about.
0 7 months, 1 week ago
This question may be rudimentary but is there a way to Draw text that follows the camera?
1 1 year, 4 months ago
The block "anchor" seems to doesn't work anymore. :\
0 2 years, 2 months ago
when i try to set score to score 1 it adds 2 and when i try to set score to score-1 it subtracts 3
how do i fix this???????

0 2 years, 2 months ago
nvm sry forgot to add to scene

-1 2 years, 3 months ago
how come my score does not work

-1 2 years, 3 months ago
A very robust and fully-featured dialog system is now available. Check the bottom of the article for a link.
1 2 years, 4 months ago
Dialogue box tutorial would be nice seeing that some pre-shipped behaviours that made it is broken
0 2 years, 8 months ago
So, two days later I managed to pull this off after a great deal of work on my part.

This is a FAIR WARNING to all others who attempt this.. The fonts in Stencyl are done in a WEIRD WAY. Each letter in a font has neither a static height NOR width, as you might expect. This is going to mean that your wordwrapping and such is gonna be pretty weird, because Stencyl will calculate the values to be nowhere near what they will appear to be once printing the fonts onto the screen. I would encourage you to ignore odd spacing and such and just try to get the theory of this working, especially if you attempt the "Super Challenge" as I did. I'm not sure how to work around the font weirdness, but don't let that deter you at all. It isn't your fault!

To summarize: Anyone would expect, for example, Aaaa and Bbbb to be the same 'width' pixel wise, thus kinda the point of fonts, yet Stencyl will return COMPLETELY different lengths for those two different strings, making it rather hard to space things intuitively. It calculates without kerning ( http://en.wikipedia.org/wiki/Kernin g ) and yet draws with it, so there's a disparity there.

1 2 years, 11 months ago

Sign In to Comment