How to properly simulate object aproximation towards camera in 2D?

Question

I'm trying to make some objects come towards the camera but it just doesn't feel right... you can check the progress here:

http://testing.fyrastudio.com/lab/tweetOlympics/v0.005/

You run by repeateadly hitting the letter Q, and around position 700 the first hurdle appears. But it just doesn't look right. I think that on real life, the hurdle would go slower when it's further away, and when it's closer to the camera, it would go real fast... and now it's doing it the other way around...

Here's the code handling the hurdle movement:

hurdle.scaleX = hurdle.scaleY = (athlete.position - hurdle.position_initial) / 1000;
hurdle.y = bg.image.y + (athlete.position - hurdle.position_initial) * 0.4;

Any ideas?? Thanks!!

Answer 1

What you're trying to do is perspective projection. In the simplest terms, converting a (x, y, z) world point to an (x, y) screen point involves dividing it by z. In your case, you should divide your scale by z, where z is the distance between the athlete and the hurdle:

var z:Number = athlete.position - hurdle.position_initial;

So, your scaling code should be something like:

hurdle.scaleX = hurdle.scaleY = HURDLE_WIDTH / z;

As for the y coordinate, it should follow the same (inverse) progression, so you'll be dividing by z as well:

hurdle.y = bg.image.y + (bg.image.height / 2) / z;

Explanation:

• When the athlete is infinitely far from the hurdle (z tends towards infinity),the hurdle will be rendered at the center of the screen (bg.image.y = bg.image.y) scaled by zero.
• When they are at the same position (z equals zero), it will be rendered at the base of the screen ((bg.image.y + (bg.image.height / 2)) scaled by HURDLE_WIDTH.

I'm not sure if that's exactly what you needed to do, but you can adjust the formula based on the hurdle's dimensions and center.