Jump to content

Tween scale game.world when zooming


Batzi
 Share

Recommended Posts

I am trying to zoom in/out on a map and I am using tween to make it as smooth as possible but I am having a problem whenever I am scrolling up/down on the mouse.

 

Here's my code

            var worldX=this.worldX;            var worldY=this.worldY;            this.game.input.mouse.mouseWheelCallback = mouseWheel;            var t = this.game.add.tween(this.game.world.scale);            function mouseWheel(event) {              if(event.wheelDelta>0){                worldX += 0.1;                worldY += 0.1;                t.to({x:worldX,y:worldY},200);                t.start();              }else {                worldX -= 0.1;                worldY -= 0.1;                t.to({x:worldX,y:worldY},200);                t.start();              }            }

This starts shaking whenever I zoom in/zoom out. What do you think the problem is? :o

Link to comment
Share on other sites

"You can create multiple tweens on the same object by calling Tween.to multiple times on the same Tween. Additional tweens specified in this way become "child" tweens and are played through in sequence."

Put in an update callback on the tween and console log actual world scale. , not worldX

Also console.log world scale in your mouse wheel event

Check if the world scale is always greater (if scaling up) or if it is fluctuating up and down.

Try killing your tween before starting the new one (you may need to manually fire complete event...see docs)

Also if you leave the wheel alone your world shrinks. Is it meant to do that ?

Link to comment
Share on other sites

"You can create multiple tweens on the same object by calling Tween.to multiple times on the same Tween. Additional tweens specified in this way become "child" tweens and are played through in sequence."

Put in an update callback on the tween and console log actual world scale. , not worldX

Also console.log world scale in your mouse wheel event

Check if the world scale is always greater (if scaling up) or if it is fluctuating up and down.

Try killing your tween before starting the new one (you may need to manually fire complete event...see docs)

Also if you leave the wheel alone your world shrinks. Is it meant to do that ?

I think the shaking comes from not killing the tween before starting the new one. I should use onComplete to do so?

Link to comment
Share on other sites

stop(complete) → {Phaser.Tween}
Stops the tween if running and flags it for deletion from the TweenManager. If called directly the Tween.onComplete signal is not dispatched and no chained tweens are started unless the complete parameter is set to true. If you just wish to pause a tween then use Tween.pause instead.

 

 

Link to comment
Share on other sites

 

 

 

I am getting this in the console

Phaser.Tween.to cannot be called after Tween.start

I tried adding t.stop() like this but it didn't work. In fact, the tween is not starting anymore.

              if(event.wheelDelta>0){                worldX += 0.1;                worldY += 0.1;                t.to({x:worldX,y:worldY},200,Phaser.Easing.Linear.None, false);                t.start();                t.stop();                              }else {                worldX -= 0.1;                worldY -= 0.1;                t.to({x:worldX,y:worldY},200,Phaser.Easing.Linear.None, false);                t.start();                t.stop();              }
Link to comment
Share on other sites

I have a few questions...

 

You are tweening the world.scale property based on the values of the worldX and worldY variables. But you are initializing worldX and worldY to the position and not the scale of the world in the first place. Wouldn't this cause some kind of snapping to occur right on wheel scroll?

 

You also do not describe what the problem you are facing is. Is it not smooth? Is it not working at all?

 

Here is a jsFiddle based on your code, but with the fixes I've suggested. Could you check to see if it's working the way you want? Otherwise, could you modify it such that it replicates the issue you are facing with the tweens? 

 

http://jsfiddle.net/chongdashu/rts8g2k0/

 

Credits of the code/images in the jsFiddle to user @get_bentley. I just picked something I had lying around to test out the scrolling code

Link to comment
Share on other sites

I have a few questions...

 

You are tweening the world.scale property based on the values of the worldX and worldY variables. But you are initializing worldX and worldY to the position and not the scale of the world in the first place. Wouldn't this cause some kind of snapping to occur right on wheel scroll?

 

You also do not describe what the problem you are facing is. Is it not smooth? Is it not working at all?

 

Here is a jsFiddle based on your code, but with the fixes I've suggested. Could you check to see if it's working the way you want? Otherwise, could you modify it such that it replicates the issue you are facing with the tweens? 

 

Credits of the code/images in the jsFiddle to user @get_bentley. I just picked something I had lying around to test out the scrolling code

I tried it and it works perfectly! But when I use your code in my project, it is not smooth at all! :o

Link to comment
Share on other sites

Maybe dump the code onto a fiddle (or pastebin) so we can replicate it?

I know what the problem is. When I remove

this.game.camera.follow(this.player);

Everything works like I want it but now the camera won't follow the character when he moves. Could the camera affect the tween?

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