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\$
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\$

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.