Simulate movement towards the screen in a 2D world

Question

I need to create the illusion of someone kicking a ball to the screen. For that, I have a initial position of the ball (about the middle of the screen), and I put the sprite of the ball scaled at 0.2 of his original size. Then, I generate a random position on the screen, and move the ball sprite to it, and at the same time, I increment the scale of the ball, until I reach 1, the real size.

At this point, the ball "hit" the screen. All this works great, but the scale of the ball is not coordinated with the movement of the ball, and, because of it, I must always wait until the scale reaches zero, after the ball is arrived to his destination, or, I must wait until the ball reach his destination, after the ball is already scaled to 1.

The question is, how must I calculate the resize factor of the ball, so it gets to 1 at the same time that the ball reach the desirable coordinates in the screen? The speed of the ball is a random number between a given range, and, of course, I'm using only 2D sprites.

Answer 1

The ball needs to travel a certain distance to reach the coordinates where it "hits" the screen. Find this distance and calculate how long the ball will take to reach it given its randomly chosen speed. Now you have a time. Use that time to calculate the scale/second change you will apply to the ball.

Roughly:

Ball = (BallOnScreenX, BallOnScreenY, BallDepthIntoScreen);
Target = (TargetX, TargetY, 0);
a = Ball.x - Target.x;
b = Ball.y - Target.y;
c = Ball.z - Target.z;
Distance = sqrt((a*a)+(b*b)+(c*c));
DeltaPerMS = GetBallSpeed();
BallMoveTimeMS =  Distance/DeltaPerMS;
ScaleDelta = 1.0 - 0.2;
ScalePerMS = ScaleDelta/BallMoveTimeMS;

Essentially you are moving the ball in x and y on screen and simulating the movement in the z direction by changing the scale.

Answer 2

This is probably done best by emulating 3D. The following is 3D maths cut down to the bare minimum needed for your case. In the following I presume that you define an [initial scale] and a [final scale] for the ball according to how large/close you want it to appear, along with start and end coordinates, and the [time] it should take. You should also define a [gravity] constant.

Scale

The [ball scale] should be proportionate to 1/[distance to screen], where [distance to screen] should decrease linearly with time, it must not reach 0, but should rather decrease to the point where the ball has the desired size.

It doesn't matter what unit the distance is measured in, so the easiest this to do is simply to declare the [initial distance] to be equal to 1/[initial scale] and [final distance] = 1/[final scale]

Position

The ball should also move across the screen in the same non-linear fashion that it scales, so when you have calculated [ball scale] you can use that to get the position as well, it would simply be

[position] = [start position] + ([end position] - [start position]) *
             ([ball scale]-[initial scale]) / ([final scale]-[initial scale])

Gravity

This makes the ball seem to move through the air in a straight line, real balls tend not to do that because of gravity, save for very speedy shots it would look weird if the ball's path doesn't bend downwards. First we need parabola that goes through 0 at the initial and final distance to screen:

[height] = ([distance to screen]-[initial distance]) *
           ([final distance]-[distance to screen])

Then this parabola should be scaled to the desired level of gravity and to give greater height to slow balls:

[height] = [height] * [gravity] * [time]^2

Finally the visual representation of this height should be scaled like the ball:

[visual height] = [height] * [ball scale]

The [visual height] should then be added to the vertical part of the screen position. Depending on time and gravity scale this may make the ball go off screen for part of the shot.

Don't hesitate to ask if something isn't clear.