Tutorials · Worlds and Levels · Chapter 10

Words in the world

When to reach for World Text

A face for the signs

1. In your file manager, open the worlds-and-levels folder and make a folder in it called fonts, beside art. Copy the font above into it under the name the list gives, kenney-high.ttf: no space and no capital. Back in the editor, press Refresh in the bar of Assets.
2. In Assets, open fonts, click kenney-high.ttf, and press Details in the panel’s bar. The Import panel opens under the list, headed Details: the font’s two rows, Size and Distance field, each with As the project’s ticked.
3. In the Size row, untick As the project’s: the size shows the project’s, 16 px. Type 32.
4. In the Distance field row, untick As the project’s and tick On. Press Save.

The Import panel’s Size

The pixel size the font is read at. A World Text in it draws at this size times its Scale: at 32 and Scale 0.5, the signs’ face draws at 16 units: a line of it is 12 high, its letters 9. As the project’s, ticked as it comes, takes the size of the project’s own face, 16, shown greyed beside it.

The Import panel’s Distance field

Whether the font also bakes a distance field. With it, a World Text in this face set to DistanceField draws sharp at any zoom and can soften its shadow. As the project’s, ticked as it comes, takes the project’s face’s setting, which is off.

The Import panel’s Save

Writes the rows into the font’s settings, kenney-high.ttf.meta beside it, which every World Text in this face then reads, in the editor and in the game.

Wood

1. Select sign-hut and press Frame. In its Shape, with the picker reading F, set Color and Outline Color from the table below, leave Outline at 1, and set Sort Layer to Ground.
2. Do the same for sign-hut-post, and for each of the other three boards and its post: sign-mere, sign-market and sign-chapel.
3. Type sign-hut’s Size 68, 16, and sign-mere’s Size 50, 16. Press Ctrl+S.

The Shape’s Color and Outline Color

The board’s fill and the line round its edge. A post takes the same two, so the post and its board are one piece of wood.

The Shape’s Sort Layer

Where the board draws: on Ground, under its words on Props. A board and its words tied on one Sort Layer would draw in the order of their textures, not the scene’s, as chapter 7’s pictures tied on one layer do, and the words could be drawn under their own board.

The Shape’s Size

Its width and height. In the signs’ face at Scale 0.5, “Hollowmere” is 64 wide and “The Mere” 46: each would run past a 40-wide board, so those two boards are widened, to 68 and 50. “Market”, 38 wide, and “Chapel”, 36, fit as they are.

Words on the boards

1. Select sign-hut, press + Add node and choose World Text: the menu lists it after Sorting Group. Rename it sign-hut-words.

1. Type its Position -32, 0: on the board’s left edge, 2 in, since its words line up Left.
2. In its WorldTextComponent, set each row from the first table below, and its three colours from the second. Drag fonts/kenney-high.ttf from Assets into the Font slot. Effect Mode and the five rows after it are in the Effects fold.

1. Make the other three boards’ words the same way, each with its board selected first, from the table below: each one’s Position, Text and Align, the rest as sign-hut-words. Press Ctrl+S.

1. Select sign-hut-words, press Frame, and pick 400% from the zoom menu at the Viewport’s foot.

The World Text’s Text

What it says. Enter starts a new line. The preset’s is Text; empty, it draws nothing.

The World Text’s Scale

How big the words are drawn: the face’s size times this. At 0.5, the signs’ 32-pixel face draws at 16 units: a line of it is 12 high, its letters 9. 1 as it comes.

The World Text’s Color

The words’ colour, alpha included: alpha 0 draws nothing, which is how the “+1” below fades. White as it comes, and typed in linear light, as every colour is.

The World Text’s Align: Left, Center or Right

Which edge of the words lines up with their place, the node’s place and the Offset. Left starts the words there and runs them right; Right ends them there; Center, as it comes, centres them on it.

The World Text’s Offset

How far from the node its words stand, in world units. The preset stands them on the node, 0, 0; a name tag lifts them over a head.

The World Text’s Pixel Size

Holds the words at one size on the screen however the camera zooms, as a name tag should. Ticked as it comes. The signs untick it: their words are part of the board, and grow and shrink with it.

The World Text’s Sort Layer

The sorting layer the words draw on, chosen by name, its number beside it: Props for the signs, over their boards on Ground and under him on Figures. Far, 1, as it comes.

The World Text’s Font

The face it draws in: a .ttf or .otf from Assets, at the size and with the field its import settings give. Empty, as it comes, draws in the project’s face.

The World Text’s Unshaded

Keeps the words at their colour under the room’s lights, as a sprite’s Unshaded does. Unticked as it comes. The crypt’s name tag ticks it, below.

The World Text’s Effect Mode: Copies or DistanceField

Copies, as it comes, draws the outline and the shadow as copies of the words, moved out round them and down beside them, in any face. DistanceField draws the words, their outline and their shadow in one pass from the face’s distance field, sharp at any zoom, and is the one that softens a shadow. It needs a face that bakes a field: the signs’ face does.

The World Text’s Outline and Outline Width

Outline is the colour of a line drawn round the letters, a see-through one drawing none; black as it comes. Outline Width is how far it reaches, in world units, 1 as it comes; 0 draws none.

The World Text’s Shadow, Shadow Offset and Shadow Softness

Shadow is the colour of a copy of the letters drawn behind them, see-through as it comes, so none is drawn. Shadow Offset is how far that copy is moved, 1, 1 as it comes: right and down. Shadow Softness blurs its edge, in world units, 0 as it comes; only DistanceField reads it, and under Copies it is greyed, with the reason.

The signs in the game

Name tags

1. Select pilgrim, press + Add node and choose World Text. Rename it tag.
2. Type its Text Pilgrim and its Offset 0, -40, so its words stand 40 above his feet, over his head, and set Sort Layer to Words. Leave the rest as it comes: Scale 1, white, Pixel Size ticked, the project’s face, Copies, and a black Outline 1 wide. Press Ctrl+S.
3. Press Run game and hold D until he stands by the mere’s sign.

1. Double-click scenes/crypt.ron in Assets. Select its pilgrim, and give him a tag the same way. This one, tick Unshaded. Press Ctrl+S.
2. With scenes/crypt.ron open, press F5: Play runs the open scene. Walk him east past the last torch, to the halls’ far end.

A “+1”

1. Press F5 again to stop. Double-click scenes/vale.ron in Assets, select sign-mere, press + Add node and choose World Text. Rename it plus-one. It stands at the board’s middle, where Add node puts it.
2. Delete its Text, so it says nothing. Type its Color as the table below gives it, a pale gold, and its Offset 0, -24, and set Sort Layer to Words. Leave the rest as it comes.

1. Press Add component and choose AreaComponent. In its Shape, type Size 48, 48 and leave Offset at 0, 0; leave the Area’s Layer and Mask as they come, pilgrim, as his.

1. In Assets, click Assets in the path bar, so the script is written at the project’s top, then click Create, choose New script, type waymark and press Enter. Click the Code tab, then waymark.rgs in its Scripts list, replace everything in it with the script below, and press Ctrl+S. Click the Viewport tab.
2. Drag waymark.rgs from Assets onto plus-one’s Inspector: it adds Waymark, its done unticked. Press Ctrl+S.

/// The waymark on the mere's signpost. The first time the pilgrim walks
/// past the sign, a "+1" shows over it, rises and fades away. After that,
/// passing it shows nothing more.
component Waymark : Area {
    /// Whether the pilgrim has passed the sign already.
    #[readonly]
    done: bool = false,

    fn on_enter(other: NodeId) {
        // Something has come into the waymark's reach. Only the pilgrim, who
        // is in the group pilgrim, counts, and only the first time.
        if in_group(other, "pilgrim") && !done {
            done = true;
            // The words, empty until now, read +1.
            set_text("WorldTextComponent", "text", "+1");
            // Over a second they rise from 24 above the sign to 40 above it,
            // quickly at first and slowing as they arrive.
            anneal_point("WorldTextComponent", "offset", vec2(0.0, -40.0), 1.0, .OutCubic);
            // Over the same second they fade evenly, until nothing of them
            // is left to see.
            anneal_colour("WorldTextComponent", "color", vec4(1.0, 0.85, 0.3, 0.0), 1.0, .Linear);
        }
    }
}

component Waymark : Area

A script with an Area base: the Area on its node is the waymark’s reach, and on_enter runs when another Area comes into it, with that one’s node as other. His body carries an Area of its own, 12 by 30 on his feet.

#[readonly] and done

done is a field the script keeps, false as it comes. #[readonly] shows it greyed in the Inspector, to watch, not to type into. Once it is set, the if never passes again: the “+1” rises once.

in_group

Whether a node is in a group. The pilgrim is in pilgrim, so nothing else that comes by sets the “+1” off.

set_text

Writes text onto another component on this node: here the World Text’s text, its Text, from nothing to +1.

An anneal: anneal_point and anneal_colour

Each eases a field of another component on this node, from where it stands to the value it is given, over the seconds it is given, along a curve, and runs on by itself while the script goes on. Here the World Text’s offset, its Offset, from 24 above the sign to 40 above it, and its color, its Color, to the same gold at alpha 0, both over one second.

.OutCubic and .Linear

Curves, written with a leading point. .OutCubic is quick at first and slows as it arrives: the words shoot up and settle. .Linear is even: the words fade at one pace.

vec2 and vec4

Two numbers, here a place, and four, here a colour with its alpha.

The signposts

Check it works