Improvement: Add an ease option to the follow plugin about pixi-viewport HOT 6 CLOSED

This is really hard because the target is moving. Easing functions work great with a known time interval, but if the distance changes then the time changes and you end up with a weird easing curve that speeds up and slows down.

The alternative is to slow the camera as you approach the target. The pixi-ease library isn't built to handle this, but I'd love to add it. Right now I'm knee-deep in building a tiling library, however.

from pixi-viewport.

@davidfig sorry to revive this old thread, but wouldn't it be straightforward to use lerp? I'm wondering how to smoothen the .follow() using your library (which is great btw!)

from pixi-viewport.

on moveCenter(), something like this:

function lerp (a, b, t) { return (b - a) * t + a; }

this._targetX = (this.worldScreenWidth / 2 - x) * this.scale.x;
this._targetY = (this.worldScreenHeight / 2 - y) * this.scale.y;

this.position.x = lerp(this.position.x * this.scale.x, this._targetX, 0.2);
this.position.y = lerp(this.position.y * this.scale.y, this._targetY, 0.2);

from pixi-viewport.

In my comment above, I was contemplating a Penner easing function where the camera slows down (or speeds up, bounces, etc.) as it approaches the target. The reason I moved away was that it created weirdness if the target was also moving (which I contemplate by the follow plugin).

What we could do as an alternative is to provide easeTo and easeZoom functions that are based on time. If we have the time then the Penner equations work great. This would be different than follow (or snap or snapZoom), but it would probably solve some broad use cases.

Is that similar to what you're thinking about? I currently use my pixi-ease library in concert with pixi-viewport to perform these type of eases, but I'd much prefer to have it built in.

from pixi-viewport.

This is how I'm easing follow in my game: www.braains.io and it works great. It's not using pixi yet.

smoothing = 15

diffX = followedTargetX - cameraX;
diffY = followedTargetY - cameraY;

cameraX = cameraX + diffX / smoothing;
cameraY = cameraY + diffY / smoothing;

I'm currently implementing pixi for my engine. Adding ease to pixi-viewport follow method would be fantastic!

from pixi-viewport.

I added an options.acceleration to follow(). It's not perfect as we don't know the target's velocity so cannot accurately calculate when to start deceleration. (I guess we can add that as another option--but that might be too complicated to understand in an API). It does works for simple cases, such as when the camera first starts moving toward a target and when the target stops moving.

@m0dE The smoothing is a good idea for certain scenarios but the speed would vary too greatly based on distance--e.g., if the camera is super far away it would be jarring.

I can also add easing functions to move the viewport outside of follow() since that's relatively straightforward. Let me know if people are interested in that. I usually use an external library (like pixi-ease) for those movements.

Try it out and let me know what you think.

from pixi-viewport.