Variable animation duration with fixed in/out ease duration

[SauceCode]

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

[OSUblake]

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

 

 

[SauceCode]

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 

 

 

[OSUblake]

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;
});

 

 

 

[SauceCode]

Perfect, thanks you for your time.

 

I have a better understanding on how integrate gsap

[OSUblake]

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

 

 

[SauceCode]

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.