Extend DisplayObjectContainer

[foofel]

Hey,

 

i am pretty new to javascript/pixi and am not sure what i am doing wrong. I try to extend a DisplayObjectContainer (like i would to it in flash) and add stuff to it. The code looks like this:

function Floor(world){	function init()	{		createGraphics();	}	function createGraphics()	{		var graphics = new PIXI.Graphics();		graphics.beginFill(0xFFFF00);		graphics.drawCircle(0, 0, 50);		graphics.endFill();		this.addChild(graphics); // <- this throws	}	init();}Floor.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);Floor.prototype.constructor = Floor;

but it look like my clas is not inheriting the DisplayObjectContainer functions, this.addChild() thwos an undefined error. . What am i missing?

[xerver]

Call the base constructor:

function Floor(world) {    PIXI.DisplayObjectContainer.call(this);    //...}

[foofel]

hmm doens't seem to work, direct c&p:

function Floor(){	PIXI.DisplayObjectContainer.call( this );	function init()	{		createGraphics();	}	function createGraphics()	{		var graphics = new PIXI.Graphics();		graphics.beginFill(0xFFFF00);		graphics.drawCircle(0, 0, 50);		graphics.endFill();		this.addChild(graphics);	}	init();}Floor.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);Floor.prototype.constructor = Floor;

results in an "Uncaught TypeError: undefined is not a function", still on the addChild line.

[bubamara]

function Floor()

{

PIXI.DisplayObjectContainer.call( this );

this.init();

}

Floor.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);

Floor.prototype.constructor = Floor;

Floor.prototype.init = function() {

this.createGraphics();

}

Floor.prototype.createGraphics = function() {

var graphics = new PIXI.Graphics();

graphics.beginFill(0xFFFF00);

graphics.drawCircle(0, 0, 50);

graphics.endFill();

this.addChild(graphics);

}

[alex_h]

Or alternatively

function Floor(){	PIXI.DisplayObjectContainer.call( this );	this.init = function ()	{		this.createGraphics();	}	this.createGraphics = function ()	{		var graphics = new PIXI.Graphics();		graphics.beginFill(0xFFFF00);		graphics.drawCircle(0, 0, 50);		graphics.endFill();		this.addChild(graphics);	}	this.init();}Floor.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);Floor.prototype.constructor = Floor;

You basically had a scope problem there. Inside your createGraphics function the keyword 'this' referred to the createGraphics function itself, not the Floor object. You can avoid this issue by making the createGraphics function a property of Floor or its prototype as shown above. When set up that way the keyword 'this' points to the object that owns the createGtaphics method.

[foofel]

Thanks for the solution (and the explanation, it helped a lot), its working now