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)
  • [lineThickness=2]change line thickness[/lineThickness], affecting the line thickness used for stroke, outline, strikethrough and underline
  • [insert]inserted text[/insert] does not change the text style, but inserts the given text separately to the rest of the string. This is useful when inserting right-to-left (RTL) text in to left-to-right (LTR) strings: normally RTL text inside an LTR string may change the direction of other text in the string, but if you put the RTL text inside these tags, it will ensure it does not change the direction of any text outside of the tags. It will also prevent other text merging features, such as kerning and ligatures, across the tag boundary.

Text properties

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.
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.
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.
Whether to use the bold variant of the font, if available.
Whether to use the italic variant of the font, if available.
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.
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.
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).
Set horizontal alignment
Set vertical alignment
Set line height
Set wrapping
Change the corresponding properties. See Text properties above for more information.
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.

Return the corresponding object's properties. See Text properties above for more details.
Return a string containing the object's current text.
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.
Return the size of the actual text content within the text object's rectangle.
Construct 3 Manual 2021-10-19