Jump to content

How to Simulate Golf Ball Path and Acceleration


Recommended Posts

I want to simulate the trajectory and bounce of a golf ball. I can't use physics because the destination of the path is known. I have two questions;

1)  What is the best way to tweak acceleration at various stages of the path?

What I found on the Phaser 3 examples for tweens was a timeline and custom easing, but I couldn't get anything close. The attached video (path.mov) shows how bad it looks without acceleration. Default easing won't cut it here.

2) Is there a way to generate a path from a physics simulation within phaser?

I tried making a custom path from one externally in JSON, but I couldn't figure out how to import it. The documentation gives no examples, and neither do the online examples.

I have the code I used below for the video currently:


function create () {

    this.add.image(0, 0, 'bg').setOrigin(0, 0);
    graphics = this.add.graphics();
    follower = {t: 0, vec: new Phaser.Math.Vector2()};

        targets: follower,
        t: 1,
        duration: 4000,
        yoyo: false,
        repeat: 0

    function shotPath(finX,finY, curveWidth, curveHeight) {

        //Starting point of the ball.
        tracer = new Phaser.Curves.Path(540, 1550);

        //The coordinates x and y are where the ball finishes.
        tracer.quadraticBezierTo(finX, finY, curveWidth, curveHeight);
        tracer.lineTo(finX + 35, finY - 37);
        tracer.lineTo(finX + 60, finY - 5);
        tracer.lineTo(finX + 80, finY - 32);
        tracer.lineTo(finX + 90, finY - 12);

    //CurveWidth > 540 is a draw and < 540 is a fade.
    shotPath(540, 1200, 410, 600);


function update ()
    graphics.lineStyle(2, 0xff0000, 1);


    tracer.getPoint(follower.t, follower.vec);

    graphics.fillStyle(0xffffff, 1);
    graphics.fillCircle(follower.vec.x, follower.vec.y, 8);

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...