Jump to content

Extend PIXI.Container in Angular


Recommended Posts

I'm trying to write an application using PIXI + Angular6/TypeScript. I'm getting stuck on how to extend PIXI classes. In particular I'm trying to extend PIXI.Container from typescript. I have both PIXI.js installed as well as the @types/pixi.js package. I'm importing using...

import { Container } from 'pixi.js';

My text editor is not showing any signs of errors but when I try to compile I get a wall of red text . All messages are like this...


Module not found: ERROR can't resolve 'path' in 'node_modules/pixi.js/lib/core/sprites/webgl''

...and the path ends with sprites/foo , extras/foo, and filters

Can somebody provide a little code snippet on how to do this. I can alternatively cheat a little and write a base class with getters/setters pointing at the various Container props, but I'd rather not do that.

Link to comment
Share on other sites

(I'm going to keep posting here in case somebody else runs into these issues in the future.)

Seems it was a missing dependency. `npm install --save-dev path` made the compiler errors go away. 

Now I get runtime error 

`Uncaught ReferenceError: global is not defined at Object../node_modules/pixi.js/lib/polyfill/requestAnimationFrame.js `

Link to comment
Share on other sites

Hmm, I found a workaround to make that "global is not defined" error go away but then I get another run time error.

I suspect that perhaps there is something misconfigured at a lower level here. Is there some setting that I need to add to ts.config file?

Link to comment
Share on other sites

For runtime, you need to include pixijs in your webpack vendor, for ts dev, you only need to tweak tsconfig and get your npm pixijs @types and library. 

the syntax should still be:

class XXX extends PIXI.Container < use namespace

The import { Container} from "pixi.js" will not work even in v5.

Link to comment
Share on other sites

Well, I've tried a few of the proposed solutions and they don't seem to work for me. 

Also it currently doesn't seem to make a difference if I import using the "declare const PIXI: any" method or the more usual import { Application, Container ...} from 'pixi.js';

In both cases, everything with PIXI seems to be working just fine except for my inability to extend imported PIXI classes.

Link to comment
Share on other sites

Note, dev time only requires the @types, those @types/pixi.js declare a global PIXI that you can use directly for extending and such. The setup for runtime is different. Dev time does not need PIXI code (.js) (it could not use it anyway), it only needs the @types. So:

Typescript dev time > only needs @type/pixi.js

app Runtime > needs pixi.js (pack with webpack or such)

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.

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