Phaser Tutorial 2 with States

[OSamo]

So, I am trying to expand upon the "Making your first game" tutorial (https://github.com/photonstorm/phaser/tree/master/resources/tutorials/02%20Making%20your%20first%20game) by creating states instead of running the game directly on the script tag in the html file.

 

I have tried doing so by following the template provided, but I cannot answer must of the questions I have only by looking at it. I am also currently facing a bug that I would love some help in solving.

 

The bug that I mentioned is freezing the game every time the player touches a star. The error I get is this one:

Uncaught TypeError: Cannot read property 'kill' of undefined               Lvl1.js:155 

Lvl1.js  is the file where I have the state. Line 155 points to the collectStar function:

collectStar: function(player, star){   // Removes the star from the screen   this.star.kill();    //   <--This is line 155   //  Add and update the score   this.score += 10;   this.scoreText.text = 'Score: ' + this.score;}

collectStar is called when there is an overlap between the player and any member of the stars group (I believe)

this.physics.arcade.overlap(this.player, this.stars, this.collectStar, null, this);

Here I create and add the items to the stars group:

var star = this.stars.create(i * 70, 0, 'star');

That is all I have for the bug, now for the questions:

1. I realized that I have to use "this" a lot, but I am still unsure as of why and when I have to use it. Do I use it when I reference items declared inside the state? Or with items inside the function?
2. Why don't I have to include the parameters? (player, star) when calling collectStar? This was also the case in the tutorial, and there were no bugs there. 
3. How do I load items (sprites and whatnot) in one state, so that I can use it in another state? For example, loading items in the preload state to use in the game state.

 

Thank you!

 

*Edit

You can find the current version of it here http://sammyisra.comoj.com/phaserGuy/index.html

[spencerTL]

2) Overlap always passes the two overlapping objects as the first two parameters. See the description section of the overlapcallback part of this link:http://docs.phaser.io/Phaser.Physics.Arcade.html#overlap

Quite a lot of the functions where you'd need to get the triggering object do this in Phaser look through for the docs for this, they can be easily missed if you are used to other doc formats but all of the info is there.

For number 1 someone else can explain better than me. Scope is something I can get to work but I find to hard to explain how!

[OSamo]

Thanks for the resource! I am checking it right now.

 

Any clue on the bug that I am having?

[spencerTL]

I think your problem is that line 155 should be star.kill() not this.star.kill().

Because star is created in the collectStar function it is scoped to that function - only that function can access it but it can be accessed just by its name. (it is created by being named in the parameters and receives its value as the function is called). You can access directly by its name but by adding this to it you are pointing to an entirely different var than the one in the parameters.

this.star is for a variable scoped to the current state and as you don't have that variable (and don't need to) it is undefined. If, for example, you wanted a var to hold a star object and be accessible to every function in a state you could define a this.star in the constructor and access it as this.star from any function within that state.

As I say, I don't have a perfect grasp of scope in js and my description may misuse terms. If you find that what I say conflicts with somebody else, they're probably right!

Edit: your this.score var works because you have defined it as this.score somewhere in your code and probably do want to be able to access it from a number of functions within the state. Star only needs to be known until the function called from the overlap is resolved. Then it is gone until a new overlap defines a new star and resolves that.