jSwtch Posted April 4, 2020 Share Posted April 4, 2020 Hello! I am having an isssue correctly understanding how the gsap stagger will work with respect to pixiplugin. As soon as I attempt to set the fill or line color of a graphics element I get an error, and the transition is to black. I understand the timeline is running on an array - but I have tried running on individual elements - and I get the same result. I am hoping someone can help me understand the best approach to connect everything here. Thanks See the Pen poJmqva?editors=1011 by jswtch (@jswtch) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 4, 2020 Share Posted April 4, 2020 Hey jSwtch and welcome. Something funny does seem to be going on. 30 out of 50 of the elements throw errors because of the fillColor and do weird flashing. Minimal repro: const animateRectangleSet = (set) => { console.log(set) gsap.to([set.slice(0, 50)], { pixi: { fillColor: "#fff" } }); }; Link to comment Share on other sites More sharing options...
jSwtch Posted April 4, 2020 Author Share Posted April 4, 2020 I am also having an issue with the fill color changing with pixi graphics and pixiplugin as seen here: See the Pen LYVoaxJ by jswtch (@jswtch) on CodePen Seems like the rectangle is working but not the circle? EDIT: Quote probably because rectangle is rendered with batch renderer and circle is not, because number of vertices too high. Modifying shape props is tricky. try "graphics.geometry.invalidate()" every frame for circle animation Link to comment Share on other sites More sharing options...
jSwtch Posted April 4, 2020 Author Share Posted April 4, 2020 I had started a similar thread here (https://www.html5gamedevs.com/topic/45085-gsap-v3-pixijs-v5-pixiplugin-w-graphics-issue/) for a different reason. I was wondering if someone here could comment on this question though. @OSUblake Quote So I have a general question about performance and practicality -> I want to create geometric motion graphics similar to (see embedded video). I could do this with svg and gsap alone - but I thought I would get a performance boost for rendering the scene in PixiJS. I thought specifically that transitioning background color would be 'expensive' if done in the DOM directly instead of a canvas with webGL2. I do not plan to have 100 000s of elements. Would this type of animation be best done in with PixiJS + tweening or just svg + tweening. Link to comment Share on other sites More sharing options...
PointC Posted April 4, 2020 Share Posted April 4, 2020 37 minutes ago, jSwtch said: Seems like the rectangle is working but not the circle? Not sure if it'll help but you could try tint instead of fillColor. See the Pen MWwMYyG by PointC (@PointC) on CodePen Just a thought. Happy tweening. 1 Link to comment Share on other sites More sharing options...
jSwtch Posted April 4, 2020 Author Share Posted April 4, 2020 14 minutes ago, PointC said: Not sure if it'll help but you could try tint instead of fillColor. Just a thought. Happy tweening. this is likely good enough thanks! (https://pixijs.download/v5.0.0-alpha.2/docs/PIXI.Graphics.html) tint number The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint. Default Value: 0xFFFFFF Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2020 Share Posted April 4, 2020 Interesting - it looks like PixiJS is now returning a string for the property, but in a hexidecimal kinda way like "0xFF54CC" instead of "#FF54CC" or a regular number, 0xFF54CC. I'll update the plugin accordingly in the next release. You can preview it here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin3.min.js 4 Link to comment Share on other sites More sharing options...
PointC Posted April 4, 2020 Share Posted April 4, 2020 I guess it's not enough to keep GSAP up to date and bug free. Now PixiJS adds a degree of difficulty with surprise changes. That's why Jack makes the big bucks. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 4, 2020 Share Posted April 4, 2020 2 hours ago, jSwtch said: I had started a similar thread here (https://www.html5gamedevs.com/topic/45085-gsap-v3-pixijs-v5-pixiplugin-w-graphics-issue/) for a different reason. I was wondering if someone here could comment on this question though. @OSUblake I would second everything Ivan said. It's really hard to estimate how well each medium (WebGL, canvas2D, SVG) will perform for animating graphics like that. I'm pretty sure canvas2d will be faster than SVG, but it's not the easiest thing to work with. Will Pixi be faster than canvas2D for an animation like that? I honestly don't know, but it will be much easier to create in Pixi. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now