• Content Count

  • Joined

  • Last visited

  1. I want the canvas to move with the rest of the page on drag events started within the canvas. How do I do this? Everything works normally on the desktop. Thread for Phaser 2:
  2. Awesome, I am familiar with the concept of rail physics. I'm also agnostic to phaser methods. 🙂 Edit: The link has some good content for paths, but not on custom acceleration on tweens.
  3. 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 ( 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 =; follower = {t: 0, vec: new Phaser.Math.Vector2()}; this.tweens.add({ 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.clear(); graphics.lineStyle(2, 0xff0000, 1); tracer.draw(graphics); tracer.getPoint(follower.t, follower.vec); graphics.fillStyle(0xffffff, 1); graphics.fillCircle(follower.vec.x, follower.vec.y, 8); }