Zooming + Parallax Scrolling

[wayfinder]

Hi!

 

I've added a zoom functionality to my game via world.scale, and move it around with world.pivot while the camera stays at (0, 0). I'm struggling to implement parallax layers with this.

 

I can get the desired zoom/parallax behaviour if I do no bounds check for the world movement (ie, let the edges come into view) and keep my avatar in the upper left corner of the view. But when I clamp the world.pivot values or add an offset to them, things go awry

 

I am tweening this.worldScale pingponging between 1 and 0.5, and the desired outcome is that the zoom level does not affect the position of the parallaxed object, but I can't seem to make it work with a cam offset or bounds check. Moving the cam does nothing at all, by the way.

 

Here's my code with the correct zoom/parallax, but the wrong cam behavior. I've marked the lines that change it so that the cam behavior is as desired, but zoom/parallax is broken (ie the parallaxed object changes its position in the world when the scale changes):

moveCamTo: function(x, y) {  // this is called every frame with my avatar's coordinates            this.lastWorldPivot.x = this.world.pivot.x;    this.lastWorldPivot.y = this.world.pivot.y;        var cur = new Phaser.Point;    var dest = new Phaser.Point;    var newcampos = new Phaser.Point;     cur.setTo(this.world.pivot.x, this.world.pivot.y);     // dest.setTo(x + this.camCenterX / this.worldScale, y + this.camCenterY / this.worldScale);  // uncommenting this line and commenting out the next will put the avatar in the middle of the view, but the parallaxing breaks    dest.setTo(x, y);     newcampos.setTo(this.math.interpolateFloat(cur.x, dest.x, this.camfollowfactor), this.math.interpolateFloat(cur.y, dest.y, this.camfollowfactor));     // newcampos.x = Phaser.Math.clamp(newcampos.x, 0, this.world.width - this.game.width / this.worldScale);   // commenting out these will ensure that scrolling stops before the edge of the world can come into view, but it breaks the parallaxing too    // newcampos.y = Phaser.Math.clamp(newcampos.y, 0, this.world.height - this.game.height / this.worldScale);            this.world.pivot.setTo(newcampos.x, newcampos.y); } parallax: function(pObject) {  // this is called on my parallaxing object every frame. zDepth is 0 for the game plane and goes positive for slower scrolling stuff in the background, negative for faster scrolling stuff in the foreground.                pObject.x += (this.world.pivot.x - this.lastWorldPivot.x) * pObject.zDepth;        pObject.y += (this.world.pivot.y - this.lastWorldPivot.y) * pObject.zDepth; }

Can you help me?

 

 

edit:

 

here's the version with the good parallax/zoom: https://dl.dropboxusercontent.com/u/14053711/skedgy/index.html

 

here's the version with the correct avatar position and world clamp: https://dl.dropboxusercontent.com/u/14053711/skedgy/index2.html

[David]

I haven't had a chance to examine your code, but perhaps one of my prototypes could be of assistance.

 

Take a look here:

 

http://davidgranado.com:4583/

 

It's got zooming, panning, and parallax (thought that's a bit subtle).  I just wanted to see if I could get these fundamentals working to get my idea off the ground.

 

Anywho, you'll want to take a look in play.js.  That is where you'll see methods like updateBackground, updateZoom, limitView, and also the event handler on mouse scroll that sets the zoom target (this probably needs a better place than being jammed into the state create method, but, meh, it works for now.

 

If this doesn't give you any answers, I'll see if I can take the time to look at your post a little more in-depth.

[wayfinder]

Sorry, I think something isn't working there... I took a look at the code but our setup seems to be really different

[David]

Ah.  Yeah, I just realized that I've never run it in anything other than Chrome.  If you run it in firefox, it won't zoom.

 

Oh, and you pan with WASD.

 

As for the code configuration, yeah, I've got my own weird thing going (experimenting with architectures n' all).  However, you might be able to gleen something from the methods I mentioned.

[wayfinder]

Ah, it worked when I tried it again Unfortunately, the zoom in your game works in such a way that the parallaxing layers change their place when you zoom. That's the thing I don't want to happen!