Display text from left to right 1 word at a time

Phaser 3
1

Hi,

I can’t manage to make a text appear from left to right 1 word at a time like in those rpg’s wich are mostly text based. I would appreciate it very much if someone could help me out!

Thanks in advance

2

Here is a demo of my BBCodeText + Text-typing + Text-paging, or another integration solution – Text-box (demo)

1 Like
3

Awesome thanks for your reply!

4

Sorry mate i’m a bit of a novice in programming. Your input was incredibly helpful, but i’m struggling to get all the sentences too show up in the right order. This is the code i have at the moment.

textblok = this.add.rectangle(500, 600, 800, 250, 0xFFFFFF);
textblok.setStrokeStyle(4, 0x000000)

textblok.setInteractive();

var content = "Late for work again i see. What's your excuse this time Frank?";

var content2 = "You know what? i've had enough of your crap."

var content3 = "What do you want to say for yourself?"
  
var text = PageTypingText(this, 150, 500, '', {
    fontSize: '30px',
    color: '#000000',
    wrap: {
      mode: 'word',
      width: 700
   },
   maxLines: 7
  });
  text.setDepth(1)
  text.once('complete', function () {
    textblok.on('pointerup', function() {
      text.start(content2, 50)
    })})
  text.once('complete', function () {
    textblok.on('pointerup', function() {
    if(text === content2) {    
      text.start(content3, 50)
    }})}).start(content, 50);

I want the content to show up one after another after the user does the right input. But i don’t understand how i can add more than 2 content sections (content3 does not show because my code is messy is my gues).

Thanks for your patience in advance

5

Here is a demo of typing-next content when pointer-up.
Or source code of class definition version

1 Like
6

Awesome thank you again.

7

Here’s a native phaser version using a stepped tween - https://codepen.io/snowbillr/pen/dyGvLba?editors=0010

2 Likes
8

Works like a charm aswell! Thank you.