# Display text from left to right 1 word at a time

**URL:** <https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730>\
**Category:** Phaser 3\
**Created:** [June 21, 2020, 12:04pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730 "2020-06-21T12:04:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![OSfresh](https://avatars.discourse-cdn.com/v4/letter/o/a9a28c/32.png) [@OSfresh](https://phaser.discourse.group/u/OSfresh)\
**Post date:** [June 21, 2020, 12:04pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/1 "2020-06-21T12:04:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [June 21, 2020, 1:08pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/2 "2020-06-21T13:08:56Z")

</div>

[Here](https://codepen.io/rexrainbow/pen/yjZveb) is a demo of my [BBCodeText](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/bbcodetext/) + [Text-typing](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/texttyping/) + [Text-paging](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/textpage/), or another integration solution – [Text-box](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-textbox/) ([demo](https://codepen.io/rexrainbow/pen/MzGoJv))

---

<div class="post-metadata">

**Author:** ![OSfresh](https://avatars.discourse-cdn.com/v4/letter/o/a9a28c/32.png) [@OSfresh](https://phaser.discourse.group/u/OSfresh)\
**Post date:** [June 21, 2020, 1:47pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/3 "2020-06-21T13:47:43Z")

</div>

Awesome thanks for your reply!

---

<div class="post-metadata">

**Author:** ![OSfresh](https://avatars.discourse-cdn.com/v4/letter/o/a9a28c/32.png) [@OSfresh](https://phaser.discourse.group/u/OSfresh)\
**Post date:** [June 21, 2020, 3:09pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/4 "2020-06-21T15:09:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [June 21, 2020, 4:38pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/5 "2020-06-21T16:38:14Z")

</div>

[Here](https://codepen.io/rexrainbow/pen/pogeWOM) is a demo of typing-next content when pointer-up.  
Or source code of [class definition version](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/textpage/typing-next.js)

---

<div class="post-metadata">

**Author:** ![OSfresh](https://avatars.discourse-cdn.com/v4/letter/o/a9a28c/32.png) [@OSfresh](https://phaser.discourse.group/u/OSfresh)\
**Post date:** [June 22, 2020, 7:59am UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/6 "2020-06-22T07:59:52Z")

</div>

Awesome thank you again.

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [June 22, 2020, 1:16pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/7 "2020-06-22T13:16:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![OSfresh](https://avatars.discourse-cdn.com/v4/letter/o/a9a28c/32.png) [@OSfresh](https://phaser.discourse.group/u/OSfresh)\
**Post date:** [June 22, 2020, 1:22pm UTC](https://phaser.discourse.group/t/display-text-from-left-to-right-1-word-at-a-time/6730/8 "2020-06-22T13:22:29Z")

</div>

Works like a charm aswell! Thank you.