I'm making an RTS style game which the player can use the mouse to drag the viewport around the layout and use the mouse wheel to zoom in and out.
I have a background layer which doesn't scale but has 50% parallax. I've been having problems when scalling the foreground because when you zoom in and out the parallax effect was changing even though the values stayed the same (Zoomed out = lots of offset, zoomed in = hardly any).
To fix this I've multiplied the parallax values by the foreground layer scale, foreground has 1.5 scale = background has 75% parallax, foreground has 0.5 scale = background has 25% parallax. This kind of worked and it doesn't matter if I'm zoomed in or out the parallax is consistent.
However when I zoom in and out the position of the background changes because the parallax values are changing in realtime. The background travels diagonally down and right when zooming out and up and left when zooming in, unless you're right in the top left corner where the pararllax is centred.
From what I've found on the forums so far this is as close as I can get to what I want:
For every mouse wheel movement, set the background X position to:
X+(scrollx-ViewportWidth/2)*LayerParallaxX/100
and the same again for Y.
This gives me the effect I want, consistent background parallax and only the foreground scalling up/down without the background moving diagonally. Great! Except the background now jumps to a position relative to the viewport when I start zooming (So instead of the background moving diagonally with every mouse wheel movement, it moves once every time the viewport is moved to a different part of the layout).
Is layer2canvas and canvas2layer the way I should be positioning the background x/y values instead of the above equation? I couldn't figure out to do it... Hoping someone who can actually do maths can help :)
Thanks in advance!
p.s. I'll sort out a capx when I get the chance