Jump to content

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


Recommended Posts

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 {
      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? 

Link to comment
Share on other sites

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

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

export class CustomSpriteClass extends PIXI.Sprite

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;


Link to comment
Share on other sites

  • 4 weeks later...

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.

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.


  • Recently Browsing   0 members

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