0
\$\begingroup\$

I'm currently using the latest version of phaser framework and I have a problem to which I haven't been able to figure out how to approach.

I need to have a block of text appear letter by letter and also be justified as a block. (I'm working on a text-based game project).

Text typed letter by letter is functional, but my issue is with justification: it has issues like some words first appearing on a line and then being removed and placed in the next line.

This is my code so far:

    addTextParagraph(text) {
    //  We check the current GAME STATE. 
    //  During exploration (SCOUTING_STATE), text is in typewriter mode.
    if (gameState === SCOUTING_STATE) {
      this.typewriteText(text);
    }
  }

  typewriteText(text) {
    let delayedCallback;
    let length = text.length;
    let i = 0;

    this.time.addEvent({
      callback: () => {
        this.textParagraph.text += text[i]
          ++i
        // Callback after typewriter text is complete.
        // Delay before the choices appear in the screen (in ms)
        if (i >= length) {
          i = 0;
          delayedCallback = this.time.delayedCall(200, this.addChoiceArray, [], this); 
        }
      },
      repeat: length - 1,
      delay: 40,
    })
  }

Thanks.

\$\endgroup\$
2
\$\begingroup\$

I don't know what functionality Phaser offers, so this answer is abstract, but in general you must lay out the full text (or at least the entire next word for ragged-right and the entire next paragraph for full-justified text) to get consistent layout.

One way to approach this, if you're not managing layout and drawing yourself, is to treat this as styled text: all the text you don't want to show yet exists but is styled to be invisible (fully transparent, or color the same as the background).

\$\endgroup\$
9
  • \$\begingroup\$ Hi and thanks. Yes, for now the text is fed via json format which I export from inkle's ink. The problem is that I cannot figure out a way to add extra blank spaces to align the text properly. I set the max width for the text obj. But should I instead set it width based on the font size so I can be more accurate? \$\endgroup\$ – JamesAlex Mar 26 at 16:29
  • \$\begingroup\$ @JamesAlex I don't quite understand. Your original description sounded like you are using layout provided by the engine but had problems with it jumping around; my answer addresses that. Your comment sounds like you're trying to lay out the text yourself, which is a different problem. (I see that Phaser is browser-based; for full justification you can use CSS text-align: justify; and this will be more reliable than inserting your own spaces, though it won't stick to a monospace grid.) \$\endgroup\$ – Kevin Reid Mar 26 at 16:36
  • \$\begingroup\$ That's the issue actually. Using justify this way makes the text behave erratic. As if it's being adjusted while being typed. Hence I would need to find a better solution. Sorry for the confusion. \$\endgroup\$ – JamesAlex Mar 26 at 16:41
  • 1
    \$\begingroup\$ What Kevin is suggesting here is that you should not add blank space manually to imitate justified text rendering. Instead, you should have the entire text present in the text box, and use the actual, built-in justified text. No characters are added or removed over time, so there are no layout changes making the text move erratically. Instead, you accomplish revealing the characters one by one by masking or styling them. The character exists in the text box before the player can see it, reserving its space in the layout, but you've rendered it invisible so it looks like it gets added later. \$\endgroup\$ – DMGregory Mar 26 at 17:23
  • 1
    \$\begingroup\$ @JamesAlex However styled text works in the engine you're using. You make two styled spans, one of which contains the substring of text from 0 to i and the other of which contains the substring of text from i to text.length. Update both of them when you want to add a character. \$\endgroup\$ – Kevin Reid Mar 26 at 17:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.