Phaser.Sprite.call()

[3ddy]

Hello, 
recently I found code that is defining objects inheriting from Phaser.Sprite (if I google'd it and understood correctly). Can someone explain a little more about Phaser.Sprite.call() function? I haven't found it anywhere in docs. Also, what are the possible parameters?

I found an example of code on some flappy bird tutorial :

 

Pipe = function (game, x, y, speed) {
		Phaser.Sprite.call(this, game, x, y, "pipe");
		game.physics.enable(this, Phaser.Physics.ARCADE, this);
		this.body.velocity.x = speed;
		this.giveScore = true;	
	};
	
	Pipe.prototype = Object.create(Phaser.Sprite.prototype);
	Pipe.prototype.constructor = Pipe;
	
	Pipe.prototype.update = function() {
		if(this.x+this.width<bird.x && this.giveScore){
			score+=0.5;
			intro.prototype.updateScore();
			this.giveScore = false;
		}
		if(this.x<-this.width){
			this.destroy();
		}
	};

I understand that "this" in the code is object (Pipe) right? 

I also have a question if I can (and how) create another sprite inside that Pipe - for example if I can have Pipe object that have two sprites (pipe1 and pipe2 which will have different properties). Or should I just define two objects and spawn both of them instead one with 2 sprites?

[Rudrabhoj Bhati]

call is not specific to Phaser. It is a JS method which calls super objects' (from where you inherited) construction. Like this:

 

"use strict";
function inherit(o){
  function F() {}
  F.prototype = o;
  return new F;
}


var Animal = function(given_name){
  this.name = given_name;
  this.food = [];
}


Animal.prototype.found = function(item) {
  this.food.push(item);
}

var Dog = function(){
  Animal.call(this, "Dog");
}

Dog.prototype = inherit(Animal.prototype);


var Cat = function(){
  Animal.call(this, "Cat");
}

Cat.prototype = inherit(Animal.prototype);

var tommy = new Dog();
var minni = new Cat();

tommy.found("Cake");
tommy.found("Dinner");

document.writeln("Tommy found: " + tommy.food.length + " items.<br />");
document.writeln("Minni found: " + minni.food.length + " items.<br />");

 

[mattstyles]

`.call` has nothing to do with `super` objects, nor does JS have any concept of `super` objects. `.call`, along with its sister `.apply` and cousin `.bind` can be used to invoke a function with a specific context, or scope i.e. it mutates the `this` pointer to reference whatever you want it to. It can be used with various object creation methods to smudge classical inheritance into a language that does not support it, as per Rudrabhoj's example.

.call

.apply

.bind

JS scope can be tricky and stuff like call and apply actually make it even trickier, so it is well worth reading and re-reading any examples and writing plenty of your own code to test it. Those lessons stay with you no matter which JS library you use so its never wasted time and it should be a core part of any interview for JS role, understanding scope well is that important.

In your case `Pipe` looks like it is a constructor function, which invokes the Sprite constructor with its newly created reference and then copies over the properties from the Sprite prototype (by mutating the native Pipe protoype) and works so that you get a similar result as inheriting from a base class in classical languages (note that despite ES2015 introducing `class`, `extends` and `super` keywords, JS is still prototypal and not classical). There are gotchas with this but they usually rear their ugly heads when you set up longer prototype chains or try to merge more than one object (polymorphism or multiple inheritance).

If you follow along with classical methodology this means that Pipe IS a Sprite object, just with some extra bits, whereas it sounds like you simply want a container for 2 sprites. If you just need Pipe to contain two sprites then create them in the constructor or attach them to `this` inside some sort of `.create` or `.init` function and they will be available from any instantiated `Pipe` objects via `this`, unless you further mutate scope.