Sign in to follow this  
dszidi

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.

Share this post


Link to post
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 `

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I'm just going to have to revisit this inheritance problem later I think. For what I'm doing right now I only need to write less than a dozen classes so fixing it later won't be too big of a task.

Share this post


Link to post
Share on other sites

I still use pixi 4.8.x and still extend using PIXI.xxxx syntax in simple typescript, Cordova, and ionic + angular projects. In all cases everything is fine both at runtime and dev time.

eg. 

export class Graphics extends PIXI.Graphics

Share this post


Link to post
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)

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.