How can I add multiple instances of a class to a group?

[igkman]

I would also like to know how I could set the parameters of the instances as well.

function MyAwesomeSprite(game, x, y) {
  Phaser.Sprite.call(this, game, x, y, 'playerKey');
}

// All that custom sprite class stuff...

var myGroup = game.add.group();
myGroup.classType = MyAwesomeSprite;
myGroup.createMultiple(20);
// myGroup now has 20 instances of MyAwesomeSprite.

I found this here, but I was confused as to how would one set the x and y parameters while creating 20 instances of said object?

[samme]

You either use Group#setAll or you can loop through the children:

myGroup.createMultiple(20).forEach(function (sprite) {
  sprite.x = game.world.randomX;
  // …
});

NB createMultiple sets exists = false unless you pass otherwise.

[igkman]

I tried that with my own project and I got the following error:

 

 

Uncaught TypeError: this.onTextureUpdate is not a function(…)

Code:

enemies.createMultiple(10).forEach(
		function(sprite) {
		sprite.game = game;
		sprite.x = 30;
		sprite.y = 300;

	});

 

Edited November 15, 2016 by igkman
More detailed post

[samme]

Oh, you need

MyAwesomeSprite.prototype = Object.create(Phaser.Sprite.prototype);
MyAwesomeSprite.prototype.constructor = MyAwesomeSprite;

See Extending Sprite Demo 1.

Then remove

sprite.game = game;

 

[igkman]

I'm still getting the error. This is the peice of code that adds the Enemy object to multiple groups in a create function:

enemies = game.add.group();
	enemies.classType = Enemy;
	enemies.enableBody = true;


	
	enemies.createMultiple(10).forEach(
		function(sprite) {
		sprite.x = 30;
		sprite.y = 300;

	},this);

 

 

Here's my Enemy class:

var Enemy = function(game,x,y) {

	Phaser.Sprite.call(this,game,x,y,'playerKey');
	this.enemy1 = null;
	this.pixel = null;
	this.x = x;
	this.y = y;
	this.tween = null;
	this.game = game;
	
}

Enemy.prototype = Object.create(Phaser.Sprite.prototype);
Enemy.prototype.constructor = Enemy;
		
Enemy.prototype = {

	preload: function() {
		game.load.spritesheet('enemy1', './assets/images/enemy1.png',30,20);
		game.load.image('pixel','./assets/images/dot.png');
	},

	create: function() {

		// enemy sprite and its animation
		enemy1 = game.add.sprite(this.x,this.y,'enemy1');
		enemy1.animations.add('enemy1',null,10,true);

		//This will be tracked by the enemy sprite
		// will be set to invisible
		pixel = game.add.sprite(this.x + 200,200,'pixel');

		game.physics.arcade.enable(enemy1);
		game.physics.arcade.enable(pixel);

		// the path of pixel
		// moves back and forth
		// represents the movement of enemy sprites
		// while enemies are flying in
		tween = game.add.tween(pixel).to({x: this.x + 400}, 2000, null,-1,true);
		tween.yoyo(true,0,0);
		tween.repeat(-1);

		this.update();
	},

	update: function() { 
		enemy1.animations.play('enemy1');
		game.physics.arcade.moveToObject(enemy1,pixel,100);
		tween.start();
	}
}

 

[samme]

You're overwriting the prototype by mistake; use

Enemy.prototype = Object.create(Phaser.Sprite.prototype);

Enemy.prototype.constructor = Enemy;
	
Enemy.prototype.preload = function() {/*…*/};

Enemy.prototype.create = function() {/*…*/};

Enemy.prototype.update = function() {/*…*/};

 

[igkman]

Can you check my code again to see if I'm still overwriting anything? I'm now getting this error:

'Uncaught TypeError: Cannot read property 'animations' of null' for my enemy1 variable

Which I think is odd. It is null at first, but that should change in the create function. Is it still being overwritten?

 

var Enemy = function(game,x,y) {

	Phaser.Sprite.call(this,game,x,y,'playerKey');
	this.enemy1 = null;
	this.pixel = null;
	this.x = x;
	this.y = y;
	this.tween = null;
	this.game = game;
	
}

Enemy.prototype = Object.create(Phaser.Sprite.prototype);
Enemy.prototype.constructor = Enemy;


Enemy.prototype.preload = function() {
		game.load.spritesheet('enemy1', './assets/images/enemy1.png',30,20);
		game.load.image('pixel','./assets/images/dot.png');
}


Enemy.prototype.create = function() {
		// enemy sprite and its animation
		this.enemy1 = game.add.sprite(this.x,this.y,'enemy1');
		this.enemy1.animations.add('enemy1',null,10,true);

		//This will be tracked by the enemy sprite
		// will be set to invisible
		this.pixel = game.add.sprite(this.x + 200,200,'pixel');

		game.physics.arcade.enable(this.enemy1);
		game.physics.arcade.enable(this.pixel);

		// the path of pixel
		// moves back and forth
		// represents the movement of enemy sprites
		// while enemies are flying in
		this.tween = game.add.tween(pixel).to({x: this.x + 400}, 2000, null,-1,true);
		this.tween.yoyo(true,0,0);
		this.tween.repeat(-1);

		this.update();
}


Enemy.prototype.update = function() { 

		this.enemy1.animations.play('enemy1');
		game.physics.arcade.moveToObject(this.enemy1,this.pixel,100);
		this.tween.start();
}

I really appreciate your help, by the way.

[samme]

Oh, I think the game state and Enemy are a little mixed up now. I think you want something like this:

/* global Phaser:false */

var Enemy = function(game, x, y) {
    Phaser.Sprite.call(this, game, x, y, 'playerKey');

    this.create();
};

Enemy.prototype = Object.create(Phaser.Sprite.prototype);

Enemy.prototype.constructor = Enemy;

Enemy.prototype.create = function() {
    // enemy sprite and its animation
    this.enemy1 = game.add.sprite(this.x, this.y, 'enemy1');
    this.enemy1.animations.add('enemy1', null, 10, true);
    this.enemy1.animations.play('enemy1');

    // This will be tracked by the enemy sprite
    // will be set to invisible
    this.pixel = game.add.sprite(this.x + 200, 200, 'pixel');

    game.physics.arcade.enable(this.enemy1);
    game.physics.arcade.enable(this.pixel);

    // the path of pixel moves back and forth
    // represents the movement of enemy sprites while enemies are flying in
    this.tween = game.add.tween(this.pixel).to({x: this.x + 400}, 2000, null, -1, true);
    this.tween.yoyo(true, 0, 0);
    this.tween.repeat(-1);
    this.tween.start();
};

Enemy.prototype.update = function() {
    if (!this.exists) return;

    game.physics.arcade.moveToObject(this.enemy1, this.pixel, 100);
};

// Adds `game.add.enemy(x, y)`:

Phaser.GameObjectFactory.prototype.enemy = function (x, y) {
    return this.game.add.existing( new Enemy(this.game, x, y) );
};

// State

var state = {
    preload: function () {
        // load 'playerKey' ?
        game.load.spritesheet('enemy1', './assets/images/enemy1.png', 30, 20);
        game.load.image('pixel', './assets/images/dot.png');
    },

    create: function () {
        this.enemy = game.add.enemy(0, 0);
        // create other stuff…
    },

    update: function () {
        // this.enemy.update() will be called automatically while it's in-world
        // update other stuff…
    }
};

// Game

var game = new Phaser.Game({
    state: state
});

 

[igkman]

This worked! Thank you so much!