Jambutters

Extending Sprite Class

Recommended Posts

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.

 

Share this post


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

 

Share this post


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

Share this post


Link to post
Share on other sites

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;

 

Share this post


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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.