Move Sprites in Parabolas

[megan]

I'm attempting to create a game where an item is launched into the air, bounces a few times on the ground, and then stops. (Points are given for distance covered)

 

What I'm struggling with is how to make the item move in parabolas, so that it looks like it's bouncing? 

Is using a tween the best solution (and if so, how would I go about that?), or should I just be playing with gravity and velocity?

 

Here's as far as I've gotten with the tweening. It should move in 3 arcs.

bounceTween = this.game.add.tween(this.bounceItem).to({ x: distance }, 800, Phaser.Easing.Quadratic.InOut, this).to({ x: distance + distance / 2 }, 800, Phaser.Easing.Quadratic.InOut, this).to({ x: distance + distance / 2 + distance / 4 }, 800, Phaser.Easing.Quadratic.InOut, this);

[ericjbasti]

I wouldn't suggest using a tween for this. You need to use either the built in physics or roll your own very basic version. It really only needs 3 variables to pull it off. VelocityX, VelocityY, and a global gravity variable. The VelocityY will push against the gravity and will cause the arc you're looking for, when it hits the ground inverse your VelocityY (*=-1). Have the VelocityX decrease on every hit and it will eventually stop.

[lewster32]

Yeah, this can be done with Arcade physics pretty easily. Just set the gravity to whatever seems sensible, set the body.bounce.y to 0.5 or so and finally set the body.drag.x to something again that gives sensible results, then just set some velocity on your object, like body.velocity.setTo(100, -100) to send it flying off up and to the right. The bounce will make it bounce, and the drag will make it come to a stop, and tweaking these values should give you something workable. You may additionally choose to only apply the drag when the body is near the ground to simulate ground friction for more realistic results.

 

If you want a nice Angry Birds style way to launch the object, check this example: http://examples.phaser.io/_site/view_full.html?d=arcade%20physics&f=launcher+follow+world.js&t=launcher%20follow%20world

[megan]

Thanks guys, both of your answers helped a lot! It works like a charm now, and it was wayyy easier that dealing with tweens and math

[Befive.Info]

I had a similar problem and I could solve that thanks to you all. It is way easier to use the arcade physics.In my case I used the arcade physics to show coin fountain. I was trying to use tween but I could not really move coins as I wanted. 

In video:

Codepen:

http://codepen.io/BeFiveINFO/full/WGOBrE/

 

Its CSS3 version (for reference):

http://codepen.io/BeFiveINFO/full/pJdKpP/