P2 physics trajectory on a physics body.

[ogramp]

Hey,

I'm trying to make a basketball game with predicted trajectory and I am having trouble with the trajectory.

chargeBall: function(Pointer, x, y) {
	// If the button is down we charge the ball.
	if( Pointer.isDown && !isBallMoving ) {

		// Clear the graphics, set the style and draw the line from the ball to the Pointer.
		trajectoryGraphics.clear();
		trajectoryGraphics.lineStyle( 2, '0xCCCCCC' );
		trajectoryGraphics.moveTo( ball.x, ball.y );
		trajectoryGraphics.lineTo( x, y );

		// Calculate the velocity variables for the ball body to use in launchBall.
		launchVelocity.x = ( ball.x - x ) * 5;
		launchVelocity.y = ( ball.y - y ) * 5;

		// Make the line narrower.
		trajectoryGraphics.lineStyle( 1, '0xCCCCCC' );
			
		// Lets make 11 segmented trajectory line. For every segment get the point and draw a small square.
		for( var i = 0; i < 15; i++ ) {
			var trajectoryPoint = this.getTrajectoryPoint( ball.x, ball.y, launchVelocity.x, launchVelocity.y, i );
			trajectoryGraphics.drawRect( trajectoryPoint.x, trajectoryPoint.y, 2, 2 );
		}

	}
},
launchBall: function() {
	if( !isBallMoving ) {
		// Clear the graphics if the ball has been launched.
		trajectoryGraphics.clear();

		// Set the ball velocity.
		ball.body.velocity.x = launchVelocity.x;
		ball.body.velocity.y = launchVelocity.y;

		// Flag the ball as moving.
		isBallMoving = true;

		// Set the ball physics to enabled.
		ball.body.data.gravityScale = 1;
		ball.body.data.collisionResponse = true;		

		// Create a new ball after 4 seconds.
		this.time.events.add( Phaser.Timer.SECOND * 4, this.createNewBall, this );
	}
},
getTrajectoryPoint: function( startX, startY, velocityX, velocityY, n ) {
	var t = 1 / 60;

	var stepVelocityX = t * this.physics.p2.pxm(-velocityX);
	var stepVelocityY = t * this.physics.p2.pxm(-velocityY);

	var stepGravityX = t * t * this.physics.p2.pxm(-this.physics.p2.gravity.x);
	var stepGravityY = t * t * this.physics.p2.pxm(-this.physics.p2.gravity.y);

	startX = this.physics.p2.pxm(-startX);
	startY = this.physics.p2.pxm(-startY);

	var tpx = startX + n * stepVelocityX + 0.05 * (n * n * n) * stepGravityX;
	var tpy = startY + n * stepVelocityY + 0.05 * (n * n * n) * stepGravityY;

	tpx = this.physics.p2.mpx(-tpx);
	tpy = this.physics.p2.mpx(-tpy);

	return { x: tpx, y: tpy };
}

The code is from Phaser Box2D physics example I think, but I am using the P2 physics system. It works. Kind of. The trajectory is wrong.

I am absolutely not sure but I think it has got to do something with the ball physics body. I'd love it if you'd take a quick look and tell me if I'm doing something very wrong.

[ogramp]

Ok, fresh eyes are best eyes.

Let a friend take a look at it and the Phaser's own example and

var tpx = startX + n * stepVelocityX + 0.05 * (n * n * n) * stepGravityX;
var tpy = startY + n * stepVelocityY + 0.05 * (n * n * n) * stepGravityY;

those two lines have to be 

var tpx = startX + n * stepVelocityX + 0.5 * (n * n + n) * stepGravityX;
var tpy = startY + n * stepVelocityY + 0.5 * (n * n + n) * stepGravityY;

And the power needs a bit fiddlin but it works! Yay!