zoom out/in camera as seen in angry birds

[valueerror]

is it possible to add pinch to zoom to my whole game stage like it is done in the game "angry birds" ?

 

i want to be able to zoom out fast to get an overview of the map and then zoom in again to play the map..   it does not necessarily mean that in the zoomed state input events are beeing passed through.. a passive zoom would also be ok.. 

[lewster32]

You'd have to manually add this as there's no native gesture support; though multitouch is supported. My feeling is this would be a pain to implement and would cause all kinds of problems at the moment.

[JakeCake]

Phaser does not give extra support for gestures yet (good suggestion for the Phaser 3 Wishlist), but you could take a look at http://hammerjs.github.io which is all about gestures, swipes etc.

 

As lewster says, you could also check the active pointers and see if they move closer/further from each other, but this is a pretty big project in itself, and it is going to feel weird on different devices as people are used to how their device handles gestures natively.

 

My advice, look into hammer.js or add the handlers yourself. It goes something like this:

//Add handler in your initialisation function:game.canvas.addEventListener("gesturechange", onGestureChange, true);

function onGestureChange(e) {    var delta = (e.wheelDelta || -e.detail);};

[valueerror]

hey thx.. 

yesterday i hacked around and managed to get zoom in/out to work really nice..  my userinterface stays in the original state while the rest of the world zooms out or in (everything except the ui is in the same meta group and i scale the group

 

i also managed to hack something like input redirection in the zoomed state so all my touch/mouse inputs get to the right coordinates in the zoomed world 

also my own implementation of "camera follow the active player with easing" now works in the zoomed state.. wonderful..   now the user can choose in which zoom level he likes to play and everything works like expected

 

the only thing left ist pinch to zoom.. an maybe pan (i don't know if thats english.. i mean.. move the world around with your finger to look at it)

 

i think i will go with the checking of two active pointers first (check the distance, check the change of the distance and translate it to the zoom factor) and if this doesn't work out i'll give hammer.js a try..

 

thx for your answers!!

[wayfinder]

Just out of interest, did you implement parallax scrolling with this? And if so, how do you handle the edges of the world?

[valueerror]

no parallax in my game..  i can imagine that zooming would mess with parallax but it should be something to handle..  i had to recalculate a lot of things to repair the messed up input for example.

 

btw.

 

i now have pinch to zoom and it works wonderful..  i hacked it on my own and it works so i guess i don't need hammer.js..

 

here is a small example on how i did it:

if(game.input.pointer1.isDown && game.input.pointer2.isDown){        olddistance = distance;        distance = Phaser.Math.distance(game.input.pointer1.x, game.input.pointer1.y, game.input.pointer2.x, game.input.pointer2.y);        distancedelta = Math.abs(olddistance - distance);        if (olddistance > distance && distancedelta > 4){ worldScale -= 0.02; }        else if (olddistance < distance && distancedelta > 4){ worldScale += 0.02;}    }    worldScale = Phaser.Math.clamp(worldScale, 0.5, 1); // set a minimum and maximum scale value    if (worldScale<1){        zoomed=true;        stageGroup.scale.set(worldScale);        if (follow){            ease=0.1;            cameraPos.x += (follow.x * worldScale- cameraPos.x) * ease ;            cameraPos.y += (follow.y * worldScale- cameraPos.y) * ease ;            game.camera.focusOnXY(cameraPos.x, cameraPos.y);        }.....

there is - of course - room for improvement

[0912403]

if(game.input.pointer1.isDown && game.input.pointer2.isDown){        olddistance = distance;        distance = Phaser.Math.distance(game.input.pointer1.x, game.input.pointer1.y, game.input.pointer2.x, game.input.pointer2.y);        distancedelta = Math.abs(olddistance - distance);        if (olddistance > distance && distancedelta > 4){ worldScale -= 0.02; }        else if (olddistance < distance && distancedelta > 4){ worldScale += 0.02;}    }    worldScale = Phaser.Math.clamp(worldScale, 0.5, 1); // set a minimum and maximum scale value    if (worldScale<1){        zoomed=true;        stageGroup.scale.set(worldScale);        if (follow){            ease=0.1;            cameraPos.x += (follow.x * worldScale- cameraPos.x) * ease ;            cameraPos.y += (follow.y * worldScale- cameraPos.y) * ease ;            game.camera.focusOnXY(cameraPos.x, cameraPos.y);        }.....

Hi valueerror,

what does the "follow" mean?

[valueerror]

this section could be replaced with game.camera.follow(sprite) but i wanted easing because it looks better so i did it this way..

 

follow is the sprite the camera should follow

[fariazz]

That's very nice valueerror!

 

For the UI you mentioned earlier, did you also implement that on Phaser, or are you using Phaser just for the "game area"? how did you do it so that this area wouldn't zoom in?

[valueerror]

i'm using phaser only.. so the ui is a group of buttons and other stuff (text, hearts for energy, and so on)  

 

i am doing this in my code:

function setupDisplayGroups(){    stageGroup = game.add.group(); // this group is used for scaling and will contain everything except the UI    backgroundobjects = game.add.group();    groundobjects = game.add.group();    waterobjects = game.add.group();    mines = game.add.group();    rampobjects = game.add.group();    blockobjects = game.add.group();    iceblocks = game.add.group();    woodblocks = game.add.group();    finishlines = game.add.group();    assets = game.add.group();    playergroup = game.add.group();    plantobjects = game.add.group();    uiobjects = game.add.group();  // we don't include this in our stage "meta" group    stageGroup.add(backgroundobjects);    stageGroup.add(groundobjects);    stageGroup.add(waterobjects);    stageGroup.add(mines);    stageGroup.add(rampobjects);    stageGroup.add(blockobjects);    stageGroup.add(iceblocks);    stageGroup.add(woodblocks);    stageGroup.add(finishlines);    stageGroup.add(assets);    stageGroup.add(playergroup);    stageGroup.add(plantobjects);}

with this approach i can accomplish finegrained z-index positioning of all my elements

[BrandiATMuhkuh]

Is there any chance you can post an simple phaser example on JSfiddle? I try to implement your method since a while but it does not work. 

Thank you

[valueerror]

http://test.xapient.net/phaser/zoom/

[valueerror]

oh.. i forgot to menton that in the given example i introduced a variable to control the initial scale factor so i can tell phaser to start with scaling the stage to 0.5 and only allows scaling between 0 and 0.5

this and also the panning of the camera makes the whole code little bit complex

[BrandiATMuhkuh]

Thank you @valueerror for your link. I tried it on my nexus 7 with chrome beta and your example zooms not between the finger points, but instead via the center of the game world. I'm looking for something that can do this https://cloudup.com/blog/how-we-made-zoom-on-mobile-using-css3-and-js 

[valueerror]

its not the center of the game world - its the center of the actual camera view.. it just moves away because i constrained it to always be inside the game world so no black bars would occur.. it shouldntbe so hard to changethat behaviour.. dont update the bounds.. find the worldpoint between the two fingers and use this point for the camera to focus on..

[valueerror]

btw. your link doesn't work for me..

 

i simplified the code in the example as much as i can and gave the camera bigger bounds so the zoom in/out effect will always be in the current center of the view..  i also marked the point (in the comments) where you could use a different approach (e.g. calculate the center between the fingers and use this worldpoint for the camera to focus on instead

[BrandiATMuhkuh]

I tried for quite a while to center the zoom where my mouse pointer is. Some stuff looked promising but far from anything useful. Seems like it is easy for you. If you could add this part to the code, I'm super happy to pay you back somehow. E.g with a beer. 

[valueerror]

well.. i gave it a try..  it now uses the last click as focus center the moment you start to zoom with the keyboard (A or O)   (i use a dvorak keyboard and A and S are just to faar away ^^)

AND it now calculates the middle between 2 fingers  and uses this point as focus-center (if two fingers are recognized)

 

IMHO this feels kinda unnatural.. especially when using the keyboard i'd rather stay with the zoom in at the current center of the view method... 

when it comes to pinch to zoom it might be the better solution now but it definitely needs to EASE into the new position..  the sudden jump is just to hard now .. 

 

but give it a try.. maybe it's a step into the right direction

 

 

http://test.xapient.net/phaser/zoom/

[valueerror]

well...  here is a refined version without focuschange for keyboard zoom and with easing for pinch to zoom..     needs some tuning of course but is already usable   

 

 http://test.xapient.net/phaser/zoom/index-ease.html

[BrandiATMuhkuh]

Sorry I was at a robotic conference the last week. 

 

I just tried both versions but it seems like it does pretty much the opposite what I need. 

Right now, the world (camera) jumps to the point I clicked, and than scales and eases aways from it. (That is what I see)

What I need is the opposite. Everything under the cursor (or two fingers) should stay at the exact same point, and the center of the world should ease "away" from the cursor. I want that phaser behaves like google maps on your android/iOS. 

 

I found a css3+JS implementation that does what I want (https://github.com/component/pinch/blob/master/index.js) but i can't really move it to phaser. (cloudup.com/blog/how-we-made-zoom-on-mobile-using-css3-and-js)

[valueerror]

 the problem is - for the google maps effect - it should actually not focus (center the camera over a point) at all..  the camera should move away from the point between your fingers - proportionally to the distance between the point on the map in the precise center of the camera (when the zooming starts) and the point between your fingers, that is growing when you zoom in for example and shrinking when you zoom out..

 

that's a hard one to crack..

 

for now it brings you to the exact point you chose with your fingers.. this works but it moves the point into the center - that's something we are not used to (while it's more practical in real life because most of the time we want to see the point of interest in the center of our device)

 

i gave the "move the camera away from the POI according to the state of zoom" approach a try..   maybe i got it all wrong.. i don't know.. the current example goes at least into the right direction..

 

 http://test.xapient.net/phaser/zoom/

 

have a look at the code please and try to wrap your head around it.. maybe with this starter you are able to fix the code and make it actually work

[Red Spark]

Have you tested it in Samsung stock browser on S2, S3 or S4? I'm curious whether it would be able handle two-finger controls without doing some weird native gestures instead

[valueerror]

http://www.html5gamedevs.com/topic/10701-camera-zoom-to-mouse-pointer/?p=63013

i dont know because i have no samsung phones but in the link above you'll find a better version of this

i managed to make it work like google maps with pinch2zoom and mousewheelzoom. use this one! it zooms in/out and keeps the point between your fingers in the camera