Extending Sprite Class

[Jambutters]

This is more of a JS question really. I know the solution, I just need to know why this won't work, opposed to that.

I am very new to PIXI and just barely grasping the concepts of oop so bare with me. What I'm wanting to build is an array based keyframe animation system ie (player.add.animations([3.5.9.10], walk, fps)). Of course I don't really like using game engines because I feel like I won't really be "learning" anything.

let Container = PIXI.Container, 
                autoDetectRenderer = PIXI.autoDetectRenderer,
                loader = PIXI.loader,
                resources = PIXI.loader.resources,
                Sprite = PIXI.Sprite;

        icon = function(img, type){ 
           var self = {
               img: img,
               type: type
               
           };
            
            return self;
        };

        icon.prototype = Object.create(Sprite); 
        icon.prototype.animate = function(){
            console.log("test");
            
        };

        var meow = icon("rwqerq" , "asdf"); 
        meow.animate();

So I was wondering why meow didn't inherit the .animate method, the console says its a function. I know that removing "var self = {}" and "return self;" will fix the problem, along with using "this.img = img;" and the "new" keyword will fix this problem, but again, I just want to know why this doesn't work opposed to the solution, so I can expand my general js knowledge.

 

[ivan.popelyshev]

//1. dont forget to call super constructor
function icon(img, type) {
    this.img = img;
    this.type = type;
//may be you want to convert img to texture somehow?
    Sprite.call(this, I_DONT_KNOW_WHAT_TEXTURE_YOU_WANT_TO_USE_HERE);
}

//2. prototype
icon.prototype = Object.create(Sprite.prototype);

//3. creation
var meow = new icon("foo", "bar");

 

[Jags]

beeSprite = function () {
    var beeTexture = new PIXI.Texture.fromImage("img/bee.svg");
    PIXI.Sprite.call(this,this.beeTexture);
    

this.position.x = 100;
this.position.y = 100;

};

//beeSprite.constructor = beeSprite;
beeSprite.prototype = Object.create( PIXI.Sprite.prototype );

I couldn't able to render the sprite ... No error found

[Taz]

looks like you'll be creating a PIXI.Sprite instead of a beeSprite. Here's how to assign the constructor (the step that's missing):

beeSprite = function () {
    var beeTexture = new PIXI.Texture.fromImage("img/bee.svg");
    PIXI.Sprite.call(this,this.beeTexture);
    
    this.position.x = 100;
    this.position.y = 100;
};

beeSprite.prototype = Object.create( PIXI.Sprite.prototype );
beeSprite.prototype.constructor = beeSprite;

 

[JackParke]

I think the last line is superfluous:

beeSprite.prototype.constructor = beeSprite;

 

[Taz]

Not if you want this code to call your constructor instead of PIXI.Sprite's:

var bee = new beeSprite();

 

[xerver]

23 hours ago, JackParke said:

I think the last line is superfluous:

beeSprite.prototype.constructor = beeSprite;

 

Unfortunately it is not. If you assign the prototype object (like happens in the line above) then .prototype.constructor will not be properly set. Normal usage you wouldn't notice because the new operator would work fine. However if you ever needed to read the constructor value from an instance (which I have had to do) it would be wrong if the person extending the prototype didn't reset it properly.

Take for example a scenario where you need to create a new instance from an existing one. You could do something like: (var obj = new otherInstance.constructor()) which would obviously create the wrong instance unless you set it up properly. Also some debugging utilities read the .constructor property and will pull the wrong one if it isn't set.

You don't *have* to reset it back to a correct value, but it is good practice because not doing so might lead to unexpected behavior down the line. The extend keyword does this for you in ES6.

22 hours ago, magig said:

Not if you want this code to call your constructor instead of PIXI.Sprite's:

var bee = new beeSprite();

 

A quick correction here, setting the .constructor prototype property does not effect how the new operator works. `new` simply will run the function you specify as a constructor.