Comments (6)
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.
Related Issues (20)
- Why I cannot destroy viewport on zoomed end event? HOT 1
- drag with space and left mouse OR middle mouse HOT 2
- Clampzoom doesn't seem to work HOT 1
- failed to import @pixi/core and @pixi/display HOT 1
- Problem with viewport.destroy() when React component gets dismounted HOT 3
- `import "pixi-viewport"` won't import properly in NextJS HOT 5
- Can multiple viewports share events?
- Will it support V8 version? HOT 7
- Pixi Viewport v5.2 release for Pixi v7 HOT 4
- Question: How to use Cmd+Scroll for zooming when on a Mac?
- [Docs] Suggestion: keep Jsdocs in npm package?
- "clicked" event failed to be triggered
- Missing event property from IViewportOptions HOT 3
- NPM Release Version Mismatch HOT 6
- `TypeError: Cannot set properties of undefined (setting '_parentID')` HOT 3
- Version 5.1.0 on NPM is not the same as 5.1.0 on GitHub HOT 6
- Update examples for pixi v8 HOT 6
- Is this project suitable for @pixi/react? HOT 1
- dragging stops when mouse goes over interactive object HOT 1
- Pinch not working correctly in iframe HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixi-viewport.