Jump to content

Extending Sprite Class


Jambutters
 Share

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.

 

Link to comment
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");

 

Link to comment
Share on other sites

  • 1 year later...
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

Link to comment
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;

 

Link to comment
Share on other sites

  • 2 weeks later...
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.

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