Jump to content

Trying to extend PIXI.DisplayObjectContainer


Bolko
 Share

Recommended Posts

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?

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);  
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...