SauceCode Posted April 16, 2020 Share Posted April 16, 2020 Hi ! Initially, I work alone without asking help (with lurking some forums and stack overflow threads), but, I am completely stuck for days, so, here I am Background : I am working on a top down game with Pixijs with one problem: manage as many entities as I can before the simulation slow down. I heard about gsap and I would like to "convert" my manual translations with gsap animations. For now, all animations are okay, except : TLDR : How can I animate a keyboard activated movement for a ship with a constant speed of 10px/s with a fixed 1s acceleration/deceleration ? Tried solution (in codepen) : As I don't know the destination it looks that I can't tween with `gsap.to`. For now, i am easing a velocity value. Added in a custom loop to the position of the ship each frame (with gsap.ticker). With this solution, I am not using gsap each frame so ... no lag smoothing and frame interpolation. Thanks you for your time 🙏 See the Pen LYpGqZz by SauceCode (@SauceCode) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 16, 2020 Share Posted April 16, 2020 I think your approach should be fine if that's your requirements for the fixed duration. The only suggestion I would make is to not make so many tweens, like in a keydown event, which constantly fires. You could just create one tween, and play/reverse it. See the Pen 248a88b4ac2e45c726a9cfdd97c008d3 by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
SauceCode Posted April 16, 2020 Author Share Posted April 16, 2020 Very interesting ! I will look at this for key handling. The question that remains is by doing a gsap.ticker.add(() => { pos.x += velocity.x }),will we have cpu sluttering on animation that we avoid using a gsap.to() ? Thanks Link to comment Share on other sites More sharing options...
OSUblake Posted April 16, 2020 Share Posted April 16, 2020 gsap won't eliminate stuttering. You might even want to turn off lag smoothing for a game. 🤷♂️ But you can compensate for some lag in a ticker, like here. https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js app.ticker.add((delta) => { // use delta to create frame-independent transform container.rotation -= 0.01 * delta; }); 3 Link to comment Share on other sites More sharing options...
SauceCode Posted April 16, 2020 Author Share Posted April 16, 2020 Perfect, thanks you for your time. I have a better understanding on how integrate gsap Link to comment Share on other sites More sharing options...
OSUblake Posted April 16, 2020 Share Posted April 16, 2020 Just a simple demonstration showing stuttering. The ticker is rotating the pink box and gsap is rotating the blue box. See the Pen db04b8b225bd19707111649a66ef5a05 by osublake (@osublake) on CodePen 1 Link to comment Share on other sites More sharing options...
SauceCode Posted April 16, 2020 Author Share Posted April 16, 2020 Interesting ... We can see that there is no significant difference between the two. But, using the two together can bring us some light drifting over time. 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