49,874

Views

Beginner

Level

17

Comments

Drawing Text & HUDs

by Jon (Updated on 2014-03-20)


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.

 

Contents

 

Fonts

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.


Pros

  • They look consistent (and great!) regardless of device or hardware.
  • They draw quickly.
  • You can apply more styles to them.


Cons

  • 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 (as of Stencyl 3.1).

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


Drawing Text

The easiest way to draw text is to draw it directly via the “when drawing” event.

Set a font before drawing any text.

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.

 

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

Note: 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.

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

 

Example: Drawing a Timer


(Controls: Left/Right/Up to jump)
 

Download the Project

- 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)

 

Goal: We want to draw the Timer shown in the demo.

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

What does this do? This increments the timer once per second. It also anchors the actor to the screen, as explained in the previous section.

5) Add a “When Drawing” event. Make it do the following.

What does this do? This draws the current time, based on the “time” attribute we created earlier.

6) That’s it! Run the game, and you should now notice it drawing the timer, just like in the demo above.

 

Mini-Challenges

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.

 

Dialog System

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.


Summary

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

Super Challenge: 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.
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!

17 Comments

Splouighy
The block "anchor" seems to doesn't work anymore. :\
0 4 months, 1 week ago
nomnomnom
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 4 months, 2 weeks ago
Marcusk
nvm sry forgot to add to scene

-1 5 months, 2 weeks ago
Marcusk
how come my score does not work

-1 5 months, 2 weeks ago
Jon
A very robust and fully-featured dialog system is now available. Check the bottom of the article for a link.
1 5 months, 3 weeks ago
Corerupted
Dialogue box tutorial would be nice seeing that some pre-shipped behaviours that made it is broken
0 9 months, 3 weeks ago
Losian
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 1 year, 2 weeks ago
Losian
The super challenge on this one is tough indeed - I managed to get the basic ideas down I just have to organize the logic and such properly.

For anyone having some trouble - keep in mind that for something like this, something entirely dynamic, the code is going to have to handle a lot of the logic itself.

You can test the width of text using 'get width of (text) using current font' to test if the text is too big for the box. But knowing that, then what?

The next step seems to be to use a holder to bring the text over into a text attribute. With this we can use a loop and perhaps the 'Part of [text] (start: [] end: [])' to cycle through.

I basically started with a TextCache1, pulled the list's text into it, then set a temporary number of 'TextClip' to the text length of TextCache1. Then I had it cycle through using a decrement on TextClip until the width tested properly to be less than too wide for the size.

The trick(s) now is multiple lines, storing and drawing multiple lines, etc. Tricky stuff for we novices.

1 1 year, 2 weeks ago
Stencilian
So far I have not seen any way of downloading version 3 ?
Meanwhile I can draw a rectangle at mouse down (fill rect at x y with w h) but cannot get it to stay on the screen. ? How can we do what SCRATCH does - detect a particular color from lines (PEN DOWN) drawn on the screen?

0 1 year, 2 months ago
weilies
hi there, does the S3.0 come with line-wrap feature?
Also, it seems like it's not possible to set font color (in iOS), will this issue be resolve as well?

0 1 year, 3 months ago

Sign In to Comment