How to zoom linearly ?

[Tylox]

Hi, 

Adding the possibility of zooming in my game when scrolling the mouse, how to repeatedly zoom in the same amount of "space" ?

I mean, I want that the camera move linearly.

I tried to modify the stage.scale by 0.1, but the sequence of zoom is not uniform. 

Next, I tried add +- 500 to stage.width (resp. stage.height) but it has the same result: zoom in becomes too weak and zoom out becomes too strong. Idem by doing it on the renderer.

How would you handle it ? 

[Sambrosia]

You need to multiply instead of add:

newZoom = oldZoom * zoomAmount;

 

[ClusterAtlas]

Just a question, has anybody tried tweening/easing the zooming process?

I think it will make things way way smoother 

[Sambrosia]

@ServerCharlie Yup.

The idea is similar, but how much it zooms each frame is determined by your interpolation code.

An elegant way would be to store your zoom info somewhere, then call your interpolation code every frame:

const zoom = {
    current: 1,
    desired: 2
};

function update() {
    // ...
    // Somewhere inside your update function
    zoom.current += (zoom.desired - zoom.current) / 60;
    // ...
}

Then you can set zoom.desired from elsewhere in your code and it will interpolate towards it.

You can replace

(zoom.desired - zoom.current) / 60

with any interpolation function you want.

[Kalith]

Here is an example of pan/zoom using PIXI. It solves many of the most common problems: http://wottactic.com/zoom.html. (use scroll wheel to zoom + drag mouse to pan)

It does a few things:

1. zooms linearly
2. corrects to keep the position of the cursor in the same place (pan to cursor)
3. corrects so you can not move outside the frame.

It also ads panning after you've zoomed in by dragging the mouse.

[caymanbruce]

On 2/5/2017 at 1:43 PM, Sambrosia said:

@ServerCharlie Yup.

The idea is similar, but how much it zooms each frame is determined by your interpolation code.

An elegant way would be to store your zoom info somewhere, then call your interpolation code every frame:

const zoom = {
    current: 1,
    desired: 2
};

function update() {
    // ...
    // Somewhere inside your update function
    zoom.current += (zoom.desired - zoom.current) / 60;
    // ...
}

Then you can set zoom.desired from elsewhere in your code and it will interpolate towards it.

You can replace

(zoom.desired - zoom.current) / 60

with any interpolation function you want.

This seems to be a better approach than using Tweening libraries in game ticks. Have you compared your method and other Tweening libraries? I have tried using TweenMax functions in ticks but it's kind of slow because the tweening operations are inside the TweenMax tick listener. So I hope interpolating the zooming without using any libraries may get faster.

[ClusterAtlas]

On 2/6/2017 at 9:16 PM, Kalith said:

Here is an example of pan/zoom using PIXI. It solves many of the most common problems: http://wottactic.com/zoom.html. (use scroll wheel to zoom + drag mouse to pan)

It does a few things:

1. zooms linearly
2. corrects to keep the position of the cursor in the same place (pan to cursor)
3. corrects so you can not move outside the frame.

It also ads panning after you've zoomed in by dragging the mouse.

Amazing, I actually integrated it in my editor project and got it working!

I did some fixes too, since it the panning was quite buggy on "mouseup".

+ created "mouseup" event

+ shifted into using PIXI's ticker.

+ stored vars (current mouse position and last pan location) in some object (in this case the EDITOR object)

+ did a mouse button filter (in this case, e.which == 3 means i can only pan w/ right click button )

http://pastebin.com/y00rdfD1

Thanks a lot Kalith! 

[Sambrosia]

18 hours ago, caymanbruce said:

This seems to be a better approach than using Tweening libraries in game ticks. Have you compared your method and other Tweening libraries? I have tried using TweenMax functions in ticks but it's kind of slow because the tweening operations are inside the TweenMax tick listener. So I hope interpolating the zooming without using any libraries may get faster.

I've not tried it with a tweening library. The method I gave should be plenty faster than you really need in practice.

[Kalith]

18 hours ago, ServerCharlie said:

Amazing, I actually integrated it in my editor project and got it working!

I did some fixes too, since it the panning was quite buggy on "mouseup".

+ created "mouseup" event

+ shifted into using PIXI's ticker.

+ stored vars (current mouse position and last pan location) in some object (in this case the EDITOR object)

+ did a mouse button filter (in this case, e.which == 3 means i can only pan w/ right click button )

http://pastebin.com/y00rdfD1

Thanks a lot Kalith! 

Since you seem to like it, I had another look to see if I can improve things.

Since people here are talking about smoothing the zoom, I gave that a try. It's actually no longer linear but slows down a bit near the end.

Another thing I noticed when I made the image a little larger is that panning performance is absolutely garbage. After a little bit of investigating I noticed that mousemove triggers more than a thousand times every second, which is a little silly because my display only refreshes about 60 times every second. So I used the browsers built in requestAnimationFrame to call it once every frame instead, which makes things much smoother.

Anyway here is is http://wottactic.com/smooth_zoom.html, take from it what you want.