Trying to extend PIXI.DisplayObjectContainer

[Bolko]

Hi, i´m trying to extend  PIXI.DisplayObjectContainer, copied it from PIXI.Sprite

StartScreen = function(testSprite){    PIXI.DisplayObjectContainer.call( this );}// constructorStartScreen.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );StartScreen.prototype.constructor = StartScreen;

But it does not work

var startScreen = new StartScreen();	   // _cont.addChild(startScreen); //throws an error "undefined is not a function" in DOP.js:123	   console.log(startScreen);  // looks like a DOP	   console.log(startScreen instanceof StartScreen); //true	   console.log(startScreen instanceof PIXI.DisplayObjectContainer); // false -> should be true

What did i get wrong?

[alex_h]

StartScreen.prototype.constructor = StartScreen;

should be

StartScreen.constructor = StartScreen;

[Sebi]

@alex_h

It's StartScreen.prototype.constructor = StartScreen;

@Bolko

The code looks fine. I doubt that you are getting that error.

We would need to see more of your code. Maybe the issue lies somewhere else. Maybe PIXI is out of scope and that's why the second instanceof test fails. Maybe there is an issue with your _cont object.

[alex_h]

Fuck,you are right! I think I must have been on drugs or something when I wrote that sorry

[xerver]

Aside from globally promoting your StartScreen function, this code is fine. You are likely reassigning prototype somewhere else. Are you doing something like this:

StartScreen = function(testSprite){    PIXI.DisplayObjectContainer.call( this );}// constructorStartScreen.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );StartScreen.prototype.constructor = StartScreen;StartScreen.prototype = {    /// ... methods and such};

Because that will not work, for hopefully obvious reasons.

[Bolko]

Thanks guys, the global scope seemed to be the problem.

I´m coming from AS3 and the 37 possible approaches to use OOP in JS are driving me mad.

 

I just copied the "PIXI way" here and now it works.

So is this the way to go or not really?

(function(){    var root = this;	StartScreen = function(testSprite)	{	    PIXI.DisplayObjectContainer.call( this );		this.addChild(testSprite);	}	// constructor	StartScreen.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );	StartScreen.prototype.constructor = StartScreen;	root.StartScreen = StartScreen;    }).call(this);  

[xerver]

The export to global scope is not going to mess with your prototype. That isn't the problem.

 

You should organize your code however you want. The first and second snippet you posts are functionally equivalent, you didn't change anything by putting it into a closure like that.

 

But you should *definitely* stop doing implicit global promotion (which happening because you have no var statement btw, so it assumes you mean window.StartScreen).

 

function StartScreen(testSprite) {    PIXI.DisplayObjectContainer.call(this);    this.addChild(testSprite);}StartScreen.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);StartScreen.prototype.constructor = StartScreen;

Is totally fine, like I mentioned before if that doesn't work something else in your program is coming along and blowing away the prototype.

[Bolko]

You should organize your code however you want. The first and second snippet you posts are functionally equivalent, you didn't change anything by putting it into a closure like that.

Strange, I don´t think i changed anything else, well, now it works

 

But you should *definitely* stop doing implicit global promotion (which happening because you have no var statement btw, so it assumes you mean window.StartScreen).

Not sure if I got that right.

Do you mean that

StartScreen = function() {}

is bad, but

var StartScreen = function() {}

and

function StartScreen() {}

are fine?

[xerver]

The first snippet implicitly promotes to global, so everytime you use that variable you are really just doing window.StartScreen. Read up on hoisting, global promotion, and function declaration vs function definitions.

[Bolko]

Yep, i know these are general JS questions and I´ve read lots of articles only to become more confused

I´d love to see an example of how a pixi project can be built up with several screens or scenes.

This one is nice but I´d love to see one not built in Typescript, but Javascript: http://ezelia.com/2013/pixi-tutorial

 

There are loads of examples, but all of them are only one-screeners, I´d like to learn more about a good practice for building a more complex app.