• Content Count

  • Joined

  • Last visited

  1. Ok, that makes a lot of sense. I was going to optimize the image anyway. Good to know. I will try this after lunch. I have to congratulate the PIXI devs. So far it has been a very pleasant experience working with PIXI. My only issues so far have been related to my inexperience with PIXI and integrating it with other tools. I am loving it.
  2. NVM. It seems to be an issue with the image itself. I just tried another image (much lower resolution jpg) and it works. The image I was trying to load is a hi resolution png with transparent background. Strange. I will post back here if I find a resolution.
  3. Hello again. I've been on a roll with PIXI 4.8.7 and Angular 7. Up until now I have not needed to load images so things have gone pretty smoothly. Unfortunately I have run into an issue with loading images. I've tried doing a simple method using just PIXI.Texture.fromImage() as well as using a loader like in this example... In both cases the problem is the same. No image is ever shown in the canvas. I log the stage, container, Sprite and Loader.resources and everything seems to check out. There is a texture present and the image must have loaded because it reports the correct image dimensions. For some reason there is nothing on the screen. I made sure to add .bind(this) to the callback name I'm stumped at the moment and could use some guidance. If anybody could link me to a working example of how to do this or tips on how to trouble shoot this further I would really appreciate it. Been wrestling with this all weekend and really need to get back on track. Thanks in advance for any help.
  4. 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.
  5. No, I just installed @types/pixi.js via npm
  6. 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.
  7. Just looked through the issues and things don't look good. Also, is it true that canvas support has been dropped?
  8. The version is PIXI.js v4.8.3
  9. 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?
  10. (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 `
  11. 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.
  12. Forgot to mention, I have two use cases, 1 - multiple smaller charts based on canvas 2d 2 - A single complex chart which I can use Pixi's default webgl renderer
  13. Thanks for the replies. Definitely some food for thought. I've done some preliminary research into how I could use D3 with canvas but it involves doing some things like creating the would-be DOM structure in memory. There were some other complications around user interaction with canvas+D3, although those may have been fixed with more recent versions. Since I used to do a lot of Actionscript 3 back in the day, I'm not afraid of trying to do these charting tasks in pixi or even eventually figuring out how to get D3 to use pixi's classes/methods instead of SVG for drawing things out. Also like I mentioned in my original post, getting familiar with pixi will have other benefits outside of my charting needs. In any case, I think I will give pixi a shot and put together a proof of concept. I'll do a line chart with 1 line and a lot of points and see how many canvas elements I can get onto a page. If that fails I'll go with D3
  14. First off I would like to say hello to everybody. As a web developer that started off with AS3 I was very happy to discover pixi.js! Feels just like home. I was wondering about running multiple instances of PIXI.js using canvas instead of WebGL. I'm currently working on a project where we are using charts and data visualization and have been looking for alternative libraries. We're currently using SVG based C3.js and are running into performance issues. My options are: Switch to another charting library that is canvas based (These are performant but not very extendable) Make the jump to D3.js which could be made to use canvas (hacky + big learning curve) Use a general purpose library for canvas. PIXI.js would also offer the bonus of WebGL based solutions for full screen visualizations. I could also use these skills for other things I'm looking at #3. I know you can only have so many WebGL renderers on a page at once so I was wondering about forcing canvas. TL;DR How many canvases can I have up at once on a single page? Is this a bad idea? Just wanted to know before I invest a bunch of time on learning another library.