Need help with states and text

[DudeshootMankill]

Hay guys, trying to learn states and i've run into a problem.

I've got this function. And when it is called, i need it to create some text. States and breaking my phaser game into several files is a first for me and i cant for the life of me figure this out.

I need to create some text from the animationPass function, but i get this error:

Uncaught TypeError: Cannot read property 'text' of undefined  -- of line 7, and thats where the create introText line is.

in my intro.js i've got

        function animationPass() {

introText = this.add.text(320, 240, 'Write some text');

//i've tried this.introText - but that didnt work either.

}

 

var introMap = function (game) {

var introText;

}

 

introMap.prototype = {

    create: function () {

 animationPass();

},

update: function ()   {

}

}

And this has worked fine so far. Infact i've used this structure in another file and it works just fine there. Here i get however 

Uncaught TypeError: Cannot read property 'text' of undefined  -- of line 7, and thats where the create introText line is.

 

My preload.js looks like this

 

preload = function (game) {
    WebFontConfig = {
    google: {
        families: ['Press Start 2P']
       
    }
};

}

preload.prototype = {
    preload: function () {

this.load.spritesheet('intro', 'img/introAnim.png', 172, 124, 25);

},

create: function () {

this.game.state.start("introMap");

    }
}

I humbly ask for your assistance. And i'm sorry if the answer is obvious.

I would not ask if i hadn't spend a great deal of time trying to figure out the answer myself.

[samme]

You should either invoke `animationPass` with `call` and the current state

function animationPass() {
    this.introText = this.add.text(320, 240, 'Write some text');
}

var IntroMap = function() {};

IntroMap.prototype = {
    create: function() {
        animationPass.call(this);
    },
    update: function() {
        
    }
}

or convert it to a method of your state object and invoke it with `this` (more common):

var IntroMap = function() {};

IntroMap.prototype = {
    create: function() {
        this.animationPass();
    },
    update: function() {
        
    },
    animationPass: function() {
        this.introText = this.add.text(320, 240, 'Write some text');
    }
}

 

[DudeshootMankill]

A whole bunch of thanks to you. This worked perfectly .

Is there some reading you would recommend that elaborates on this?

[DudeshootMankill]

And another question, if you have the time

In your second example how would i combine this.animationPass(); and setInterval? 

I've got this snip here

introMap.prototype = {
    create: function () {
        myInterval = setInterval(this.animationPass, 1000);
    },
    update: function () {},
    
    animationPass: function () {
        this.introText = this.add.text(320, 240, 'Write some text');
        this.introText.addColor("#E0AF33", 0);
        this.timer++;
        console.log(timer);

    }
}

When i do this introText  = cannot read text of undefined

When i just go 

    create: function () {
       animationPass();
    }

introText is added just fine.

 

[samme]

1 hour ago, DudeshootMankill said:

Is there some reading you would recommend that elaborates on this?

JavaScript/Reference/Operators/this and https://rainsoft.io/gentle-explanation-of-this-in-javascript/.

1 hour ago, DudeshootMankill said:

In your second example how would i combine this.animationPass(); and setInterval?

When you pass a method as a callback, you need to specify the calling context (`this` value). Usually you want the callback invoked in the same context as the current one (`this` == the current game state), so you can just pass `this`. (Use time.events.loop instead of setInterval, but the concept is the same.)

IntroMap.prototype = {
    create: function() {
        this.timer = 0;
        this.myInterval = this.time.events.loop(1000, this.animationPass, this);
    },
    update: function() {},
    shutdown: function() {
        this.time.events.remove(this.myInterval);
    },
    animationPass: function() {
        this.introText = this.add.text(320, 240, 'Write some text');
        this.introText.addColor("#E0AF33", 0);
        this.timer++;
        console.log(this.timer);
    }
};

 

[DudeshootMankill]

Thank you friend. All of this worked out perfectly.