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:
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
Develop games in your browser. Powerful, performant & highly capable.
the problem might be the background hitting the edge of layout. Turning on Unbounded scrolling will let it move freely, without it being limited by the boundaries. But then you have to make sure the 50% parallax layer extends out far enough that people can't see the edges...
ok, re-read your post, and I think I misunderstood you...
I tried again, this time I set the background layer parallax to the same as the foreground, but still with scale rate set to 0.
then I move the background image a scaled amount based on the layout zoom (starting with 50% at a layout scale of 100%)
so, try thins one...
Thanks AllanR , appreciate the response!
I've still got a bit of work to do to confirm if it's fixed but I think you've nailed it :)
If I'm still having an issue I'll come back with a capx lol
AllanR Thanks for your response, that's a great technique! Plus you get more control over the parallax as you do it from scratch.
I was unable to change the parallax amount though, it had to be 50%. Which is a bit of a problem for this project. Is there a way to change it without it going haywire?
Also when you are zoomed in the parallax is ever so slightly slower than zoomed out - not an issue for me but wondering if something is 0.0000000001 off.
Here's a capx for what I had done originally:
Some combination of the 2 sounds plausable but I still can't figure it out lol.