Instantiate new Sprite from Class in runtime.

[Lyian]

Hi Guys, I have a problem.

I am calling a function by clicking the mouse button, which creates a new sprite in theory. 

'use strict';var Stones = function(game, x, y, frame) {  this.stones = Phaser.Sprite.call(this, game, x, y, 'stones', frame);  this.anchor.setTo(0.5,0.5);  // initialize your prefab here  //this.stones.scale.setTo(0.5, 0.5);};Stones.prototype = Object.create(Phaser.Sprite.prototype);Stones.prototype.constructor = Stones;Stones.prototype.update = function() {    // write your prefab's specific update code here  };module.exports = Stones;

  'use strict';  var Stoned = require('../prefabs/stones'); // 420   var count = 0;  var stoneGroup;  function Play() {}  Play.prototype = {    create: function() {      this.game.physics.startSystem(Phaser.Physics.ARCADE);      this.board = this.game.add.sprite(this.game.width/2-250, this.game.height/2-250, 'GoBoard');      //this.sprite.inputEnabled = true;            this.game.physics.arcade.enable(this.board);      this.game.stage.backgroundColor = '#DDDDDD';           var stones = new Stoned(this.game, 300, 300, 0);      this.game.add.existing(stones);      stones.scale.setTo(0.15,0.15);      this.input.onDown.add(this.placeNextStone, {group: stoneGroup, input: this.input}, this);    },    update: function() {    },    placeNextStone: function(group, input) {      var stones = new Stoned(this.game, 123, 123, 'stones');      this.game.add.existing(stones);      /*console.log("test");      console.log(this.group);      count++;      console.log(this.input.x);*/    }  };    module.exports = Play;

The problem is this line "

var stones = new Stoned(this.game, 123, 123, 'stones');

this.game.add.existing(stones);"

 

in the placeNextStone function.

It creates an error:

 

Uncaught TypeError: Cannot read property 'cache' of [email protected]:49150

Phaser.Component.Core.init @ phaser.js:47756

Phaser.Sprite @ phaser.js:50869

Stones @ game.js:22

Play.placeNextStone @ game.js:154

Phaser.SignalBinding.execute @ phaser.js:31642

Phaser.Signal.dispatch @ phaser.js:31447

Phaser.Pointer.start @ phaser.js:42440

Phaser.Mouse.onMouseDown @ phaser.js:40679

_onMouseDown @ phaser.js:40595

[Skeptron]

There is an issue with this line : 

this.input.onDown.add(this.placeNextStone, {group: stoneGroup, input: this.input}, this);

If you look at the doc of signals, that's not the way the are added : http://phaser.io/docs/2.4.4/Phaser.Signal.html#add

 

You should have written that instead : 

this.input.onDown.add(this.placeNextStone, this, 0, stoneGroup, this.input);

And be careful when you write that : {group: stoneGroup, input: this.input}, this is ONE object. In your method declaration you expected TWO different objects : placeNextStone: function(group, input)

[Lyian]

Yeah thats an issue I noticed later, but even this didn't let me to the solution. 

I changed it to 

this.input.onDown.add(this.placeNextStone, this);

and in the placeNextStone function I chaged the code to 
 

var stones = new Stoned(this.game, this.input.x, this.input.y, 1);this.game.add.existing(stones);

which suddenly started working for me
Anyway thank you, for your help Skeptron!