What's the proper way to extend a Pixi.Sprite class?

[komali2]

We're trying to figure the best way to generate our own custom Pixi.Sprite classes in a webpack built, typescript included app. 

What we're hoping to do, is something along these lines (which we've gotten working but have massive tslint errors from: 

 

export class customSpriteClass {
  constructor(imageURL){
      const customSprite: PIXI.Sprite = PIXI.Sprite.fromImage(imageURL);
      //custom methods, variables, etc
      return customSprite;
  }
}

What we can't figure out is the "proper" way to do this. The above works, but our efforts to modify customSprite with methods that refer to `this` cause tslint errors about given properties not existing on the customSpriteClass type,  the return statement results in the super weird "Return type of constructor signature must be assignable to the instance type of the class." error, and our methods throw all sorts of different errors. 

We tried doing something like "export class customSpriteClass extends PIXI.Sprite", but to get that working we still need to invoke ".fromImage" anyway...

It's a bit messy and we're hoping to find someone that's gone through this path already - I've been googling for about an hour and have yet to turn up anything definitive, weirdly. 

So: Anybody out there ever successfully extend PIXI.Sprite to make their own custom sprite classes? Particularly in typescript? 

[komali2]

Ah, finally turned up something helpful: https://sprite-storm.com/tutorial/pixi-tutorial/dynamic-button-class-pixi-js/ not yet implemented it yet but will comment further if this turned out useful

[botmaster]

In typescript it's a breeze, we really have no problem with this. With webpack you just need to make sure the pixijs is included in your vendors and loaded before your app and you'll get no problem at runtime. For tlint it's all about getting the correct @types/pixijs, you can create fake ones if you need to.

Also notice how a "Sprite.fromImage" really works under the hood, it's calling the texture.fromImage so you can simply extend Sprite and pass a texture in constructor and really any other system:

 

Sprite.fromImage = function fromImage(imageId, crossorigin, scaleMode) {

return new Sprite(_Texture2.default.fromImage(imageId, crossorigin, scaleMode));

};

[xerver]

If you are using ES6 then extend the class using ES6:

export class CustomSpriteClass extends PIXI.Sprite
{
    constructor(imageURL)
    {
        super(Texture.fromImage(imageURL));
    }
}

If you have to use ES5 the proper way to extend a constructor is:

function CustomSpriteClass(imageURL)
{
    PIXI.Sprite.call(this, Texture.fromImage(imageURL));
}

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

 

[komali2]

Cheers xerver, that way worked best for us!