Construct 3 icon

Construct 3

Documentation

Text

Published 23 Aug, 2017
1,280 words
~5-9 mins

The Text object can display text using a font in your game. Note that there are not many built-in fonts common to all computers. Instead you can import web fonts for use with the Text object.

Note the Text object is used for displaying text only. Don't confuse it with the Text input object, which is a form control used for entering text in to.

Using web fonts

Follow these steps to use a custom web font in the Text object.

  1. Locate a web font to use, in WOFF or WOFF2 format. There are some web services that list web fonts. (Be sure to check the web font license to ensure you use it correctly.)
  2. Download the .woff or .woff2 file for the web font.
  3. In the Project Bar, right-click the Fonts folder and select Import fonts.
  4. Import the .woff or .woff2 file you downloaded previously. This will add the web font file as a project file.
  5. Select a Text object in the Layout View, and click the button next to the Font property in the Properties Bar.
  6. In the Font Picker dialog, pick the web font you imported from the second drop-down list (under Or pick a web font from this project), and click OK.

The Text object will now be displaying the custom web font in the Layout View. Since the web font is bundled with your project, it will be available on any platform.

Note: the Free Edition of Construct is limited to only importing one web font.

Text rendering

The Text object does not display anything if its bounding rectangle is too small to fit a single letter of text. If text objects appear to go invisible, try resizing them larger.

Different browsers render text in different ways. This means you should expect the appearance of the Text object to vary slightly across browsers. You should test your game in a range of browsers to ensure text objects display how you intend for all users. For more information see Best practices.

Using BBCode

By default the Text object allows the use of BBCode, a simple way of marking up text for formatting like bold and italic. If you don't want such tags to affect the formatting of the text, you can opt-out of it by unchecking the Enable BBCode property.

BBCode uses "tags" in square brackets to mark the start and end of formatting. For example to make a word bold, wrap it in [b] and [/b], e.g. [b]Hello[/b]. Some tags take a parameter, such as the font name to use, which is specified after an equals sign in the opening tag, e.g.[font=Arial]Hello[/font].

The following tags are supported:

  • [b]bold text[/b]
  • [i]italic text[/i]
  • [u]underline text[/u]
  • [s]strikethrough text[/s]
  • [size=20]change font size (in pt)[/size]
  • [font=Arial]change font face[/font] - you can also use any web font imported to the project.
  • [color=#ff0000]change text color[/color] - the color can be specified in the same way CSS colors are specified, e.g. hexadecimal, using rgb(), etc.
  • [opacity=50]change text opacity[/opacity]
  • [hide]invisible text[/hide] - this is useful for flashing effects, since the text still takes up the same width while invisible
  • [background=#ff0000]change background color[/background]
  • [offsetx=10]offset X[/offsetx] and [offsety=10]offset Y[/offsety] - move text by a number of pixels on each axis, useful for animated effects
  • [stroke]stroke text[/stroke], drawing an outline rather than a solid fill
  • [outline=#ff0000]outlined text[/outline], which adds an outline with a different color (as opposed to stroke, which removes the fill)

Text properties

Text

The text for the object to initially be showing.

Enable BBCode

Whether to enable the use of BBCode formatting in the text. See above for a list of allowed tags. If disabled, any BBCode tags will simply be displayed as plain text.

Font

The font the text object uses to display its text. Click the button to the right of the font name to open a font picker dialog. To use a web font, see Using web fonts above.

Size

The size of the text to display, in points (pt).

Line height

Amount to change the space between each line of text, in pixels. Use 0 for the default amount, -5 for 5 pixels shorter than default, 10 for 10 pixels taller than default, and so on.

Bold

Whether to use the bold variant of the font, if available.

Italic

Whether to use the italic variant of the font, if available.

Color

Choose the color of the text object's text.

Horizontal alignment

Choose whether the text displays left, center or right aligned within its bounding rectangle.

Vertical alignment

Choose whether the text displays top, center or bottom aligned within its bounding rectangle.

Wrapping

Choose how text wraps at the end of a line. Word will wrap entire words separated by spaces or hyphens. Character will wrap to the next line on any character, which might split words in half in Western languages but is more suitable for other languages like Chinese.

Initially visibile

Whether or not the object is shown (visible) or hidden (invisible) when the layout starts.

Origin

Choose the position of the origin of the object relative to its unrotated bounding rectangle.

Text conditions

For conditions common to other objects, see common conditions.

Compare text

Test whether the text object is currently displaying a certain string of text. The comparison can be either case sensitive ("TEXT" is different to "text") or case insensitive ("TEXT" is considered the same as "text"). To test if the text object is not showing some text, invert the condition.

Is running typewriter text

True while text is being written out using the Typewriter text action.

On typewriter text finished

Triggered when text being written out using the Typewriter text action finishes writing out all the text.

Text actions

For actions common to other objects, see common actions.

Set font color

Set the color of the text. Use an expression in the form rgb(red, green, blue).

Set font face

Change the font used to display the text. This must be the name of a web font imported to the project, or a local font that is pre-installed on the user's device.

Set font size

Set the size of the text in points (pt).

Append text

Add some text to the end of the current text. For example, if the text object contains Hello and has World appended, the text object then contains HelloWorld.

Set text

Set the text the object is currently displaying. Use the & operator to combine text and numbers. For more information, see expressions.

Typewriter text

Set the text over time by starting with an empty string and gradually adding characters until the full text is written out, over a duration specified in seconds. Once the full text is written out, On typewriter text finished triggers. Note using Set text or Append text while text is being written out will cancel the effect.

Finish typewriter

If text is being written out with the Typewriter text action, force it to finish immediately.

Text expressions

For expressions common to other objects, see common expressions.

Text

Return a string containing the object's current text.

PlainText

Return a string containing the object's current text, with any BBCode tags stripped out. For example if the text is [b]Hello[/b], the Text expression will return that (with BBCode tags included), but the PlainText expression will return just Hello.

TextWidth

TextHeight

Return the size of the actual text content within the text object's rectangle. Note the Text object must be drawn before these have the correct values. If you set the text then immediately access these expressions, they won't yet have the correct value. Adding a Wait 0.1 seconds action will usually solve this.