How to use Phaser.Signal

[phaserdragoon]

Hi everyone,

 

I've just started playing around with Phaser recently. Can anyone give me some examples of how to Signals? I was trying it out and this is how I'm doing it but not sure if it's correct.

 

In a unit class which extends sprite:

TestGame.Unit = function (game, x, y, faction, job) {    var frameIdx = faction * TestGame.jobs.length + job;        Phaser.Sprite.call(this, game, x, y, 'spritesheet-units', frameIdx);    this.name = 'unit';        this.events.onUnitSelected = new Phaser.Signal();    this.events.onUnitMoveSelect = new Phaser.Signal();        /* INITIALIZATION */        this.inputEnabled = true;    this.input.useHandCursor = true;    this.events.onInputDown.add(this.select, this);    this.events.onInputUp.add(this.release, this);        return this;};TestGame.Unit.prototype = Object.create(Phaser.Sprite.prototype);TestGame.Unit.prototype.constructor = TestGame.Unit;TestGame.Unit.prototype.select = function () {    this.events.onUnitSelected.dispatch(this);};...TestGame.Unit.prototype.selectMove = function () {    this.events.onUnitMoveSelect.dispatch(this);    this.game.input.onUp.add(this.processClickMove, this);};TestGame.Unit.prototype.processClickMove = function (pointer) {    if (pointer.duration <= 150) {  // in case they are dragging        this.moveTo({x: pointer.worldX, y:pointer.worldY});        this.game.input.onUp.remove(this.processClickMove, this);    }};

In the Game state:

TestGame.Game.prototype = {	create : function () {		...	},	update : function () {		...	}		...	spawnUnit : function (castle) {		var unit;		// game, x, y, faction, icon		unit = new TestGame.Unit(this.game, 			    castle.x + 16,			    castle.y + 16,			    castle.properties.faction,			    this.game.rnd.integerInRange(0, TestGame.jobs.length-1)			);		this.game.add.existing(unit);		unit.events.onUnitSelected.add(this.handleUnitSelect, this);		unit.events.onUnitMoveSelect.add(this.handleUnitMoveSelect, this);		party.revive(100);		if (TestGame.factions[unit.properties.faction] === 'player') {		    this.playerParties.add(unit);		} else if (unit.properties.faction === 'foe') {		    this.foeParties.add(unit);		} else {		    this.neutralParties.add(unit);		}	},		handleUnitSelect : function (unit) {		if (TestGame.factions[unit.properties.faction] === 'player') {		    this.playerUnitSelected = unit;		    this.selectedUnitMenu.clearButtonHandle('move');		    this.selectedUnitMenu.clearButtonHandle('cancel');		    		    this.selectedUnitMenu.addButtonHandle('move', unit.selectMove, unit);		    this.selectedUnitMenu.addButtonHandle('cancel', this.selectedUnitMenu.hide, this.selectedUnitMenu);		    		    this.selectedPartyMenu.show({			x : party.x + 64,			y : party.y		    });		}	},	handleUnitMoveSelect : function (unit) {		this.selectedUnitMenu.hide();	}};

Thank you for your time and considerations. 

[rich]

After a quick glance at your code it looks fine to me and is how you should use them. Are you getting any errors at all?

[phaserdragoon]

Awesome! Thanks for the confirmation. I did not get any errors. I just wasn't sure that was correct usage.

[bilboon]

Just found this thread, searching about Phaser Signals. In phaserdragoon's exemple, he's creating two signals per unit. The two signals could be declared in game state and shared between all units :

TestGame.Unit = function (game, x, y, faction, job) {    var frameIdx = faction * TestGame.jobs.length + job;        Phaser.Sprite.call(this, game, x, y, 'spritesheet-units', frameIdx);    this.name = 'unit';        /* INITIALIZATION */        this.inputEnabled = true;    this.input.useHandCursor = true;    this.events.onInputDown.add(this.select, this);    this.events.onInputUp.add(this.release, this);        return this;};TestGame.Unit.prototype = Object.create(Phaser.Sprite.prototype);TestGame.Unit.prototype.constructor = TestGame.Unit;TestGame.Unit.prototype.select = function () {    this.game.events.onUnitSelected.dispatch(this);};...TestGame.Unit.prototype.selectMove = function () {    this.game.events.onUnitMoveSelect.dispatch(this);    this.game.input.onUp.add(this.processClickMove, this);};TestGame.Unit.prototype.processClickMove = function (pointer) {    if (pointer.duration <= 150) {  // in case they are dragging        this.moveTo({x: pointer.worldX, y:pointer.worldY});        this.game.input.onUp.remove(this.processClickMove, this);    }}; 

TestGame.Game.prototype = {	create : function () {                if (!this.game.events) this.game.events = {};                this.game.events.onUnitSelected = new Phaser.Signal();                this.game.events.onUnitMoveSelect = new Phaser.Signal();                this.game.events.onUnitSelected.add(this.handleUnitSelect, this);		this.game.events.onUnitMoveSelect.add(this.handleUnitMoveSelect, this);	},	update : function () {		...	}		...	spawnUnit : function (castle) {		var unit;		// game, x, y, faction, icon		unit = new TestGame.Unit(this.game, 			    castle.x + 16,			    castle.y + 16,			    castle.properties.faction,			    this.game.rnd.integerInRange(0, TestGame.jobs.length-1)			);		this.game.add.existing(unit);		party.revive(100);		if (TestGame.factions[unit.properties.faction] === 'player') {		    this.playerParties.add(unit);		} else if (unit.properties.faction === 'foe') {		    this.foeParties.add(unit);		} else {		    this.neutralParties.add(unit);		}	},		handleUnitSelect : function (unit) {		if (TestGame.factions[unit.properties.faction] === 'player') {		    this.playerUnitSelected = unit;		    this.selectedUnitMenu.clearButtonHandle('move');		    this.selectedUnitMenu.clearButtonHandle('cancel');		    		    this.selectedUnitMenu.addButtonHandle('move', unit.selectMove, unit);		    this.selectedUnitMenu.addButtonHandle('cancel', this.selectedUnitMenu.hide, this.selectedUnitMenu);		    		    this.selectedPartyMenu.show({			x : party.x + 64,			y : party.y		    });		}	},	handleUnitMoveSelect : function (unit) {		this.selectedUnitMenu.hide();	}};