I'm writing a mini 2d game, the scene background is based on two images with parallax effect.

I want the right edge of both images, finish at the same time matching the right edge of the canvas. But I've got, both images finish on the canvas left edge.

I'm doing:

parallaxQuotient = nearImage.width / farImage.width;

And scrolling like this:

speed = 1;
farImage.position.x -= speed / parallaxQuotient ;
nearImage.position.x -= speed ;

How to get both images ending on canvas right edge?

  • \$\begingroup\$ Trying to rephrase: You want the images to loop horizontally? \$\endgroup\$
    – Anko
    Dec 29 '14 at 3:09
  • \$\begingroup\$ No, the scene should end when the nearImage.pos.x reaches canvas rigth edge. \$\endgroup\$ Dec 29 '14 at 3:43
  • \$\begingroup\$ So you want to change the size of your scene such that it ends where the parallax background would end when scrolled to the end? Or do you want to change your parallax background sizes to match a known scene size? (It would be really helpful if you could draw it.) \$\endgroup\$
    – Anko
    Dec 29 '14 at 3:50
  • \$\begingroup\$ mmm.. i want to change the size of my scene. but no the viewport of course. \$\endgroup\$ Dec 29 '14 at 4:10

The result you get (left image align) is correct given the math you use.

What you want is that when near image is reaching right edge:

nearImage.position.x == nearImage.width - viewPort.width

we have also far image reaching right edge :

farImage.position.x  == farImage.width - viewPort.width

All that should happen in the same time, so the speed ratio should be

speedRatio = ( nearImage.width - viewPort.width ) / (  farImage.width - viewPort.width ) 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.