Auto scrolling text issue (Phaser 3)

Phaser 3
1

Hello!
So I’ve been trying for a few days now to make a bunch of text (my actual code) scroll down the player’s screen, and I’ve been having trouble with the automated scrolling part.

First I loaded the .txt file

function preload() {

        this.load.text('lorem', '../Assets/lorem.txt');

    }

And then I added each line into an array

function create() {

        this.cameras.main.backgroundColor.setTo(0, 0, 0);

        textie = this.cache.text.get('lorem');
        arrayText = textie.split('\n'); 

        // add lines

        for (var i = 1; i < 8; i++) { // only first 7 lines on screen
            this.time.addEvent({
                delay: 100 * i,
                callback: loadText,
                args: [i - 1],
                callbackScope: this
            });

        } }

And finally asked the text to appear one line at a time:

function loadText(i) {

        var text2 = this.make.text({
            x: 0,
            y: 0 + i * 100,
            text: arrayText[i],
            style: {
                fontSize: '23px',
                fontFamily: 'Arial',
                color: '#47BF31',
                align: 'left',
                padding: 10,
                lineSpacing: 20
            }
        });

        var texture = this.textures.addCanvas('textie', text2.canvas);

    }

I struggle with deleting the previous text on the screen and replacing it with the same text file just i+1 in the index.

Any suggestions on how to destroy what I have in the array and adding the next line; non stop? I tried using a timer but I’m not clear on what to destroy in a destroyText function.

2

I am not 100% sure what exactly you want to do, but I hope this helps :slight_smile:

https://codepen.io/yandeu/pen/mZKjyN

3

Thank you, it did give me an idea!