Failing to add plugin

[lemondragon]

Hey everyone,

I am currently following the format of this tutorial to try to create a structured Phaser project, where the code is split up. Everything seems to go well, except from the fact that I can't seem to add the Isometric plugin I am using. 
This is the code I'm using:

Main.js

window.onload = function(){

	var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-canvas', null, true, false);

	game.state.add('Boot', Boot);
	game.state.add('Preload', Preload);
	game.state.add('Menu', Menu);
	game.state.add('Start', Start);

	game.state.start('Boot');
}

Preload.js

var Preload = function(game){

};

Preload.prototype = {
	preload: function(){
		this.time.advancedTiming = true;
		this.plugins.add(new Phaser.Plugin.Isometric(this));
		this.iso.anchor.setTo(0.5, 0.2);

		this.load.spritesheet('basic_ground', 'img/spritesheet/basic_ground_tiles.png', 128, 128);

	},
	create: function(){
		this.state.start('Start');
	}

}

This is the error I am getting when running:

Uncaught TypeError: Cannot read property 'add' of undefined
    at Preload.preload (Preload.js:8)
    at c.StateManager.preUpdate (phaser.min.js:10)
    at c.Game.updateLogic (phaser.min.js:12)
    at c.Game.update (phaser.min.js:12)
    at c.RequestAnimationFrame.updateRAF (phaser.min.js:18)
    at window.requestAnimationFrame.forceSetTimeOut._onLoop (phaser.min.js:18)

Any help?

[drhayes]

I believe it should be "this.game.plugins.add" instead of "this.plugins.add". "this" inside your preload function is a Phaser.State; they don't have a plugins property like game does.

The way to read that error message is this: what's on line 8? I'm calling "this.plugins.add". The error message says "cannot read property 'add' of undefined". That means that "this.plugins" is undefined, like it's not present on "this". What's "this"? It's a Phaser.State. Looking at the Phaser.State docs I don't see a "plugins" property.

[lemondragon]

Thanks, that seemed to fix it! It seems counter intuitive, but it fixed it.
If you don't mind I would like to use this opportunity, to ask an additional question.

I'm currently in the process of splitting up my code to make a more structured project, but I'm having some issues.  I'm running into a problem while splitting the code of my 'spawning tiles' functionality. Note: I'm using the Isometric plugin.

My Start.js

var Start = function(game){};

Start.prototype = {
	create: function(){
		var isoGroup = this.add.group();
		Map.createTiles(this.game, isoGroup);
	}
}

My Map.js

var Map = {};

Map.createTiles = function(game, isoGroup){
    for (var xx = 0; xx < 640; xx += 32) {
      for (var yy = 0; yy < 640; yy += 32) {
        var tile = game.add.isoSprite(xx, yy, 0, 'basic_ground', 0, isoGroup);
        tile.scale.setTo(0.5, 0.5);
        tile.anchor.set(0.5, 0);
        tile.inputEnabled = true;
      }
  }
}

 But I'm getting the following error:

phaser-plugin-isometric.js:805 Uncaught TypeError: Cannot read property 'project' of undefined
    at Phaser.Plugin.Isometric.IsoSprite._project (phaser-plugin-isometric.js:805)
    at new Phaser.Plugin.Isometric.IsoSprite (phaser-plugin-isometric.js:773)
    at c.GameObjectFactory.Phaser.GameObjectFactory.isoSprite (phaser-plugin-isometric.js:976)
    at Object.Map.createTiles (Map.js:8)
    at Start.create (Start.js:8)
    at c.StateManager.loadComplete (phaser.min.js:10)
    at c.StateManager.preUpdate (phaser.min.js:10)
    at c.Game.updateLogic (phaser.min.js:12)
    at c.Game.update (phaser.min.js:12)
    at c.RequestAnimationFrame.updateRAF (phaser.min.js:18)

While I knew that my previous error had to something to do with the 'this' keyword, I really can't tell what's causing this error. It seems to be a error within the Isometric plugin, but I'm probably doing something wrong that's causing it.

Thanks again for the help.

[drhayes]

At this point I'm probably the wrong person to ask. @lewster32 wrote that plugin and he's pretty active on the forum. Maybe he'll swing by?

[lewster32]

My suspicion is that the scope is being screwed up by Map.createTiles being a 'static' method. game.add.isoSprite expects 'this' to be the Phaser instance. You're likely to have the same problem trying to do game.add.sprite or any of the other game.add methods as they all pass 'this.game' to the constructor of the object they're instantiating. To fix this you need to make sure whatever context Map.createTiles is called in is passed the Phaser instance as 'this'. Try this maybe:

var tile = game.add.isoSprite.call(game, xx, yy, 0, 'basic_ground', 0, isoGroup);

Though structuring your project to better handle being in the correct context from the beginning would be preferable. It's very tricky stuff in JavaScript though!