Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to zoom linearly ?


Tylox
 Share

Recommended Posts

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 ? 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...