0
\$\begingroup\$

How would you update the state of a 2D object that is thrown forward(with an arc) facing a target to simulate a 3D(depth) like effect?

var ball; //2D ball from a sprite sheet
ball.x = 0;
ball.y = 0;
ball.scaleX = 1;
ball.scaleY = 1;

ball.throw(); //set ball to a throwing state
ball.update(); //update the ball's positon and depth by calculating its current coordinates and scale.   
ball.render();
\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

i think you should add a z property to your ball, and then update scaleX and scaleY accordingly :

throw()

ball.vx = 0.0f; //no move horizontally
ball.vy = 3.0f; //to have arc effect
ball.vz = 5.0f; //throw forward

update()

//move the ball
ball.x += ball.vx;
ball.y += ball.vy;
ball.z += ball.vz;

//gravity
ball.vy -= 0.097f;

//add code here to check collision against floor and bounce
//...

//some friction
ball.vx *= 0.99f;
ball.vy *= 0.99f;
ball.vz *= 0.99f;

render()

//projection
//very simple formula, assume camera is origin

float x = ball.x / ball.z;
float y = ball.y / ball.z;

float scaleX = ball.scaleX / ball.z;
float scaleY = ball.scaleY / ball.z;

draw ball at pos (x,y) , using scaleX and scaleY
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .