Tween scale game.world when zooming

[Batzi]

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?

[chongdashu]

Where are you calling this code? In create() ? More context would be useful (e.g., just post the entire code from create() and update() and render()

[WombatTurkey]

Where are you calling this code? In create() ? More context would be useful (e.g., just post the entire code from create() and update() and render()

 

 

And a jsfiddle

[chongdashu]

And a jsfiddle

 

That would be the best!

[jmp909]

"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 ?

[Batzi]

"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?

[jmp909]

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.

 

 

[Batzi]

 

 

 

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();              }

[Batzi]

Where are you calling this code? In create() ? More context would be useful (e.g., just post the entire code from create() and update() and render()

This is being executed in the create()

[chongdashu]

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

[Batzi]

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!

[chongdashu]

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

[Batzi]

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?

[jmp909]

you'd need to stop it first before you create/start a new one

[jmp909]

http://jsfiddle.net/rts8g2k0/13/

[Batzi]

http://jsfiddle.net/rts8g2k0/13/

Thank you for the example, it works really well. But assuming you're moving a sprite (i.e: using cursors) and you do a game.camera.follow(sprite), will this affect the zooming? Cause when I tried it with the camera follow, it broke the smoothness of the zoom.